/scheduler

A full-stack scheduling web application built on React and WebSockets to create meetings for students and mentors to connect.

Primary LanguageJavaScript

Interview Scheduler

A real-time scheduling web application built on React to create meetings for students and mentors.

Features

Users may:

  • Book new appointments by clicking the plus icon in the schedule
  • Edit or delete an existing appointment
  • View the schedule panel to see spots remaining for every day of the week
  • Have their schedule changes automatically saved to a PostgreSQL database
  • See updates to the schedule happen in real-time (WebSocket connection)
    • NOTE: This app is hosted and changes are automatically saved. Anyone with the link may make changes to the schedule. These changes are visible to everyone viewing the application.

Screenshots

"Day list sidebar with empty schedule and add appointment buttons"

"Booking a new appointment"

"Schedule with booked appointments and edit form"

Tech Stack (server API included)

  • React
  • Axios
  • Classnames
  • Normalize
  • Storybook
  • Cypress
  • SASS
  • Socket.io
  • Node/Express (server API)

Setup

Install dependencies with npm install.

Fork and clone the development server api and follow the README for configuration and Database setup.

You will need to to run the Webpack Development Server and the Development API Server in separate terminal windows to experience the full application.

Running Webpack Development Server (scheduler) - this repo

First, install dependencies: npm install Then, while in the project root directory, start the app with:

npm start

Running the Development API Server (scheduler-api)

If you want to use the app normally:

npm start

Running the server so it returns an error when saving/deleting for testing the client's error handling capabilities:

npm run error

Running Jest Test Framework

npm test

Running Storybook Visual Testbed

npm run storybook

Package Dependencies