A React application that allows users to create, edit and delete interview appointments. The project takes up W07D1 to W08D3 in the Lighthouse Labs web development bootcamp.
You can find a live demo of this app here. The API server deployed on Heroku sleeps when there's no web traffic in a 30-minute period, so you may need to refresh to see the appointments after navigating to the site.
- React
- Webpack, Babel
- Axios, WebSockets
- Storybook, Jest, Testing Library, Cypress
- CircleCI, Heroku, Netlify
- Start the API server following the README.
- Install dependencies using the
npm installcommand. - Start the web server using the
npm startcommand. - Webpack Dev Server will navigate you to http://localhost:8000/ in your browser.
- Development focuses on a single page application (SPA) called Interview Scheduler, built using React.
- Data is persisted by the API server using a PostgreSQL database.
- The client application communicates with an API (Stretch: WebSocket) server over HTTP, using the JSON format.
- Jest tests are used through the development of the project.
- Interviews can be booked between Monday and Friday.
- A user can switch between weekdays.
- 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 list of days informs the user how many slots are available for each day.
- The expected day updates the number of spots available when an interview is booked or canceled.
- A user is presented with a confirmation when they attempt to cancel an interview.
- A user is shown an error if an interview cannot be saved or deleted.
- A user is shown a status indicator while asynchronous operations are in progress.
- When the user presses the close button of the error they are returned to the Form or Show view (skipping Status and Confirm).
- The application makes API requests to load and persist data. We do not lose data after a browser refresh.
- (Stretch) When a user books or cancels an interview, all connected users see the update in their browser.
- Auto focus on the student name input field upon form rendering