/localization-app

Localization App, it use Google Map API to show Restaurants on the map and Firebase for Authentication and Authorization

Primary LanguageTypeScript

Localization App

Localization App, it use Google Map API to show Restaurants on the map and Firebase for Authentication and Authorization

1. Problems and findings

Problems

  • use context api on Authentication [Fixed]
  • use context api on other functions [Fixed]
  • Making Protected Routes [Fixed]
  • use state without default data [Fixed]
  • handling google map data [Fixed]
  • mapping each restaurant on google map [Fixed]
  • Make test of form submit

Findings

  • React useEffect to handle data before data loads to the DOM and after it loads
  • handling and mastering use of the state and conditional rendering
  • get data from api call and make a limit of data to retrieve
  • Google Map API and Autocomplete Features
  • Google Map Marker
  • unit testing
  • Button simulation in testing
  • checking if the component has all needed inputs,form ,button ...

2. Time Taken to Complete

  • The project took 6 hours

3. Coding style and standards

  • the coding style is used was line coding and error control and the standard of using safe ,secure and portable codes

4. Source code files

Link To Repository

5. Documentation

before starting to run the project , make sure you have Firebase account, Rapid account to get API keys and Google Map API

Requiments

install typescript

npm install -g typescript

create firebase account

create app and get the api keys

create enviroment variable called

.env.local

in .env.local add corresponding data from firebase

REACT_APP_FIREBASE_API_KEY=
REACT_APP_FIREBASE_AUTH_DOMAIN=
REACT_APP_FIREBASE_PROJECT_ID=
REACT_APP_FIREBASE_STORAGE_BUCKET=
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
REACT_APP_FIREBASE_APP_ID=
REACT_APP_GOOGLE_KEY=
REACT_RAPID_APP_API_KEY=

steps to follow installing the project

Clone the repository run

git clone https://github.com/PrinceNiyonshuti/localization-app.git

to install the packages needed for the project run

npm install

to start the project run

npm run start

6. Used resources and documentation

Resources

  • Typescript
  • React Router Dom
  • TailwindCss
  • Firebase
  • SweetAlert2
  • Concurrently
  • React-google-maps/api
  • Enzyme
  • Jest

Documentation and requirements

To Run the app use

1. npm run start

Screenshoots

Login Page

Login

Register Page

Register

Dashboard

Dashboard

Dashboard with Auto Complete

Dashboard Search

Feedback and issues

Any issue and feedback from the app don't hesitate to make an issue

Contributors


Niyonshuti Prince

Author

NIYONSHUTI Prince