# 2023 Fundamentals of Frontend Development

### Materials
You can download the slides via [this Dropbox link](https://www.dropbox.com/sh/duaqapijbblpn84/AACEMmF5W40x_j4Ufz0t65BGa?dl=0).

### Timeline
Module 3: Fundamentals in Frontend Development
* Full day: 12,13,16,17 Jan 2023 (0900-1700)
* Half day (AM/PM): 1 Feb, 17 Feb (1330-1700)

### Syllabus
1. Building a **reactive** site with vanilla JavaScript
2. Introduction to **Web Components** and basics of **browser**
3. **Web build tools**: Task runner (npm) and module bundlers (Webpack)
4. Overview of **popular** Web Frameworks: React, Angular, Svelte, Ruby on Rails
5. Fundamentals of **React**: JSX, components, props, state, conditional rendering, component life cycle, basic hooks
6. **Advanced** React topics: custom hooks, render props, context
7. React **best** practices
8. React **Ecosystem**: routers, forms, state management, and styling
9. **Backend**: REST API calls recap
10. Writing **tests** and preparing for deployment
11. **Deploying** the website

*Bonus*: If time permits, we will cover Typescript.

### Final Project
Our project for this module is **straightforward**, but careful considerations must be made and presented.

#### Project Description
Build and **deploy** a **reactive site** built with React.

For example, something like an **e-commerce** website, a **movie list** website, a nice **algorithm** visualizer, etc that would otherwise be very hard to be implemented with vanilla js.
* You can use **data** from widely available free REST APIs like https://fakestoreapi.com, https://www.themoviedb.org, etc, or use your own data.
* It's **unnecessary** to build a backend on your own, but if you do make sure it's not a **file**, but a proper REST server.
* You can use [json-server](https://www.npmjs.com/package/json-server) or anything alike
* **No need** to manage authentication. If you'd like to do it anyway, it's up to you, but a recommended easy way is using **Firebase**.
* The UI has to look decent, you can use **CSS Frameworks** when in doubt
* See inspirations here: https://reactjs.org/community/examples.html, https://reactjsexample.com

#### Deployment Pipeline
This part won't be taught in depth because there are a plhetora of services out there, but there are plenty of getting-started tutorials that are easily available online depending on the services you use.

Use free webhosting services like Github Pages, Netlify, Vercel, Cloudflare Pages, Firebase, Digital Ocean, Heroku, AWS EB, whatever you want. You **cannot** use `localhost` for your final project presentation.

Regardless of whichever method you choose, you **must**:
* **Build** then **test** your app before deployment:
* You are free to use any deployment **pipeline**
* Github Actions is easy and recommended
* **Cancel** deployment if any **test** or **linting** process fails. Your old version should still be there.
* Your test must contain at least any of the two categories:
* Unit test
* Integration test
* UI test
* You **must** use some kind of linter in your project

*You can use either Javascript or Typescript. You can use other React frameworks like Next, Gatsby, etc.*

#### Presentation
During presentation day, you must:
1. Demonstrate that your site is accessible **publicly**
2. Demonstrate a **quick change** by doing the following:
* Push successful changes and demonstrate the update
* Then, push erronous changes and demonstrate that the previous state of the site is still up
3. **Explain** **3** tests that you have made in your project.
* By "explain", means to highlight *why* these tests are important or convenient.
5. **Explain** **5** React or programming **best-practice efforts** that you have made to make your program as clean as possible and avoid **pitfalls**. See [react documentation](https://beta.reactjs.org) for these pitfalls.

#### Submission
The project is due on our presentation day. There's no need to submit anything beforehand.
1. Create a github repository (public) for this project and push all your content there
2. Write a `readme` file explaining:
* The purpose of your site (some screenshots will be good)
* Where can we find the **demo link**
* Your CI pipeline:
* What's included in your CI pipeline?
* What are you testing for?
* Basically Point (3) of your presentation above
* Point (4) for your presentation above
4. Provide the link to this repo on presentation day (in the chat) so instructor can refer to it