- Overview
- Features
- Technologies Used
- Setup and Installation
- Setting Up Google Cloud Platform (GCP)
- Running the Application
- Usage
- Contributing
- License
The Vital Web App is a full-stack application designed to help users manage their health by providing personalized advice based on their age, gender, allergies, and health problems. Users can input their data, receive detailed prompts and responses, and view their history of interactions in a dashboard. The application also features Google Maps integration to show nearby hospitals based on the user's location.
- User authentication with Google using NextAuth
- User-specific storage of prompts and responses in MongoDB
- Dashboard to view historical prompts and responses
- Google Maps integration to display nearby hospitals
- Responsive design using Tailwind CSS
- Frontend: React, Next.js, Tailwind CSS
- Backend: Flask, Python
- Database: MongoDB
- Authentication: NextAuth.js with Google provider
- Hosting: Render (Backend), Vercel (Frontend)
- Response Generation & AI Chatbot: Google Gemini API
- Maps: Google Maps API
- Node.js and npm
- Python 3.x
- MongoDB
- Google Cloud Platform account for Maps & Gemini API
- Render & Vercel account
- Clone the repository:
git clone https://github.com/your-username/vital-web-app.git cd vital-web-app
- Setup the frontend:
cd client npm install
- Setup the backend:
cd ../server python -m venv venv source venv/bin/activate # On Windows use `venv\Scripts\activate` pip install -r requirements.txt
- Environment Variables:
- Create a
.env
file in theserver
directory and add your MongoDB connection string (asMONGODB_URI
) and Google API Key (asGOOGLE_API_KEY
) for Gemini usage. - Create a
.env
file in theclient
directory and add your NextAuth Keys (for Google Auth asGOOGLE_CLIENT_SECRET
andGOOGLE_CLIENT_ID
) and Google API Key (asGOOGLE_API_KEY
) for Google Maps API and AI Chatbot.
- Go to the GCP Console: https://console.cloud.google.com/
- Create a new project or select an existing project.
- Navigate to APIs & Services > OAuth consent screen
- Configure the consent screen:
- Choose
External
for user type. - Fill in the required fields (app name, user support email, etc.).
- Add your email to the
Test users
section. - Save and continue.
- Choose
- Navigate to API & Services > Credentials.
- Click Create Credentials and choose
OAuth 2.0 Client IDs
. - Configure the OAuth consent screen if prompted.
- Setup the OAuth 2.0 Client ID:
- Choose
Web application
. - Add
Authorized redirect URIs
(e.g.,http://localhost:3000/api/auth/callback/google
). - Save the credentials and note down the
Client ID
andClient Secret
.
- Choose
- Navigate to APIs & Services > Library.
- Enable the following APIs:
- Maps JavaScript API
- Places API
- Navigate to Credentials and create an API key:
- Click on generated API key and note it down.
- (Optional) Restrict the API key to only allow requests from your domains by clicking
Restrict Key
and setting up the restrictions.
- Creating a Map ID:
- Navigate to the Google Maps Platform and select
Maps
in the left-hand menu. - Click on
Map Management
and thenCreate a New Map
. - Configure your map setting and save.
- Copy the
Map ID
provided and note it down.
- Navigate to the Google Maps Platform and select
- Go to Google AI Studio https://ai.google.dev
- Go to Gemini API and click on Get API key in Google AI Studio.
- Click on the Get API key and then click on Create API key.
- Create a new project or select an existing one.
- After selecting the project, select Create API key in existing project.
- Note down the API key.
Add the following environment variables to your .env
file in the client
directory:
GOOGLE_CLIENT_ID = your-google-client-id
GOOGLE_CLIENT_SECRET = your-google-client-secret
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY = your-google-maps-api-key
NEXT_PUBLIC_MAP_ID = your-google-map-id
Add the following environment variables to your .env
file in the server
directory:
MONGODB_URI = your-mongodb-uri
GOOGLE_API_KEY = your-google-api-key
- Navigate to the
server
directory:
cd server
- Run the Flask server:
python app.py
- Navigate to the
client
directory:
cd client
- Run the Next Application:
npm run dev
- Access the application from your hosted URL.
- Sign in with Google to authenticate.
- Input your details (age, gender, allergies, and health problems.)
- View your personalized health advice.
- Access the dashboard to view your history.
- Find nearby hospitals using the integrated Google Maps feature.
- Interact with the AI Chatbot by Google Gemini API for health-related queries.
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch
). - Make your changes/
- Commit your changes (
git commit -m 'add some feature'
). - Push to the branch (
git push origin feature-branch
). - Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.