https://github.com/sangamprashant/drdoc_client

College Projecrt auth with face .... working....
https://github.com/sangamprashant/drdoc_client

document-scanner face-authentication face-recognition flask flask-application mern mern-stack python scanner webdevelopment website

Last synced: about 1 month ago
JSON representation

College Projecrt auth with face .... working....

• Host: GitHub
• URL: https://github.com/sangamprashant/drdoc_client
• Owner: sangamprashant
• Created: 2023-11-29T15:56:57.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-16T17:02:31.000Z (7 months ago)
• Last Synced: 2024-05-17T04:51:06.470Z (7 months ago)
• Topics: document-scanner, face-authentication, face-recognition, flask, flask-application, mern, mern-stack, python, scanner, webdevelopment, website
• Language: JavaScript
• Homepage:
• Size: 20.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Welcome to DR.DOC

DR.DOC is an innovative medical application designed to streamline the process of medical prescription management while enhancing doctor-client interactions. With a focus on user convenience and security, DR.DOC offers a range of features including facial recognition-based authentication, webcam scanning for rapid document uploads, and seamless communication channels between clients, doctors, and administrators.

## Key Features

- **Facial Recognition Authentication**: Users can register and log in using facial recognition technology, ensuring secure and convenient access to the platform.

- **Medical Prescription Management**: Easily upload and manage medical prescriptions with the integrated scanner, allowing for quick document capture from a webcam.

- **Doctor Application and Validation**: Clients can apply to become doctors, with admin validation to maintain credibility. Approved doctors gain permission to add documents/prescriptions to client profiles.

- **Doctor-Client Interaction**: Clients can search for and add doctors to their list of "My Doctors," facilitating direct communication and document sharing between medical professionals and clients.

- **Chat System**: The app features a built-in chat system where doctors and admins can communicate efficiently, enhancing collaboration and support.

- **Contact Form**: The homepage includes a contact form for users to reach out to administrators, enabling easy communication for queries, feedback, or support requests.

## Technology Stack

##### Frontend (Client Side)

- **React.js**: A popular JavaScript library for building user interfaces.

- **HTML/CSS**: Markup and styling languages for structuring and presenting content.

##### Backend (Server Side)

- **Express.js**: A web application framework for Node.js, providing robust features for building APIs and handling HTTP requests.

- **Flask**: A lightweight Python web framework for building web applications and APIs.

##### Database

- **Firebase Realtime Database**: A NoSQL cloud-hosted database provided by Google Firebase, offering real-time synchronization and offline support.

- **MongoDB**: A document-oriented NoSQL database used for storing structured data in JSON-like documents.

##### Authentication

- **Facial Recognition**: Utilizes face recognition algorithms and libraries for biometric authentication.

##### Other Tools and Libraries

- **React Router**: A routing library for React applications, enabling navigation and routing between different components.

- **Axios**: A promise-based HTTP client for making asynchronous HTTP requests to the server.

- **React Toastify**: A React library for displaying customizable toast notifications.

- **Face-API.js**: JavaScript API for face detection and recognition in the browser.

## Environment Variables

- For express server in `:root/server/Express/.env`

  - **PORT**: defint a port for express server

  - **MONGO_URL**: MongoDB connection string.

  - **MONGO_DATABASE**: MongoDB database name

  - **AUTH_SECRET**: Secret key for JSON Web Token authentication.

  - **EMAIL**: Username for sending emails (if using Nodemailer).

  - **EMAIL_PASSWORD**: Password for sending emails (if using Nodemailer).

  - **PUBLIC_DOMAIN**: Public hosted domain of the site (in development use localhost:3000 || port)

- For python server in `:root/server/Python/.env`

  - **MONGO_URL**: MongoDB connection string.

  - **MONGO_DATABASE**: MongoDB database name

  - **AUTH_SECRET**: Secret key for JSON Web Token authentication.

  - **EXPRESS_SERVER**: Express server link

- For client in `:root/client/.env`

  - **REACT_APP_DATABASE_API**: Base URL of the express server.

  - **REACT_APP_PYTHON_SERVER_API**: Base URL of the python server.

  - **REACT_APP_FIREBASE_API_KEY**: Firebase API key.

  - **REACT_APP_FIREBASE_AUTH_DOMAIN**: Firebase authentication domain.

  - **REACT_APP_FIREBASE_PROJECT_IDA**: Firebase project ID.

  - **REACT_APP_FIREBASE_STORAGE_BUCKET**: Firebase storage bucket.

  - **REACT_APP_FIREBASE_MESSAGING_SENDER_ID**: Firebase messaging sender ID.

  - **REACT_APP_FIREBASE_APP_ID**: Firebase application ID.

