# The Final Project

This challenge belongs to the Full-Stack Web Development program at CoderSchool. You will use all the skills you've learned in this course by building a full-stack web app with the MERN stack. You will come up with a real-life problem and build a web solution for it.
Completing this challenge means you are ready to become a Full Stack Web Developer.

Good luck!

## Policies

### 1. **Originality**
This the most important policy for this project. You are encouraged to use design templates, utility libraries, and tutorial videos to build your project. However, you are required to have the highest ownership of your ideas and codes and ensure copyright for any other materials and assets.

> Warning
> Please be aware that failing to explain any part of your work will be deemed as plagiarized.

> Danger
> Any act of cheating or policy violation will make you ineligible for any benefits guaranteed by us.
### 2. Scope and Time Management
We care about our learners and want to help you achieve your goal as soon as possible. so To ensure timely completion of the project and prevent scope creep (doing more than planned that extends the timeline), learners must adhere to the pre-defined list of basic requirements. Learners will be asked to fill out a project timeline tracker that includes key milestones and deadlines. **Regular check-ins** will be scheduled with each learners to monitor progress and provide additional support as needed.Learners must inform the mentor or CS staff if they fall behind schedule.

**Scope Recommendation**

The project should consist of **3 to 6 entities**, which represent the major features. Including more than 6 entities may cause the project timeline to extend, potentially delaying progress towards job searching.

**Time Recommendation**
You should spend *no more than 60 days* on the final project.
## Requirements
### 1. Back-end requirements
**RESTful API**
- [ ] Design reasonable schemas and ERD for **at least 3 entities**
- [ ] Design and implement a RESTful API with appropriately named routes
- [ ] Implement **CRUD** (Create, Read, Update, Delete) functionality for **at least 3 entities** in the database.
- [ ] Responses from the server must have a **uniform structure**
- [ ] Implement **soft delete** with isDeleted for user data.
- [ ] Validate all request inputs.

**Authentication**
- [ ] Implement user authentication using JSON Web Tokens (JWTs) or another secure authentication method, such as OAuth
- [ ] Password must be encrypted.

**Documentation**
- [ ] Include a README file with:
- Instructions on **how to set up and run the API locally**
- API documentation on **how to consume the API** (ex: description and instruction for each route)
- ERD (Entity Relationship Diagram)

### 2. Front-end requirements

**User Interface**
- [ ] The application must have a **responsive design** that *looks good* on least 3 screen sizes: desktop, tablet, and mobile.
- [ ] Theme changing feature (eg: Dark/Light mode).
- [ ] Use **Material UI**. Customizing the MUI components with CSS is allowed.

**User Authentication**
- [ ] Signup/Login/Log out feature with the addition of **persistent login**.

**Form Validation**
- [ ] The project should implement **client-side form validation** to ensure that user input is valid before submitting it to the server.

**Error Handling**
- [ ] Error handling: The student should implement error handling on the front-end to display error messages to users when something goes wrong on the server.

**Routing**
- [ ] Use React Router to handle client-side routing and allow users to navigate between pages without a full page refresh.
- [ ] Each view must have its dedicated url path so that it is possible to share the current view by url between users. (Only required for non-protected routes).
- [ ] Protected routes for pages where applicable.
- [ ] The deployed version on Netlify must be able to navigate to pages by editing the url input box on the browser or hitting refresh button instead of showing 404 error. Hint: [Read this Docs](https://docs.netlify.com/routing/redirects/)

**State management**
- [ ] Implement state management with Redux

**Documentation**
- [ ] Include a README file with:
- Project description - a brief description of the purpose and main features
- User Story
- Instructions on **how to set up and run the application locally**
- Third-party libraries used in the project

### 3. Common requirements
For any part of the application that displays a list of items, it should be able to:

- [ ] Render the items in a list/gallery view.
- [ ] Paginate through pages.
- [ ] Search and filter items based on item attributes.
- [ ] Display each item in detail on a detail page or a popup modal when users click on one item.

### 4. Deliverables

You are required to submit a minimum of:

| Item | Notes |
| -------- | -------- |
| Github link to Front-end code base| Include README as instructed in FE requirements |
| Github Link Back-end code base| Include README as instructed in BE requirements |
| Links to deployed application & server| Netlify & Heroku (or other platforms as appropriate)|
| Presentation recording | Video on Goodgle Drive with public access or uploaded to Youtube |

## Graduation Interview
After the deliverables have been submitted, you will be contacted to schedule a **Graduation Interview** in which you will present your project to show your ownership of the project.