This project was bootstrapped with Create React App.

Hospital Finder

An application that helps users find the nearest health center around them. Built with React TypeScript
View the app running live here

Screenshots

Tech/framework used

• 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

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Development setup

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 dev

Graphql Playground

To 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 functions

Testing

To run a basic test, simply run the command

npm t

Additional Features

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)

Acknowledgments

This project was created based on a coding challenge by Team Enye