GitHub Classroom link: https://classroom.github.com/a/Nt29H03K
Implement the final React/NodeJS/MySQL app.
- Use CodeSpaces for this project.
- In VSCode terminal on CodeSpaces start a new branch:
git checkout -b d3 - As you code, push daily changes to your GitHub repo's
d3branch:
git add .
git commit -m "done feature xyz"
git push origin d3
-
Write the NodeJS part of your code in node-react-app/server.js
-
D3 must have the following main React components: App, Review, Search, MyPage. You may create as many auxiliary components as needed (e.g., ReviewTitle).
Four components (Landing, Search, Review, MyPage) correspond to four pages in your rendered app. You must use React client-side routing (follow the example covered in Lect10-2) to navigate between these pages. The pages must have the following paths:
| Component | Path |
|---|---|
| Landing | / |
| Search | /Search |
| Review | /Review |
| MyPage | /MyPage |
Here, Path represents the affix that will appear at the end of the URL when you navigate to that page. For example, when you use client-side routing to navigate to Search, you will see:
http://myURL.com/Search
-
All four pages in your application must have a Material UI Appbar (https://mui.com/material-ui/react-app-bar/) at the top of the page, containing text links to all other pages.
-
Appcomponent: The App component in your application must have the same content as App/index.js in Lect10-2 example.
a. Place the code for the landing page in client/src/components/Landing/index.js
b. Include the MUI Appbar in the Landing page with the links to Search, Review, and MyPage.
c. Design your own content for the Landing page related to your movie app.
a. This is a page for searching for movies by title, actor and director. The results must show the movie title, director, texts of user-entered reviews (if any) and average user review scores.
b. The page must contain three MUI text fields for searching by:
i. Movie title
ii. Actor's first name + last name (as one field)
iii. Director's first name + last name (as one field)
c. The user may specify multiple or any one of the search criteria at a time. If multiple search criteria are entered, use AND (not OR) when composing your SQL statement. For example, if user entered a Director's name and an Actor's name, then the retrieved movies must satisfy BOTH of these criteria.
d. One Search button. Upon clicking this button, the React code would send all of the search criteria to the NodeJS server. The server will send them as MySQL SELECT statement(s) to your MySQL database, and return back the retrieved data.
e. Specifically, the retrieved movie data must consist of:
i. the movie title
ii. director's first + last name
iii. the list of all texts of user-entered reviews (if any) and average user review scores. Note: it is sufficient to just list the content of the review (omitting the userID and review title).
f. Include the MUI Appbar in the Search page with the links to Landing, Review, and MyPage.
a. This page must be adapted based on your D2 app page, and must contain all the functionality of D2, including reading movies from MySQL and writing user-entered reviews into your MySQL tables.
b. Under client/src/components/ create a new directory Review and save this page as index.js under that directory.
c. Include the MUI Appbar in the Review page with the links to Landing, Search, and MyPage.
a. This must be a new page of your own choice. The page must read and write data from/to your copy of the IMDB database. You can add new tables and/or new attributes to existing tables to your MySQL database as needed. Examples of functionalities supported by the additional page include:
i. browse/search/view embedded videos of movie trailers
ii. view recommendations of movies to watch based on the user's reviews.
iii. read news articles about movie releases, awards, actors, etc.
Note: if the functionality of your page requires additional data, it is sufficient to just include a few samples in your database, e.g. a few links to movie trailers (for point #i) or a few articles (for point #iii). Include a short description on this page of your app, telling us which movies have this additional data, so that we use them to test your app.
b. Under client/src/components/ create a new directory MyPage and save this page as index.js under that directory.
c. Include the MUI Appbar in the MyPage page with the links to Landing, Review and Search.
d. Note: MyPage must have substantially different functionality from both Search and Review pages.
- Visual design
a. You entire app must use visually consistent MUI styling (see Lecture_5-2 slides and code examples).
-
After you finish your development, make sure that the app renders in the browser and functions according to the specifications.
-
Push changes to the GitHub:
git add .
git commit -m "completed"
git push origin d2
- In your GitHub repo, create new pull request and merge
d3branch with themainbranch.