Table of contents

Dental clinic app

It's a responsive web application made by Rubén Fernández and Jarki Melendez for appointments administration.

Made with:

  • React 17
  • NodeJs with express
  • MySQL with sequelize

Configuration

  • Backend: Download and install the backend repo

  • Dependencies: Clone this repository and on root folder run command:

      npm install
    

By default the react server will run on port 3000

Run

On root folder run:

    npm start

A new browser tab should open with http://localhost:3000/

You can now use the app

Project folder structure

            ├───public
            └───src
            ├───components
            │   ├───alertPopUp
            │   ├───appointmentCard
            │   ├───appointmentMessage
            │   ├───covid
            │   ├───dashboardCard
            │   ├───footer
            │   ├───homeCard
            │   ├───loginMessage
            │   ├───logo
            │   ├───navbar
            │   ├───searchInput
            │   └───signupMessage
            ├───containers
            │   ├───contact
            │   ├───dashboard
            │   ├───home
            │   ├───login
            │   ├───newAppointment
            │   ├───signup
            │   └───viewAppointments
            ├───img
            └───services

Demo

React App - Personal - Microsoft_ Edge 2021-04-22 20-28-56

ezgif com-gif-maker

ezgif com-gif-maker (1)

Features

  • Homepage with fictional treatments offered by the clinic

screenshot_home

localhost_3000_

  • Signup page

screenshot_signup

  • Login page

screenshot_login

  • Client users will be redirected to a dashboard once logged in and they can see their upcoming appointments info

screenshot_dashboard

  • If the logged user is an Admin, it will be redirected to a view of pending appointments instead

localhost_3000_view-appointments

  • Admin can cancel pending appointments

screenshot_

  • Admin can also create new appointments. Originally the backend didn't show users or doctors list, so the admin must know the IDs of users and doctors to create appointments

screenshot_appointment_2

Authors

Rubén Fernández

Jarki Melendez

TOP