ujjawalsidhpura / scheduler

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

An Interview Scheduler

https://scheduler-ujay.netlify.app/

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

Story Book

Jest

Cypress

Continous Production Pipeline Using CircleCI

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