/scheduler

A React app for user to manage interviews for students made using Test driven approach using Storybook, Jest and Cypress. Heroku deployed.

Primary LanguageJavaScript

An Interview Scheduler

A REACT app made using complex data flow and API to learn/demonstrate working with full stack React App while doing project testing using multiple different platforms!

Scheduler is an app that allower a fictitious user to manage interviews between students and interviewers. User can create,edit,delete interview appointments and each day tab dynamically updates available spots as user proceeds.

This is a Full-stack, fully functional app that has been deployed on Netlify using production version on Github. Netlify will serve static client assets, and CircleCI is used to manage continuous integration process. API is served from Heroku where my database is hosted using Heroku PostGres addon.

Multiple libraries and frameworks were used/learned in making of this project.

Learning to test as project progresses has been the moto since day one. This app has been tested using all 4 programming testing ideology: unit, static, integration and end-to-end. This allowed us to learn different stages of testing and QA and understand the importance of which testing to be done under which circumstances. Some snapshots of testing can be found below.

Testing

Static

ESlint

Unit

Storybook

Integration

Jest

End-to-End

Cypress

This is how Scheduler looks.

"App "
App
"Unit Testing using Storybook"
Story Book
"Integration test overview from Jest"
Jest
"End-to-End using Cypress"
Cypress
"Continous Production Pipeline Using CircleCI"
Continous Production Pipeline Using CircleCI
"Production Flow"
Production Flow

Dependencies

  • Axios
  • babel-loader
  • 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
  • react-test-renderer
  • cypress
  • node-sass
  • prop-types
  • Webpack Dev Server

Production Deployed

  • GitHub
  • CircleCI
  • Heroku
  • Netlify

Getting Started

Setup

Install dependencies with npm install.

Running Webpack Development Server

npm start

Running Jest Test Framework

npm test

Running Storybook Visual Testbed

npm run storybook

Running Cypress

npm run cypress