- For admin-doctor in `:root/admin-doctor/.env`

  - **REACT_APP_MY_KEY**: Base URL of the express server.

  - **REACT_APP_PYTHON_SERVER_API**: Base URL of the python server.

  - **REACT_APP_FIREBASE_API_KEY**: Firebase API key.

  - **REACT_APP_FIREBASE_AUTH_DOMAIN**: Firebase authentication domain.

  - **REACT_APP_FIREBASE_PROJECT_IDA**: Firebase project ID.

  - **REACT_APP_FIREBASE_STORAGE_BUCKET**: Firebase storage bucket.

  - **REACT_APP_FIREBASE_MESSAGING_SENDER_ID**: Firebase messaging sender ID.

  - **REACT_APP_FIREBASE_APP_ID**: Firebase application ID.

## Installation

1. Clone the Repository:

```

git clone https://github.com/sangamprashant/DrDoc_Client.git

```

2. Navigate to Project Directory

```

cd DrDoc_Client

```

3. Install Dependencies

- client

  ```

  cd client

  npm install

  ```

  Start Frontend Server (React.js)

  ```

  npm start

  ```

  go back to :root folder

  ```

  cd ..

  ```

- admin-doctor

  ```

  cd admin-doctor

  npm install

  ```

  Start Frontend Server (React.js)

  ```

  npm start

  ```

  go back to :root folder

  ```

  cd ..

  ```

- Express server

  ```

  cd server/Express

  npm install

  ```

  Start Express Server

  ```

  nodemon index

  ```

  Go back to :root/server folder

  ```

  cd ..

  ```

- Python server

  ```

  cd Python

  ```

  Create a virtual environment named `venv` using the following command

  ```

  python -m venv venv

  ```

  Activate the virtual environment based on your operating system

  - Windows

    ```

    venv\Scripts\activate

    ```

  - Unix or MacOS

    ```

     source venv/bin/activate

    ```

    Install Dependencies from requirements.txt

  ```

  pip install -r requirements.txt

  ```

  Verify Installation

  ```

  pip list

  ```

  Start Flask Server:

  ```

  python main.py

  ```

## Learnings from DR.DOC Project

1. **Facial Recognition Integration**: Implementing facial recognition technology for user authentication provided valuable insights into biometric security measures. Understanding the concepts and challenges of facial recognition helped in creating a secure and user-friendly authentication system.

2. **Real-time Communication**: Developing a chat system within the application enhanced my understanding of real-time communication protocols and WebSocket technology. Learning to handle real-time data exchange efficiently between clients and servers was a significant learning experience.

3. **Medical Data Management**: Managing medical prescriptions and documents required careful consideration of data security and privacy regulations. Handling sensitive medical information helped in understanding the importance of data encryption and compliance with healthcare standards.

4. **User Experience Design**: Designing a user-friendly interface with intuitive navigation and clear information architecture improved my skills in user experience (UX) design. Considering user feedback and iterating on design choices helped in creating a more engaging and accessible application.

5. **Full-stack Development**: Working on both frontend and backend components of the application provided valuable insights into full-stack development. Understanding the interactions between frontend user interfaces and backend server logic was crucial for building a seamless user experience.

6. **Team Collaboration**: Collaborating with team members on different aspects of the project improved my communication and teamwork skills. Working together to address challenges and solve problems effectively contributed to the success of the project.

7. **Deployment and DevOps**: Deploying the application on cloud platforms and managing server infrastructure provided practical experience in deployment automation and DevOps practices. Learning to use tools for continuous integration and deployment enhanced my skills in software delivery and deployment pipelines.

8. **Error Handling and Debugging**: Dealing with errors and debugging issues in both frontend and backend code improved my problem-solving abilities. Learning to troubleshoot and resolve issues efficiently was essential for maintaining the reliability and performance of the application.

## Images

### Client Pages

- home

  

- login

  

- register

  

- profile

  

- pending document

  

- upload document

  

- profile information

  

- edit profile

  

- contact

  

- account switching

  

- scanner

  


    

    

  


- search

  


    

    

  


- change password