Assignment 4 (PR4): React with JSON Server CS185 Winter 2021
Assigned on March 4, 2021
Due Wednesday March 11, 2021 by 11:59pm PST
1 Requirements
In this assignment, you will learn how to build a React application with a mock backend JSON Server. You can earn extra credit by designing a user friendly interface (appropriate use of color, font, text size and other visual design elements you learned about in lecture).
For this assignment, you need to create a new tab on your website. This tab will show a Zoom meeting manager that you will create to meet the following requirements:
1. React requirements
• On initial load, the page will have a container that has three main things: title Zoom Meeting Manager, a button named Create Meeting and a display of the list of meetings already in the database (initial list will come from db.json).
• When a user clicks on the Create Meeting button, the page will stop displaying the saved meeting list and will instead show 4 user input fields to create a new meeting. The button will change to have a new label called ”Full Schedule”.
• Creating user input fields: one text box for meeting Title, one datetime type input box for Date(We realized that datatime-local type may not work on some browsers or system so if you want to have a string input box it is fine too, as long as you can do error handling on the following), one url type for a Zoom link and one checkbox for tagging a meeting Important.
• Error handling for 3 input fields: meeting Title needs to be non-empty and within 30 characters, Date needs to be greater than current date and the Zoom link must contain the string ’zoom’. If any of the above requirements is not satisfied, you should print out an error message or show an alert box for the error.
• Set the default check box for Important to be unchecked.
• If checkbox is checked by user, the display of the output (i.e., that meeting in the list display)
should be highlighted to indicate it is an Important meeting.
• Create a submit button called ”Save Meeting”. If user inputs are error-free and meet the above requirements, they should be saved to the JSON Server (Database) and all meetings displayed when clicked on button ”Full Schedule”.
• Each stored meeting information will have a delete icon. When clicking on the delete icon, the data will be removed from the Full Schedule display and the JSON Server Database.
• On the Full Schedule, if the user double clicks on each stored meeting information, an additional form with Meeting Title, Date, Zoom link, and Important will be displayed below. Once the user makes changes to one or more meetings, the information needs to be updated on the React page and the JSON server database.
1
2
• Each meeting link needs to be clickable on the Full Schedule.
• When there is no meeting in the database to display, display a message that indicating there is
no available meeting 2. JSON Server
• Install Json Server locally with your React Application npm install json-server
• In package.json, inside of ”scripts” fields, add
”server”: ”json-server –watch db.json –port 5000”
In this way, you can connect localhost:5000/tasks to check your database data.
• Since this HW will focus mostly on React, the code for add, update and delete on the JSON server will be covered in the discussion section. Specifically, they are methods of POST, PUT and DELETE.
• The initial data for this Assignment is in the file db.json. You will first load those data into your React application. Again, this will be covered in the discussion.
• You need to make sure that Add, Delete and Update operations are updating both JSON Server Database and your React Display at the same time.
Extra Credit
Use your knowledge from class to create a user friendly interface. Feel free to design a customized index.css.
3
Useful Resources
• An example demonstration of this HW(Not include all error handlings) • Install JSON Server
• Deploy JSON Server as backend on Github
• Deploy React production on Github
• Recommended functions: useState, useEffect, Async, Promise (Those will be covered in Discussion) Submission
4
In this HW, we decided not to use third party typicode resource because it is not very stable and can not produce real time database updates. Therefore, you do not need to submit any github repo link or create two github repos for this HW. Moreover, you don’t need to use npm build to deploy your page to production. After everything is working correctly, you should use zip -r yourname.zip * to zip all the files and upload yourname.zip to the gouchaspace. Specifically, db.json and the rest of the react codes will be in the same directory as showed in discussion. Please set port 3000 for react server and port 5000 for JSON server and you can run localhost:3000 for react server and localhost:5000 for JSON server (showed in discussion). Grader will use those two ports to run your code locally.
2