Interview Scheduler

The client is created using Create React App while the API server is deployed using Express.

This repository contains implementation for the client application using React view library. The server-side api implementation is located here.

Screenshots

Main Page

Book/Edit Interview

Delete Interview

Dependencies

• Axios
• React v16.9.0
• React-dom v16.9.0
• React-scripts v3.4.4
• react-test-renderer v16.9.0
• Storybook v5.0.10
• Node-sass v1.53.0
• @testing-library/react v8.0.7
• @testing-library/jest-dom v4.0.0
• Babel

Getting Started

In order to run this application, you will need to have NPM installed. If you do not know what NPM is or would like to learn more about it, visit this website.

Installation

Prior to installation make sure you go into the directory where you would like scheduler to reside.

1. Clone the repo

git clone https://github.com/Vuvvy1/scheduler.git

2. Inside the scheduler directory, install all dependencies

npm install

3a. Start Webpack Development Server

npm start

3b. Start Jest Test Framework

npm test

3c. Start Storybook Visual Testbed

npm run storybook

4. Go to http://localhost:8000/ in your browser.

Usage

Once the server is running, you will be able to see and schedule interviews as a user. The following features are available upon application launch:

• Interviews can be booked between Monday and Friday wiith number of spots available for each.
• A user can book an interview in an empty appointment slot.
• Interviews are booked by typing in a student name and clicking on an interviewer from a list of available interviewers.
• A user can cancel an existing interview.
• A user can edit the details of an existing interview.
• The application makes API requests to load and persist data. We do not lose data after a browser refresh.
• When a user books or cancels an interview, all connected users see the update in their browser.

Keep in mind that this application just simulates booking interviews on pre-defined interviewers. The scheduler itself is not tied to a calendar with real-time sms notifications.

Roadmap

✔️ Create React Components for Buttons, DayItem and DayList

✔️ Create React Components for InterviewerList, InterviewerItem and Appointment

✔️ Implement Axios API requests and set States

✔️ Implement Create, Delete and Edit Interviews

✔️ Implement Spot Remaining check

✔️ Jest Unit and Integration testing

✔️ Cypress End-to-End testing