Begin Class Review Flow

[h0ethan04]

Instructions

Part of our project includes functionality for students to create reviews for classes. Currently we do not have the tables or backend functionality for this, so your task includes both frontend and backend work.

Backend:

• Create a new table on the prod db aligning to the specifications of the database model on figma, create the schema in reviews.sql and place it inside the server/db/schema directory.
• Create CRUD routes for the following specifications, and place the reviews.js file inside of server/routes:
  • get /reviews/ -> get all reviews
  • get /reviews/:id -> get review by id
  • get /reviews/class/:id -> get all reviews for a specific class by class id
  • get /reviews/student/:id -> get all reviews for a specific student by student id
  • post /reviews/ -> add new review, returning review
  • put /reviews/ -> update existing review (provide the student/class id’s needed in the body of the put request), returning updated review. You should be able to update any specific field by providing only that field (i.e. if we wanted to update the text, by providing only the text the results would be updates to only the text and not the review score).
  • delete /reviews -> delete review (provide the student/class id in the body) returning deleted review
• Add the endpoint to server/src/app.ts

Frontend:

• Note:
  • When working on the frontend, we want to work from making sure the site is responsive starting from a mobile device (this will make it easier when we modifying the styling for bigger screens)
  • When checking how the frontend looks on a mobile device through chrome's inspect element, be sure to select iPhone SE for test!!!
• Heads up:
  • Feel free to utilize client/src/components/playground/Playground.jsx to test out anything before putting it in their respective pages, or if there currently is no respective page
  • When prompted to log in, you can sign in with the account:
    • email: [email protected]
    • password: 123456
• Create four modals, and place them all in client/src/components/reviewModals:
  • Class data modal: dump all class related information (title, description, etc.) into a modal. Additionally, include a button labeled as “Add review”. Store file classInfoModal.jsx in the dir.
  • Review modal: radio button from 1-5, along with a freeform text input and submit button. Clicking submit should make a post request using the backend routes you implemented. Store file reviewModal.jsx in the dir.
  • Review submitted modal: button to close the modal, with text on the modal thanking the user for their review. Store file reviewSubmittedModal.jsx in the dir.
  • Review failure: text indicating user cannot submit a review because they need to attend a class first, with a button to close the modal. Store file reviewFailureModal.jsx in the dir.

Notes

For testing purposes, make a new React route at client/src/components/playground/playground.jsx, and add that to App.tsx.
From there you can place the modals in the playground to test and demo their functionality.

Acceptance criteria

From the frontend, you can post a new review using the reviewModal component.
All backend routes are functioning as specified.

Resources

Chakra UI components
button
form control
modal
radio