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

• Firebase Services Key
• Twilio API Key

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

---

💻 Glimpse of the Web Application

Landing Page

Exciting Features

Tech Stack

FAQs

Dashboard

Project Management

---

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.