dialop / scheduler

The Interview Scheduler is a responsive single-page web app designed using React for scheduling interview appointments. It does not include user account management but manages scheduling information in a database and updates schedules for multiple users through WebSockets.

Interview Scheduler

The Interview Scheduler is a responsive single-page web app designed using React for scheduling interview appointments. It does not include user account management but manages scheduling information in a database and updates schedules for multiple users through 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.

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

Screenshots

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

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

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.