Tutor-Match-App

This is a MERN stack web application that helps students get the academic help they need. The website is a tutor matching app for students and tutors. The app helps students (users) to match a tutor according to their academic needs. The main collections in the db would be user basic info and classes, the other collection would be the tutor profiles, such as tutor’s academia record and reviews. For more detailed information, please refer to the design documents attached

Technology used

Node.js and Express.js for backend
React for frontend
MongoDB for database
Passport.js for authentication
Cloudinary API for image upload
Multer middleware for handling multi-part data (for file uploading)
Observable notebook for mock data manipulation to get tutor data

Development usage

1. Run npm install
2. Run npm run dev to run in development mode on port 5001
3. Run npm run initDB to get tutor data in your local MongoDB
4. Run npm start to run the client side React App on port 3000

Deployment link

https://tutorapp-zwr3.onrender.com/

Updated Deployment Link

https://tutormatchapp.onrender.com/

Design Document

Design Docs in the DesignDoc file and also here

Design

Color Palette

Our color palette is inspired by the blackboard, which is a dark green color. The profile page designs has lighter green hue for background. We also have orange and blue tones throughout the website, which are reflected in colors of some buttons and text.

Usability study report

Unsigned Consent Form given to users

Usability report conducted on 6 participants by Amanda and Yian collectively

Full report here

Changes made to improve accessibility and usability

1. The color contrast for the navbar was increased to ratio of 4.5:1. Originally the tabs that were not active would appear darker, however that did not pass the accessibility validator.

2. Contrast of landing page changed to have the background in a darker gradient to allow the text to pop more original:

   changed: darkend background and improved text visbility

3. The buttons on the main page will appear bigger in size when hovered to let users know they these are focused/hovered, in case color changes are not obvious.

   original navbar contrast:

   changed navbar contrast and header to be WCAG compliant: Improved contrast with navbar, and added header

4. Search results now show how many there are
   before:

   after: title shows how many search results there are

5. Card content alignment changed
   before: alignment was off and main text was centered

   after: strong alignment to the left of card

6. User can view details in "My Schedule" Per usability study, some users requested to be able to view details of their booked class. The button colors have also been adjusted to be WCAG compliant
   before:

   after: Modal of class/tutor details added for users

7. User will be asked to double confirm cancellation Per usability study, users pointed out users should be given the option to confirm their cancellation of classes when "cancel class" was clicked in "My Schedule"
   after: A pop up window will ask users to confirm

8. Sign Up and Login page
   Per usability study, users pointed out that the buttons should be replaced as a login and sign up instead of a "submit" button. Another user also pointed out the "No account" and "Already have an account" should be clickable.
   To improve accessibility, changes were made including increase color contrast of the buttons and the "No account" and "Already have an account" link.
   Before: After:

9. My profile updates
   Per usability study, users pointed out that send a message to the tutor and book a trial was misleading, so "send a message to the tutor" was removed and "book a trial" was updated to redirect to the book class link.
   To improve accessibility, font size were increased.
   Before:
   After:
   

10. Edit Profile updates
    Per usability study, users felt that they were not notified when saving the profile picture. An alert will be shown after user saves a Profile Picture.
    To improve accessibility, an h1 tag of Profile was used to distingusish the header.
    Per WCAG (Web Content Accessibility Guidelines), buttons color contrast were increased to 4.5:1.
    Before: After:

11. Account Settings
    Per WCAG (Web Content Accessibility Guidelines), color contrast were increased to 4.5:1.
    Before: After:

60% completion by Nov 15

https://github.com/yianan261/Tutor-Match-App/tree/602a17dd0e83302ea39311b539f68717950999fb

80% completion by Nov 22

https://github.com/yianan261/Tutor-Match-App/tree/a0a0bdea6f071ef2d0fe2534192e95a47d190df8

100% completion by Nov 28

https://github.com/yianan261/Tutor-Match-App/tree/33143c3ea8d385bf73fc6430d9117fab58d2287f

Design Mockup

Mockup docs here

Component Diagram

Class Link

https://johnguerra.co/classes/webDevelopment_fall_2022/

Authors

Yian Chen & So Man Amanda Au-Yeung

Website images

Google Slides

https://docs.google.com/presentation/d/1_Ht--i4RtaW4VXUX7TEaVxc8PrCrZrVgcXAEmqJYUpA/edit#slide=id.p

Updated Slides

https://docs.google.com/presentation/d/1XQjXYT5RAmvWul5nFMSSMDTBmEJw9rnNUnSKGrvS0Rk/edit?usp=sharing

Presentation Video

https://www.youtube.com/watch?v=J88GZya1jVo

References

Picture references: https://unsplash.com/ https://fontawesome.com/icons https://www.freepik.com/free-photos-vectors/people

• other references referred inside code