Interview Scheduler

A application where an user can create, edit and delete interview appointments.
This project was built with the project boilerplate: https://github.com/lighthouse-labs/scheduler/.
The boilerplate was generated using create-react-app.

Table of Content

• Final Product
• Dependencies
• Getting Started
• File Structure

Final Product

Create appointment

A user can book an interview in an empty appointment slot.

Edit appointment

Interviews are booked by typing in a student name and clicking on an interviewer from a list of available interviewers.

Cancel appointment

A user can cancel an existing interview. A user is presented with a confirmation when they attempt to cancel an interview.

Update all clients

The client application communicates with a WebSocket server.
When a user books or cancels an interview, all connected users see the update in their browser. Number of spots are also updated.

Navigation Bar

A user can switch between weekdays.

Handle empty input(s)

A user cannot book an interview if the name is empty or no interviewer is selected.

Handling Errors

A user is shown an error if an interview cannot be saved or deleted. When the user presses the close button of the error they are returned to the Form or Show view.

Create appointment

Edit appointment

Cancel appointment

Dependencies

• React: library for building the user interface
• WebSockets: send a message to all connected clients when the data is updated
• Webpack
• Babel: convert JSX syntax
• axios: fetch data with API
• Storybook: manually test components in isolation
• webpack-dev-server: run entire application in development mode
• Jest: run unit or integration tests from the command line
• Testing Library: contains helper functions for testing (such as the render function)
• Cypress: run automated end-to-end tests in the browser
• prop-types: runtime type checking for React props

Getting Started

1. Clone this repository onto your local device.
2. Clone the server repository onto your local device, follow the instructions on its README.md.
3. Install dependencies using the npm install command.
4. Run Webpack Development Server using the npm start command.

Testing Commands

• Run Jest Test Framework using the npm test command.
• Run Storybook Visual Testbed using the npm run storybook command.
• Run Cypress with npm run cypress command.

File Structure

📦scheduler
 ┣ 📂.circleci
 ┃ ┗ 📜config.yml
 ┣ 📂.storybook
 ┃ ┣ 📜addons.js
 ┃ ┣ 📜config.js
 ┃ ┗ 📜webpack.config.js
 ┣ 📂cypress
 ┃ ┣ 📂downloads
 ┃ ┣ 📂fixtures
 ┃ ┃ ┗ 📜example.json
 ┃ ┣ 📂integration
 ┃ ┃ ┣ 📜appointments.spec.js
 ┃ ┃ ┗ 📜navigation.spec.js
 ┃ ┣ 📂plugins
 ┃ ┃ ┗ 📜index.js
 ┃ ┗ 📂support
 ┃ ┃ ┣ 📜commands.js
 ┃ ┃ ┗ 📜index.js
 ┣ 📂 docs
 ┣ 📂public
 ┃ ┣ 📂images
 ┃ ┃ ┣ 📜add.png
 ┃ ┃ ┣ 📜close.png
 ┃ ┃ ┣ 📜edit.png
 ┃ ┃ ┣ 📜lhl.png
 ┃ ┃ ┣ 📜logo.png
 ┃ ┃ ┣ 📜status.png
 ┃ ┃ ┗ 📜trash.png
 ┃ ┣ 📜favicon.ico
 ┃ ┣ 📜index.html
 ┃ ┗ 📜manifest.json
 ┣ 📂src
 ┃ ┣ 📂__mocks__
 ┃ ┃ ┗ 📜axios.js
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂Appointment
 ┃ ┃ ┃ ┣ 📜Confirm.js
 ┃ ┃ ┃ ┣ 📜Empty.js
 ┃ ┃ ┃ ┣ 📜Error.js
 ┃ ┃ ┃ ┣ 📜Form.js
 ┃ ┃ ┃ ┣ 📜Header.js
 ┃ ┃ ┃ ┣ 📜Show.js
 ┃ ┃ ┃ ┣ 📜Status.js
 ┃ ┃ ┃ ┣ 📜index.js
 ┃ ┃ ┃ ┗ 📜styles.scss
 ┃ ┃ ┣ 📂__tests__
 ┃ ┃ ┃ ┣ 📜Application.test.js
 ┃ ┃ ┃ ┣ 📜Appointment.test.js
 ┃ ┃ ┃ ┣ 📜Button.test.js
 ┃ ┃ ┃ ┣ 📜DayListItem.test.js
 ┃ ┃ ┃ ┗ 📜Form.test.js
 ┃ ┃ ┣ 📜Application.js
 ┃ ┃ ┣ 📜Application.scss
 ┃ ┃ ┣ 📜Button.js
 ┃ ┃ ┣ 📜Button.scss
 ┃ ┃ ┣ 📜DayList.js
 ┃ ┃ ┣ 📜DayListItem.js
 ┃ ┃ ┣ 📜DayListItem.scss
 ┃ ┃ ┣ 📜InterviewerList.js
 ┃ ┃ ┣ 📜InterviewerList.scss
 ┃ ┃ ┣ 📜InterviewerListItem.js
 ┃ ┃ ┗ 📜InterviewerListItem.scss
 ┃ ┣ 📂helpers
 ┃ ┃ ┣ 📜selectors.js
 ┃ ┃ ┗ 📜selectors.test.js
 ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📂__tests__
 ┃ ┃ ┃ ┗ 📜useVisualMode.test.js
 ┃ ┃ ┣ 📜useApplicationData.js
 ┃ ┃ ┣ 📜useFormData.js
 ┃ ┃ ┗ 📜useVisualMode.js
 ┃ ┣ 📂styles
 ┃ ┃ ┣ 📜animations.scss
 ┃ ┃ ┣ 📜mixins.scss
 ┃ ┃ ┣ 📜reset.scss
 ┃ ┃ ┣ 📜typography.scss
 ┃ ┃ ┗ 📜variables.scss
 ┃ ┣ 📜index.js
 ┃ ┣ 📜index.scss
 ┃ ┗ 📜setupTests.js
 ┣ 📂stories
 ┃ ┗ 📜index.js
 ┣ 📜.gitignore
 ┣ 📜README.md
 ┣ 📜cypress.json
 ┣ 📜netlify.toml
 ┗ 📜package.json

📂.circleci

Contains the configuration file for CircleCI to manage continuous integration process.

📂cypress

Contains the fixture and integration tests for Cypress.

📂 docs

Store images that are displayed in this README document. These images are not included on the diagram above.

📂public

Contains index.html (react components are rendered on this file), the favicon and other images for the web app.

📂src

📂__mocks__

Contains axios.js for mocking axios library in Cypress test.

📂components

Contains react components, style sheets (scss files) and unit tests for components (Jest).

📂helpers

Contains helper functions and their unit tests (Jest).

📂hooks

Contains hooks and their unit tests (Jest).

📂styles

Contains style sheets (scss files).

📜index.js

This file renders react components onto index.html.

📜 .gitignore

This file is to ignore certain files so they are not pushed to github.

📂stories

Contains the test for Storybook.

📜 README.md

This document that you are reading.

📜cypress.json

Configure the Cypress application.

📜netlify.toml

Configuration file for deploying the Client to Netlify.

📜 package.json

This file contains:

• the list of dependencies (node libraries that the executable code (and development code) needs)
• dev-dependencies: node libraries only needed by development tools
• scripts: Define the in-project shortcut commands