benjamin0203/scheduler-1

LHL project: This interview scheduler project focused on React and Test Driven Development using Jest and Cypress.

Interview Scheduler

Interview Scheduler is what its name suggests: a simple interview appointment scheduling tool. It is a demonstration of responsive, single-page web app design using React that is suitable for use on any device. It does not include user account management, but stores schedule information in a database and updates the schedule for concurrent users via WebSockets.

Technologies used include React, SASS, WebPack, Babel, Axios client-side, Node.js, Express, WebSockets, Postgres server-side, and Storybook, Testing Library, WebPack Dev Server, Jest, and Cypress for development and testing.

An online demonstration is available at https://scheduler.ml. The server is deployed on Heroku, while continuous integration is used to automatically deploy the client to production on Github via CircleCI, with Netlify managing hosting. Note that loading the initial schedule may take several seconds as the app is hosted on a free Heroku account that sleeps after being idle for 30 minutes. It is otherwise highly responsive once running.

Interview Scheduler is not suitable for real-world production use and is only for demonstration and educational purposes.

Screenshots

Interview Scheduler is pretty slick.

Large screen, initial display:

Editing an appointment:

Cancelling an appointment on a phone:

Table of Contents

• Development
  • Directory Structure
  • Dependencies
  • Development Dependencies
  • Support Setup
  • Database/API Server Setup
  • Client Setup
  • Running Webpack Development Server
  • Running Storybook Visual Testbed
• Testing
  • Database Setup
  • API Server Setup
  • Client Setup
  • Running Jest Test Framework
  • Running Cypress Test Framework

Development

Directory Structure

The project directory is arranged as follows:

./                 Main project repository
./docs             Project documentation
./public           Static files served to the client, including manifest.json
./public/images    Static images used on the site
./src              Project source code
./src/__mocks__    Axios mocks
./src/components   React components
./src/hooks        React hooks
./src/helpers      Helper functions
./src/reducers     Application reducer function
./src/styles       SASS styles
./cypress          Cypress testing fixtures and tests, etc
./stories          Storybook component stories

Do not edit or push to repo:

./node_modules     Node.js packages
./coverage         Jest code coverage results

Dependencies

Interview Scheduler requires Node.js and Postgres and the following NPM packages are used:

• react
• react-dom
• react-scripts
• axios
• classnames
• normalize.css

Development Dependencies

The following NPM packages are used for development:

• react-test-renderer
• prop-types
• node-sass
• cypress
• eslint-plugin-cypress

Support Setup

Install Node.js from your package manager, or download binaries (for fun) or source code (for maximum fun).

Install Postgres.

Database/API Server Setup

Execute the following to set up Interview Scheduler API server:

cd <project-directory>
git clone https://github.com/d0ugr/scheduler-api
cd scheduler-api
npm install

Log into Postgres as a user with superuser privileges. For example:

sudo -u postgres psql

Execute the following to set up the development database and populate it with data:

CREATE USER scheduler_development WITH NOSUPERUSER PASSWORD 'development';
CREATE DATABASE scheduler_devlopment OWNER scheduler_development;
GRANT ALL ON DATABASE scheduler_devlopment TO scheduler_development;
\c scheduler_development
\i src/db/schema/create.sql
\i src/db/schema/development.sql
-- Use this to verify the data:
SELECT * FROM days JOIN appointments ON appointments.day_id = days.id;

Create the file <project-directory>/scheduler-api/.env.development with the following:

PGHOST=localhost
PGUSER=scheduler_development
PGDATABASE=scheduler_development
PGPASSWORD=development
PGPORT=5432

Client Setup

Execute the following to set up Interview Scheduler:

cd <project-directory>
git clone https://github.com/d0ugr/scheduler
cd scheduler
npm install

Create the file <project-directory>/scheduler/.env.development with the following:

REACT_APP_WEBSOCKET_URL=ws://localhost:8001
PORT=8000
CHOKIDAR_USEPOLLING=false

Running Webpack Development Server

cd <project-directory>/scheduler
npm start

Running Storybook Visual Testbed

Storybook is excellent for testing React components in isolation from the rest of the application for development or testing.

cd <project-directory>/scheduler
npm run storybook

Testing

Database Setup

Log into Postgres as a user with superuser privileges. For example:

sudo -u postgres psql

Execute the following to set up the test database and populate it with data:

CREATE USER scheduler_test WITH NOSUPERUSER PASSWORD 'test';
CREATE DATABASE scheduler_test OWNER scheduler_test;
GRANT ALL ON DATABASE scheduler_test TO scheduler_test;
\c scheduler_test
\i src/db/schema/create.sql
\i src/db/schema/test.sql
-- Use this to verify the data:
SELECT * FROM days JOIN appointments ON appointments.day_id = days.id;

API Server Setup

Create API server test environment file:

<project-directory>/scheduler-api/.env.test

PGHOST=localhost
PGUSER=scheduler_test
PGDATABASE=scheduler_test
PGPASSWORD=test
PGPORT=5432

Run the API server in test mode:

cd <project-directory>/scheduler-api
npm run test:server

Client Setup

Create client test environment file:

<project-directory>/scheduler/.env.test

REACT_APP_WEBSOCKET_URL=ws://localhost:8001
PORT=8000
CHOKIDAR_USEPOLLING=false

Running Jest Test Framework

cd <project-directory>/scheduler
npm test

Running Cypress Test Framework

Make sure you're running the API server in test mode with the appropriate data.

cd <project-directory>/scheduler
npm run cypress

Click "Run all specs" or select individual specs from the Tests pane in the Cypress window.