Interview Scheduler

At a glance

The Interview Scheduler is a React-based single-page-application for booking student interviews. Custom hooks are implemented so users can add, edit, or delete an interview, with data being synced across multiple clients in real-time via websockets. Data is persistent using PostgreSQL, and HTTP for communication. Test-Driven-Development was implemented via storybook, jest, and cypress ensuring confidence for individual components and end-to-end assurance, with a 93% code coverage.

Features

• Appointment days (Monday to Friday) are displayed and colour-coordinated depending on availability
• A user can switch between days and see detailed information
• The days show the number of slots available as a snapshot of the week
• A user can book interviews by typing in a student name and clicking on an interviewer from a list of interviewers
• Booked and available slots are clearly differentiated
• Days display currently remaining spots and capture updates after each modification
• A user can change the details of an existing interview by pressing the edit icon
• A user can cancel an existing interview, a pop-up message will ask to confirm the action before permanently - deleting an interview

Stack

Front-End: React, JSX, HTML, SCSS, JS

Back-End: Express, Axios, Node.js, PostgreSQL

Testing: Jest, Storybook, Cypress, React Testing Library

Preview via Netlify

• A quick preview can be found at the Netlify URL
• It may require going to the api URL in order to refresh the API database; in which case, wait a moment before trying the preview link again

Screenshots

The main page upon loading the application

Mobile-first development

Booking an Interview

A status message appears when saving or deleting

Error handling for things like blank name input

An example of the messaged received when failing to save

Tests cover 93% of all code

Story book is used to test react components in isolation

Cypress was used to test end-to-end systems

Setup

1. Install dependencies with npm install
2. Fork and clone the api-server
3. Run the api-server and the client concurrently

Running the Webpack Dev Server

npm start

Running Jest Test Framework

npm test

Running Storybook Visual Testbed

npm run storybook

Running Cypress End-to-End Test

npm run cypress

Dependencies

• axios
• classnames
• normalize.css
• react
• react-dom
• react-scripts