Interview Scheduler

Project Description

Interview scheduler is a web application to track student interviews. It is built with React using built-in and custom hooks, SASS, Jest and Cypress for unit, integration and end-to-end testing.

Project Features

• Days and available spots are displayed on the left and are color-coded to indicate selection and availability for each day.
• A user can book an interview by typing in their name and selecting an interviewer from a list, followed by saving the appointment.
• A user is able to switch between any of the days, view the available (if any) appointment spots, book an appointment, cancel an existing appointment by pressing the trash icon, as well as edit an existing appointment with updated information such as name and interviewer by clicking the edit icon.
• When a user wants to cancel an appointment or edit an existing appointment, a confirmation box wil appear to ensure their action is verified prior to execution.

Landing Page

Booking New Interview

Cancelling An Existing Interview

Setup

Install dependencies with npm install.

Note : For full functionality of the web application, both of the client and the API server applications must run concurrently (please see below for database* setup).

Running Webpack Development Server

npm start

Running Jest Test Framework

npm test

Running Storybook Visual Testbed

npm run storybook

API server/*Database Setup

• Start by forking & cloning the scheduler-api server which can be found on GitHub here
• Follow the steps outlined in the scheduler-api README to install and setup the database, especially the instructions for resetting the database
• Once you have the database setup and the scheduler-api server is running and dependencies installed in the root directory, you can run npm start from the root directory of the project to launch the web app.

Project Stack

Front-End: JavaScript, HTML, JSX, React, Axios, SASS

Back-End: Express, Node.js, PostgreSQL

Testing: Storybook, Webpack Dev Server, Jest, Testing Library and Cypress

Dependencies

• Axios
• Babel-loader
• Classnames
• Normalize.css
• React
• React-dom
• React-scripts
• Babel/core
• Storybook/addon-actions
• Storybook/addon-backgrounds
• Storybook/addon-links
• Storybook/addons
• Storybook/react
• Testing-library/jest-dom
• Testing-library/react
• Testing-library/react-hooks
• Prop-types
• React-test-renderer
• Node-sass