# React Router

## The Job Routing App
We are going to build a small app that practices the react-router library. React router dom is a super powerful library that helps routing around the application. One of the core things here is authentication. So how does website authentication works in the front end?
> "Single Page Apps (SPAs) are often tied to APIs, and these APIs, in the form of endpoints, help provide data that can be manipulated in the logic of these apps. Some of these data the APIs provide are sensitive, so before they can be accessed some form of authentication needs to be in place."

For example, when you get to a website, you need to log in first to see the private information that only users can see but guess such as user's information, the salary of the job recruitment news, etc.

Also, you'll have a chance to practice useContext, the Material UI and React Hook Form that we learn from the previous lesson. Awesome! Let's get started!

## User story
- Users can see the navigation bar that shows user status
- If the user hasn’t signed in, see the sign-in button on the right side
- If users have signed in, see the username and a sign out button instead
- Users can see the list of jobs on the main page
- Users can click on a single job card to pop up a detailed job modal
- If the user haven’t signed in, pop up a sign in modal
- Users can sign in with a fixed username and password (don’t have to sign up) and sign out. Then the application will navigate the user to the expected page.
- :rocket: The demo is missing a search function? Can you implement it?
- :rocket: The login modal matchs the url `/login`. [See more](https://github.com/remix-run/react-router/tree/main/examples/modal)

## Resources and demo

### Resources:

- [Authentication](https://github.com/remix-run/react-router/tree/main/examples/auth)(*) with React Router
- [Modal](https://github.com/remix-run/react-router/tree/main/examples/modal)(*) with React Router
- [Job data](https://drive.google.com/file/d/175JD05bo6Cjn3XupqlBf83n2Jta1Ymz1/view?usp=sharing). Create your fake API with [JSON-server](https://www.npmjs.com/package/json-server) then practice fetching data.
- [Modal](https://mui.com/components/modal/) Material UI
- [React Hook Form](https://react-hook-form.com/)
- :rocket: [Search params](https://github.com/remix-run/react-router/tree/main/examples/search-params)(*) with React Router

<small>(*): These examples are from React Router written by Typescript. Therefore it will be some syntax that you might not be familiar. Feel free to ask your mentor/instructor to clarify it. </small>
### Demo
Have a look on the [demo](https://cs-job-routing.netlify.app/) website

## Marking Guide
Everyone will start at 100 score.
| Requirement|Grade |
|---|---|
| Missing any user story that are not rocket|-5 |
| Not implement fetching data| -10 |
| Made rocket| +10 |

This assignment minimum pass score is 80/100

---
**Good luck have fun!**