Interview Scheduler

🔗 Interview Scheduler

The interview Scheduler app assists students by tracking upcoming interviews. Utilizing React for the front end and a Postgres database for the back end, this SPA (single page application) enables users to book, edit, and cancel scheduled interviews in real-time. The client and server apps communicate over HTTP using Axios requests. Also, best practices of Test Driven Development were followed during the building of all the app's components. Testing frameworks used during this project were Jest, Storybooks, and Cypress to enable unit, integration, and End-2-End (E2E) testing.

🔗 Scheduler API Repo

Table of Content

• 🔗 Interview Scheduler
• Table of Content
• 🌟 Features
• 🚀 Getting Started
  • Setup
  • Run App
• 🧱 Main Structure
• 📦 Tech Stack (Dependencies)
  • 🔨 Dependencies
  • 🧰 Development Dependencies
• ⚠️ Disclaimer

🌟 Features

• A student can select a day and view the number of interview spots available for that day.
• A student can add, edit, and delete interviews.
• A student can select or change an interviewer.

🚀 Getting Started

Setup App

1. Fork repository.
2. Clone Repository to local machine.
3. Install all dependencies using the npm install command.
4. Fork and clone the scheduler-api repository from here.
5. In terminal run the startpostgres command to start the PostgreSQL server.
6. Follow the README.md instructions from scheduler-api to setup and seed the scheduler_development database.

***To run cypress you will also need to create the scheduler_test database *and install X-server(for WSL users only):

1. In a new terminal window cd scheduler-api then run psql -U development -d scheduler_test.
2. Login using the same info from scheduler-api README.md.
3. Next duplicate the .env.development file and rename it .env.test. In the new file, change only the PGDATABASE value to scheduler_test.
4. Now run the test server using this command NODE_ENV=test npm start once ready open the browser and go to localhost:8001.
5. Then seed the database by inserting the following url in the browser http://localhost:8001/api/debug/reset or clicking here.
6. Download and install X-server VcXSrv
7. Download the configuration file here and copy it to your desktop. You will be using this file to run VcXSrv.

Run App

cd scheduler-api

• Running Scheduler Development Database npm start
• Running Scheduler Test Database NODE_ENV=test npm start

cd scheduler

• Running Webpack Development Server npm start
• Running Jest Test Framework npm test
• Running Storybook Visual Testbed npm run storybook
• Running Cypress Test Framework npm run cypress

🧱 Main Structure

├─── .storybook                
├─── cypress                  # cypress end to end testing
│  ├─── fixtures             
│  ├─── integration
│  ├─── plugins
│  ├─── support
├─── public                   # contains static files such as images
│  ├─── images
├─── src
│  ├─── _mocks_               # mock data
│  ├─── components            # react components
│  ├─── helpers               # all helper functions to manage interviews
│  ├─── hooks                 # custom react hooks
│  ├─── styles                # sass style sheets
├─── stories                  # contains all the tests for storybook
├─── .env.development
├─── .eslintrc.json
├─── .gitignore
├─── README.md
├─── cypress.json
├─── jsconfig.json
├─── package-lock.json
└─── package.json

📦 Tech Stack (Dependencies)

🔨 Dependencies

• Axios
• Classnames
• Normalize.css
• React **(V^16.9.0)
• React-Dom
• React-Scripts

🧰 Development Dependencies

• @babel/core
• @storybook/addon-actions
• @storybook/addon-backgrounds
• @storybook/addon-links
• @storybook/addons
• @storybook/react
• @testing-library/jest-dom
• @testing-library/react
• @testing-library/react-hooks
• Babel-Loader
• Prop-Types
• React-Test-Renderer
• Sass

⚠️ Disclaimer

• This is a project for LHL web development bootcamp and is not meant for production use.