For this weekend's project we'll full stack clone TMDB.
We'll combine all the knowledge we've learned throughout this course including but not limited to the following
- HTML
- CSS
- Bootstrap
- ES6
- React
- Redux
- Redux Thunk
- Node
- Express
- Routing
- REST
- CRUD
- Controllers
- MongoDB
- Mongoose
- Git
This should be a fun and challenging weekend project that pushes you to test yourself.
Enjoy!
What You'll Learn
- The extent of a full stack web application.
- Clone this starter pack.
- Create your own repo on Github.
- Create
new-origin
as a remote in the starter pack and point the project toward it.
- Create
./client/.env
& ./server/.env
.
- Add
PORT=5000
to ./server/.env
.
- Add
REACT_APP_BACKEND_API=http://localhost:5000/
to ./client/.env
.
- Download this CSV and use MongoDB Compass to instead all the movies into your local DB.
- Start backend & frontend to make sure everything is working.
- Study the source code thoroughly. After you're done studying it, study it again. If you don't understand everything, ask your technical lead.
The features below will have you touching many parts of the codebase.
Front end & backend knowledge/skills/expertise is what it will take to complete these features.
- Implement allowing a user to create an account.
- Implement allowing a user to login with their email & password.
- Implement allowing a user to update their account.
- Implement allowing a user to delete their account.
Now we need to implement the same functionality on a different resource, movies
.
- Implement allowing a user to create an movies.
- Implement allowing a user to view/read all movies.
- Implement allowing a user to sort movies on
avg_vote
in both ASC/DESC order.
- Implement allowing a user to sort movies on
votes
in both ASC/DESC order.
- Implement allowing a user to search for movies based on title.
- Implement allowing a user to update their movies.
- Implement allowing a user to delete their movies.
Now we need to implement the same functionality on a different resource, reviews
.
- Implement allowing a user to create a review for a movie.
const review = {
body: "This movie was awesome!",
id: ObjectId("60a6201f71822014c9eb9469"),
movieId: ObjectId("60a6201f71822014c9eb9469"),
userId: ObjectId("60a6201f71822014c9eb9460"),
};
- Implement allowing a user to delete a review if it's theirs.
- Implement allowing a user to edit a review if it's theirs.
- Implement allowing users to view all reviews of a movie on the single movie page.
- Implement allowing a user to view/read movies based on genre.
- Implement allowing a user to search for movies based on director.
- Implement allowing a user to search for movies based on year it came out.
- Implement allowing a user to search for movies based on country of origin.
Grade
| Description
|
F
| All requirements done.
|
C
| All requirements done and the site is beautifully styled.
|
A
| All requirements and bonus bonus features implemented beautifully.
|