back end = express mango dbfront end = functional react
HMW Emerging Technologies COMP-308 Mid-Term TEST – Week 7 Student: ______________________ Be sure to read the following general instructions carefully: · This lab test must be completed individually by all the students. · Implement the solution for Exercise #1 if your first name starts with a letter from A-N, otherwise, implement the solution for Exercise #2. · You must submit the solution to eCentennial when you finish the test. You VS Code project name should be named “YourFullName_MidTermTest_001_2022” and should be zipped in a file “YourFullName_MidTermTest_001_2022.zip”. Exercise #1 – For students whose first name starts with a letter from A-N Create an Express.js backend that allows users to book vaccine appointments. You will have to design an MVC structure. Create a model that describes an appointment document. Each document has the following properties: cardNumber - String vaccineSite – String priorityArea – String (validate using an enum list that contains ['80+', 'healthcare', 'essential'] dateTime - Date cancelled - Boolean Create a controller that implements: add appointment, list appointments, delete an appointment from the database and refresh the view. In development.js file, name the MongoDB database: YourFullName-appointment-db. Write a React UI to allow the user to book vaccine appointements: · A React form will be used to add appointment information (as shown above) · A React form will be used to display a list of appointments as shown below. · The same React form used to display the list, can be also used to delete an appointment as shown below. You may use the code from Week 5 examples or SampleTest in Week 6 to implement your solution. Make sure to use proper naming for controller, model, routes, and functions. Use only functional components in React UI. (100 marks) Evaluation: MongoDB database (config files, model, validation) 15% Express Rest API: Add List Delete 15% 15% 15% React UI: Add appointment: React form as shown above List appointments: React form as shown above and also delete. 10% 20% Friendliness (using css to align the HTML elements, etc.) 10% Total: 100% Exercise #2 – For students whose first name starts with a letter from O-Z Create an Express.js app that allows users to create game surveys. You will have to design an MVC structure. Create a model that describes a game survey document. Each document contains the following properties: surveyId - String gameGenre – String (validate using an enum list that contains ['Action', 'Adventure', 'Strategy', 'Sports'] daysPerYear – Number (validate using min, max validators for days number) age - Number Create a controller that implements: add survey, list surveys, update a survey from the database and refresh the view. In development.js file, name the MongoDB database: YourFullName-survey-db. Create the necessary React forms to allow the user to use the application: · A React form will be used to add survey information (as shown above) · A React form will be used to display a list of surveys as shown below. · The same React form used to display the list, can be also used to update a survey as shown below. You may use the code from Week 5 examples or SampleTest to implement your solution. However, make sure to use proper naming for controller, model, routes, and functions. Use only functional components in React UI. (100 marks) Evaluation: MongoDB database (config files, model, validation) 15% Express Rest API: Add List Update 15% 15% 15% React UI: Add appointment: React form as shown above Update appointments: React form as shown above and also delete. 10% 20% Friendliness (using css to align the HTML elements, etc.) 10% Total: 100% Lab Test Page 1 of 1