The project for Web Application Developement course. You are the
!
| Number | ID | Name | Task allocation |
|---|---|---|---|
| 1 | ITITIU19169 | Lê Nguyễn Bình Nguyên | API + Database |
| 2 | ITITWE19024 | Dương Minh Nhựt | React User Interface |
| 3 | ITITIU19067 | Lê Hữu Sỹ | React Dashboard Interface |
Our team originally planned to implement an issues tracker project to create a website to track the progress of a job or a project. However, the project was put on a hold since we did not found it captivating and that we wanted a more practical web application. In the end, we decied on our common interest, a very popular movie site: Netflix. Not only that it gave us inspiration when implementing since the whole team has the same hobby of watching movies. And at the same time, the project has more opportunities for each member to develop programming skills to guide the career path as well as its practical usage.
Thanks to the analysis of Netflix's website, every member on the team can recognize and understand its operation and implement it with small inputs, or make up the basic website under other frameworks and libraries together.
Present slides: here
Table of Contents
- Server : Contains an API for netflix, created by Node.js, Express and MongoDB. Using RESTful APIs.
- Dashboard : The management admin page, created with React, and Material UI.
- Client : The client for user, built with React, and Material UI.
List the ready features here:
| Field | Client | Dashboard |
|---|---|---|
| User | Register - Login - Logout - Forget account - Re-subcribe account | Login - Update - Delete - Statis - Logout account |
| Movie | Watch - Random - Filter type of movie - Search - Subtitles - Speed up movie | Create - Update - Delete - Random movie |
| List | Watch trailer - Filter genre of list | Create - Update - Delete - Random list |
There are 2 other Dashboard project:
| Plugin | README |
|---|---|
| bcryptjs | plugins/bcryptjs/README.md |
| express | plugins/express/README.md |
| jsonwebtoken | plugins/jsonwebtoken/README.md |
| mongoose | plugins/mongoose/README.md |
| nodemon | plugins/nodemon/README.md |
| cloudinary | plugins/cloudinary/README.md |
| Plugin | README |
|---|---|
| axios | plugins/axios/README.md |
| material-ui | plugins/material-ui/README.md |
| react | plugins/react/README.md |
| react-router-dom | plugins/react-router/README.md |
| recharts | plugins/recharts/README.md |
| Plugin | README |
|---|---|
| axios | plugins/axios/README.md |
| react | plugins/react/README.md |
| react-router-dom | plugins/react-router/README.md |
| sass | plugins/sass/README.md |
├── APIs
│ ├── src
│ │ ├── config
│ │ ├── controllers
│ │ ├── middlewares
│ │ ├── models
│ │ ├── routes
│ │ ├── server.js
│
├── Dashboard
│ ├── src
│ │ ├── actions
│ │ ├── components
│ │ ├── context
│ │ ├── pages
│ │ ├── App.js
│ │ ├── index.js
│
├── UI-UX
│ ├── src
│ │ ├── actions
│ │ ├── authContext
│ │ ├── components
│ │ ├── pages
│ │ ├── App.js
│ │ ├── index.js
| Login | Watch | Subcribe |
|---|---|---|
 |
 |
 |
| Login | Register | Forget Password | Verify Email |
|---|---|---|---|
 |
 |
 |
 |
| Home Page | Profile | Payment |
|---|---|---|
 |
 |
 |
| List Movie | Info | Watch |
|---|---|---|
 |
 |
 |
| Login | Home Page |
|---|---|
 |
 |
| User List | Update User | User Statistics |
|---|---|---|
 |
 |
 |
| Movie List | Update Movie | Create Movie |
|---|---|---|
 |
 |
 |
| List List | Update List | Create List |
|---|---|---|
 |
 |
 |
- This project was based on this tutorial.
- Creating features My List
- Improving search movies and developing search list
- Building quickly change user
- Implement a recommendation system
- Implement "last watched" and "continue watching" feature
- Implementation of MERN stack technology
- Usage of different frameworks and libaries
- Usage of Git, pull, merge and commit
- Organize files to better manage development
- Communication between Frontend and Backend developers
- Importance of README.md