Front End Structure

This is an overview of the front end structure of the folders. To navigate to this folder go to 'cd /TutorBase/client/src/components '

(NOTE THAT AS OF SPRING 2021 THIS PROJECT USES TYPESCRIPT!)

clientFlow

This folder is for the booking process. All information are initiated with FormParent and in each following step the booking data will be selected by the client.

• 1_subject.tsx
  • step1: selects the subject of the class (ex. CSCI, MATH)
• 2_class.tsx
  • step2: selcts the class from pool of class
• 3_selectTutor.tsx
  • step3: selects from the tutors available for that class
• 4_selectDateTime.tsx
  • step4: selects the date and time the client want to be tutored from the tutor's available time.
  • uses toast UI (mobile friendly)
• 5_reserve.tsx
  • step5: submits the meeting using the toast UI calendar function.
  • used submit.js under toast folder.

dashboard

This is the dashboard - the page the user enters when they first log in. There are two types of dashboards - a client one and a tutor one. When each user registers they automatically have both of these and can switch freely.

• containers/DashboardPage/client
  • clientDashboard.js
  • Panel.js
  • Sidebar.js
• containers/DashboardPage/tutor
  • TutorDashboard.js
  • Panel.js
  • Sidebar.js

tutorCard

( SEE CODE )

Meetings

• meetings.js
• MeetingCard.js

Client Meetings Dashboard

This is a portion/tab of the dashboard present for both clients and tutors. It displays a scrolling page of card components full of meeting information representing a meeting between a tutor and a client. The meeting class has a redux state implemented that holds and gathers appointment details from our backend to be represented as these card components. The state is made up of an array of appointment objects that are mapped to the meeting cards.

Meetings Card

The meeting cards are individual card components that are shown on the client meetings tab. Each card represents and displays info from one appointment object that is passed in from the meetings dashboard state. The meeting card has four identities that represent the state of the appointment, either upcoming (blue), completed (green), pending(orange), or denied(red). The card where built to expand on click to display more meeting information. The cards that were identified as "pending" had a check or 'x' button to be displayed to tutor users where they can either accept the appointment (changing it to upcoming) or reject the appointment (changing it to be denied)

Login

( SEE CODE )

login screen

signup

( SEE CODE )

sign up screen (through RPI CAS system)