Web代写｜COMP-308 Lab Assignment #3
Designing and implementing a complete web app using MERN stack and GraphQL
Create an Express GraphQL API which exposes CRUD functionalities for a student/course system. Create a student model which describes student information (student number, password, first name, last name, address, city, phone number, email, program) and also a course model which describes course information (course code, course name, section, semester). The information should be stored in a MongoDB database. Use ref to allow a student document to make a reference to corresponding course document. Provide authentication capabilities using JWT or express-jwt.
Create a React front end that allows students to login, add a course, update a course (for example change the section), drop a course, list all the courses taken by a student, list all students, list all courses, and list all students that are taking a given course.
Use functional components, composition, and React Hooks for the React front-end. Design a nice and friendly UI.
VS Code Project Naming rules:
You must name your VS Code project/folder according to the following rule:
Example: JohnSmith_COMP308Lab3_ Ex1
Remove the node_modules folder before zipping the project. Submit your project as a zip file that is named according to the following rule:
DO NOT use RAR or other types of archives.
Demonstration Video – Recording Instructions
Please record a short video (max 3-4 minutes) to demonstrate your assignment solution. You may use the Windows 10 Game bar to do the recording:
- Press the Windows key + G at the same time to open the Game Bar dialog.
- Check the “Yes, this is a game” checkbox to load the Game Bar.
- Click on the Start Recording button (or Win + Alt + R) to begin capturing the video.
- Stop the recording by clicking on the red recording bar that will be on the top right of the program window.
(If it disappears on you, press Win + G again to bring the Game Bar back.).
You’ll find your recorded video (MP4 file), under the Videos folder in a subfolder called Captures.
Submit the video together with your solution.