/PitangFrontend

Pitang final project to Register and Schedule Vaccination Appointment(s)

Primary LanguageJavaScriptMIT LicenseMIT

Pitang Trainee Program

Pitang's final project that aims to create a React and Node.js application to schedule vaccine appointments (Covid-19) and to visualize all the already scheduled appointments grouped by date and time.

How to run this project:

  1. Download the files or clone this repository

  2. Run yarn install or simply yarn in the terminal to install all dependencies listed within package.json

  3. Create a .env file in the project's root directory and insert the following configurations:

  4. Execute the Backend

  5. Run yarn start to execute the React App (The application runs on http://localhost:3000)

Some Dependencies (Frontend)

  • axios: 0.26.1
  • bootstrap: 5.1.3
  • date-fns: 2.28.0
  • formik: 2.2.9
  • react-bootstrap: 2.2.3
  • react-datepicker: 4.7.0
  • react-icons: 4.3.1
  • react-router-dom: 6.3.0
  • react-toastify: 8.2.0
  • yup: 0.32.11

Challenge Description

Rules of use:

  • Scheduling must be done on one page using a form.
  • Maximum of 20 appointments per day.
  • Maximum of 2 appointments for the same hour.
  • A page must be created to consult the appointments.
  • The result of the appointments must be grouped by day and time.
  • The time interval between one appointment and another is 1 hour.

Business rules:

  • The patient must inform his name, date of birth and day and time of the appointment.
  • It must be checked if the form has been filled out.
  • Patient data/schedules must be stored in memory.
  • Within the page to consult the schedules, it must be possible to view the list of appointments and inform if the patient was seen or not, and what was the conclusion of the appointment.
  • When user press F5 or reload the page the data cannot be lost.

Execution Rules:

  1. Portal written in React (use react-datepicker to manage dates).
  2. Build a Node API to receive data from the portal.
  3. Axios as http client.
  4. Use Formik to validate the data in the view.
  5. IDE is your choice.

Demonstration:

Home page

home.mp4

Appointments page

appointments.mp4

Additional information:


© Developed by Anne Livia