Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danekf/scheduler
Interview Scheduler project, built from LHL skeleton.
https://github.com/danekf/scheduler
Last synced: 5 days ago
JSON representation
Interview Scheduler project, built from LHL skeleton.
- Host: GitHub
- URL: https://github.com/danekf/scheduler
- Owner: danekf
- Created: 2022-08-08T18:29:34.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-08-22T21:33:31.000Z (about 2 years ago)
- Last Synced: 2023-08-08T11:11:19.466Z (over 1 year ago)
- Language: JavaScript
- Size: 1.58 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![React][React.js]][React-url]
# Interview Scheduler
Table of Contents
## About the project
This project was built with the goal of creating a working single page interview shcheduler using the React framework. The project makes api calls to a custom scheduler-api using axios to fill out current interviews.
The project is intended as an introduction to React, using states, custom hooks and various testing frameworks.
The scheduler is able to add, edit or delete current interviews and expects a user to provide a name and select an interviewer.
The scheduler will also handle errors if the api is unable to save a users interview.
Storybook is used for unit testing and to build components to be added to the interview shceduler using mock data.
Jest is used for integration testing of the scheduler, while cypress is used for a true browser test of the interview scheduler.
## Notable NPM Dependencies
- Axios data fetching from database
- React: v16.9.0
- react-Dom: v16.9.0
- Cypress: Testing
- Jest: Testing
- Storybook: Component building
- Webpack Development Server: local hosting of site for development
# Getting Started
## Get Scheduler API
Clone [Scheduler Api][API-URL] and follow the setup instructions for PostgreSQL server.
If you do not have a PostgreSQL server, you will need to install it prior to following those instructions.
## Setup Interview Scheduler
### Install dependencies
```sh
npm install --save-dev-dependencies
```
## Using Interview Scheduler
### Running Webpack Development Server
```sh
npm start
```
## Running Jest Test Framework
```sh
npm test
```
## Running Storybook Visual Testbed
```sh
npm run storybook
```
## Running Cypress
```sh
npm run cypress
```
# Roadmap
- [ ] Add user log in
- [ ] Only allow users to add, edit or delete their own interviews.
- [ ] Implement user profiles, including avatars, contact info and a list of upcoming interviews.
- [ ] Deploy server to Heroku
- [ ] Deploy Continuous integration using CircleCI and Netlify
# Screenshots
### Main page on first load.
#### This may differ as the scheduler api randomizes appointments
### Add Interview
#### Shows the screen a user is presented with when clicking on a (+) symbol to add interview
### Add Interview - Validation
#### App will validate that the user has input both a student name and selected an interviewer and present a clear error should either be missing.
#### Notice that the interviewer selected will be highlighted once selected.
### Add Interview - Completed
#### Once an interview is successfully booked, it will be added to the list. Note that the spots for Monday has been decremented by 1 upon successful booking. This is done by checking the state and is calculated dynamically rather than just adding or substracting 1. This also applies upon deletiong.
### Hover Appointment
#### By hovering over an appointment, a user will find an edit, and delete icon. The interview also slightly changes colour in response.
### Edit Appointment
#### By clicking on the edit icon, a user is able to change the student name, as well as the selected interviewer.
### Delete Appointment
#### By clicking on the delete icon, a user is presented with a confirmation to delete prior to putting in the request to the API. Once deleted, the spots remaining will update appropriately.
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/
[API-URL]:https://github.com/lighthouse-labs/scheduler-api