Giter Club home page Giter Club logo

scheduler's Introduction

Interview Scheduler

A project built during Lighthouse Labs Immersive Web Development Bootcamp.

Development focuses on a single page application (SPA) called Interview Scheduler, built using React. It allows users to book and cancel interviews. Data is persisted by the API server using a PostgreSQL database. The client application communicates with an API server over HTTP, using the JSON format. Jest tests are used through the development of the project.

Final Product

User can browse through, create, edit, and delete appointments

User experience

Testing with Storybook Visual Testbed

Storybook Components

Jest Test Runner

Jest

End-to-End testing with Cypress

Cypress

Project Features

  • Interviews can be booked between Monday and Friday.
  • A user can switch between weekdays.
  • A user can book an interview in an empty appointment slot.
  • Interviews are booked by typing in a student name and clicking on an interviewer from a list of available interviewers.
  • A user can cancel an existing interview.
  • A user can edit the details of an existing interview.
  • The list of days informs the user how many slots are available for each day.
  • The expected day updates the number of spots available when an interview is booked or canceled.
  • A user is presented with a confirmation when they attempt to cancel an interview.
  • A user is shown an error if an interview cannot be saved or deleted.
  • A user is shown a status indicator while asynchronous operations are in progress.
  • When the user presses the close button of the error they are returned to the Form or Show view (skipping Status and Confirm).
  • The application makes API requests to load and persist data. We do not lose data after a browser refresh.

Project Stack

React, Axios, JSX, HTML, SASS, JavaScript

Express, Node.js, PostgreSQL

Testing: Storybook, Webpack Dev Server, Jest, Cypress

Dependencies

  • axios
  • classnames
  • normalize.css
  • prop-types
  • react
  • react-dom
  • react-hooks-testing-library
  • react-scripts
  • react-test-renderer
  • 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
  • babel-loader
  • cypress
  • node-sass

Setup

Install dependencies with npm install.

Running Webpack Development Server

npm start

Running Jest Test Framework

npm test
npm test -- --coverage --watchAll=false

Running Storybook Visual Testbed

npm run storybook

For Scheduler API - clone and start the server

git clone https://github.com/lighthouse-labs/scheduler-api.git

scheduler's People

Contributors

juliasut avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.