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.
Interview Scheduler is pretty slick.
Large screen, initial display:
Editing an appointment:
Cancelling an appointment on a phone:
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
Interview Scheduler requires Node.js and Postgres and the following NPM packages are used:
The following NPM packages are used for development:
Install Node.js from your package manager, or download binaries (for fun) or source code (for maximum fun).
Install Postgres.
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
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
cd <project-directory>/scheduler
npm start
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
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;
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
Create client test environment file:
<project-directory>/scheduler/.env.test
REACT_APP_WEBSOCKET_URL=ws://localhost:8001
PORT=8000
CHOKIDAR_USEPOLLING=false
cd <project-directory>/scheduler
npm test
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.