WaitSmart

ℹ️ This web application is constructed with Next.js, a framework you can find at Next.js which is bootstrapped with create-next-app.

This project aims to facilitate efficient queue management in various settings, such as hospitals or other establishments. Users can wait comfortably from their location and receive notifications when it's their turn. Doctors will have the ability to manage patients.

🔥 Deployed Link

This project is hosted on Vercel Platform. Visit the following link to view the web application.

https://wait-smart-chi.vercel.app/

🌐 Setup Local Environment

You need to setup a few API keys for this project to be setup correctly otherwise you won't be able to properly work on this project

For that, you need to create a .env.local file in your project, as shown in the docs. The file should look like this:

NEXT_PUBLIC_FIREBASE_API_KEY=<WRITE VALUE HERE>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<WRITE VALUE HERE>
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<WRITE VALUE HERE>
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<WRITE VALUE HERE>
NEXT_PUBLIC_FIREBASE_APP_ID=<WRITE VALUE HERE>
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=<WRITE VALUE HERE>
NEXT_PUBLIC_TWILIO_ACCOUNT_SID=<WRITE VALUE HERE>
NEXT_PUBLIC_TWILIO_AUTH_TOKEN=<WRITE VALUE HERE>
NEXT_PUBLIC_TWILIO_PHONE_NUMBER=<WRITE VALUE HERE>

You can retrieve the above environment values by referring to their documentation linked above. Once retrieved, paste them accordingly as mentioned above.

✅ Guidelines to run web app locally

For this app to work, Use these commands to run the application

# to install dependencies 
npm install

# to run the development server
npm run dev

Open http://localhost:3000 with your browser to see the application.

✨ Features

The homepage is responsive and adapts to different screen sizes
Users have the option to submit their data without the need for signing up or logging in
Doctors can efficiently manage their patients through a dynamic dashboard
Each doctor has a dedicated route with comprehensive details accessible at /doctor/:id
Server-side rendering is implemented to enhance performance and improve search engine optimization (SEO)
Firebase integration is utilized for authentication purposes
Firestore, a NoSQL database provided by Firebase, is employed for fetching and adding data.

Frameworks & Tools

📂 Codebase Structure

A quick look at the structure of the codebase.

.
|──node_modules
|──firebase.json
|──firebaseConfig.json
|──firestore.rules
|──next.config.json
|──jsconfig.json
|──.eslintrc.json
|──package-lock.json
|──package.json
|──README.md
└── components
    |───componentName
        |───componentName.js
        └───componentName.module.css
└── data
    └───files.json
└── lib
    └───firebase
        └───auth
            └───signin.js
            └───singup.js
        └───context
            └───AuthContext.js
        └───firestore
            └───addData.js
            └───getData.js
└── pages
    └───api
        └───deletePatient
            └───[patientId].js
        └───createDoctorAppointment.js
        └───createUser.js
        └───patients.js
    └───doctor
        └───[doctorId].js
    └───_app.js
    └───_document.js
    └───appointment.js
    └───homepage.js
    └───index.js
    └───login.js
    └───protected.js
    └───signup.js
└── public
    └───static
        └───Folder
            └───icons.png
        └───Folder
            └───icons.png
└── styles
    └──appointment.module.css
    └──globals.css
    └──auth.module.css
    └──doctor.module.css
    └──Home.module.css

🗄️ Database Structure

|── doctors
    └── identification number
        |── name (Doctor's id same as that from users collection)
        └── patients
            └── <patientId>
                |── firstName
                |── lastName
                |── contactNumber
                └── city