11/06/2023, 13:30
WebStack 2023
1. Set up the project:
Assignment 1: Favorite Movie App
Objective: Create a Favorite Movie List app using React for the front-end and Express for the
back-end. Implement CRUD functionalities to allow users to add movies, display the movie list,
update movie information, and remove movies from the list(it is similar to ToDo list app). I
encourage you to be creativity in designing and styling the app.
Requirements:
Assignment 1: Favorite Movie App - WebStack 2023
• Create a new directory for your project.
• Initialize a new React app using Create React App.
• Create a new directory for the Express server.
• Initialize a new Node.js project in the server directory.
• Install necessary dependencies (e.g., Express, body-parser, cors).
2. Front-end (React):
●
• Create a main component, such as App, to serve as the root component.
Implement a form to allow users to add new movies to the list.
• Fetch and display the list of movies from the server.
Display each movie with its title, description, and any other relevant information.
• Add a remove button next to each movie to delete it from the list.
●
• Add an update button next to each movie to modify its information.
Implement update functionality to allow users to edit movie details.
Style the app creatively using CSS or CSS frameworks.
3. Back-end (Express):
• Set up a server using Express to handle API requests.
• Create necessary routes to handle CRUD operations.
• Implement a GET route to fetch the list of movies from the server.
Implement a POST route to add new movies to the server.
• Implement a PUT route to update movie information.
• Implement a DELETE route to remove movies from the server.
Ơ
https://omandakh.gitbook.io/webstack-2023/model-5/assignment-1-favorite-movie-app
:
1/2 11/06/2023, 13:30
• Store the movie data in memory (no database required).
Please complete the app as close as possible with this design.
Movie List
Movie Name
The Shawshank Redemption
The Godfather
The Dark Knight
Schindler's List
Pulp Fiction
Fight Club
Terminator 2: Judgment Day
Modern Times
←
Genre
Drama
Drama
Action
Drama
One Flew Over the Cuckoo's Nest Drama
Action
Drama
Action
Assignment 1: Favorite Movie App - WebStack 2023
Comedy
Next - Model 6
Students DB in MongoDB
Release Date
1/1/1994
3/14/1972
7/14/2008
11/30/1993
5/21/1994
9/10/1999
11/19/1975
7/1/1991
2/5/1936
Studio
Columbia Pictures
Paramount Pictures
Warner Bros. Pictures
Universal Pictures
Miramax Films
20th Century Fox
United Artists
Tri-Star Pictures
United Artists
Last modified 12d ago
Score
93
92
90
89
88
87
86
85
84
https://omandakh.gitbook.io/webstack-2023/model-5/assignment-1-favorite-movie-app
ZEDIT
ZEDIT
ZEDIT
ZEDIT
ZEDIT
ZEDIT
ZEDIT
ZEDIT
ZZEDIT
ADD NEW MOVIE
DELETE
DELETE
DELETE
DELETE
DELETE
DELETE
DELETE
DELETE
DELETE
Model 5 - Previous
CRUD methods
个
2/2
