This project was bootstrapped with Create React App.
An application that helps users find the nearest health center around them. Built with React TypeScript
View the app running live here
- React TypeScript - The web library used
- Google Maps API - Used to render the Map
- Google Places API - Used to get specific places
- Firestore - NoSQL Database
- FireAth - User Authentication
- GraphQL - To fetch search from the database
- Material UI - A React UI framework
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Simply make a pull request, create a .env.local file and add the required keys from google cloud console and firebase,
a sample env file would look like this
REACT_APP_GOOGLE_MAPS_API_KEY = "YOUR_GOOGLE_MAP_API_KEY"
REACT_APP_API_KEY = "YOUR_FIREBASE_API_KEY"
REACT_APP_AUTH_DOMAIN = "YOUR_FIREBASE_AUTH_DOMAIN"
REACT_APP_DATABASE_URL = "YOUR_DATABASE_URL"
REACT_APP_PROJECT_ID = "YOUR_PROJECT_ID"
REACT_APP_STORAGE_BUCKET = "YOUR_APP_STORAGE_BUCKET"
REACT_APP_MESSAGING_SENDER_ID = "YOUR_APP_MESSAGING_SENDER_ID"
REACT_APP_APP_ID = "YOUR_APP_ID"
REACT_APP_MEASUREMENT_ID: "YOUR_APP_MEASUREMENT_ID"
REACT_APP_GRAPHQL_SERVER: "LINK TO YOUR GRAPHQL SERVER"After you have that set up, run the following command
npm i
npm run devTo run the graphql playground locally, simply run the command below; Alternatively, you can view the playground running live here
Note that you would need to get a service account key from google cloud console.
cd functions
firebase serve --only functionsTo run a basic test, simply run the command
npm t
Here are possible improvements that might be added to this application with time
- Improve the UI
- Add view images feature i.e if images for a location is available the users can view it, this will help users locate places faster
- Add real time information feature for each locations eg (if the hospital is currently opened; a contact information)
This project was created based on a coding challenge by Team Enye