google-map-bookmark

Welcome, this React project is dependent on Ruby server services - https://github.com/gkannan1989/google-maps-bookmark-server

Google map for react with search and bookmark CRUD operation using Ruby Rails

Front End Architecture components

React - Front end

Redux + Saga + axios - State management and interacting with Ruby Rails server.

Jest + plop + Enzyme - Test Case, functional, component and snapshot based

Eslint - Tool for identifying and reporting on patterns found in ECMAScript/JavaScript code,

Styled Components - Styling components

PropTypes - properties handling

Webpack - Bundling assets.

Backend Architecture components

Rails - 6.0.0

Bundler - 2.0.2

rack-cors - 1.0.3 - Handling Cors

sqlite3 ~> 1.4 - SQL Lite for DB integration

postgresql - DB for production

Installation

Step 1: clone the repository

$ git clone https://github.com/gkannan1989/google-maps-bookmark.git

Step 2: install dependencies

$ cd path/to/google-maps-bookmark
$ npm install

Note: after installing packages you need to build dll files

$ npm run build:dll

Step 3: Add google map api key env put your google api key in .env

GOOGLE_MAP_API_KEY='PUT YOUR GOOGLE API KEY HERE'

Step 4: run the project
use bellow command to start the project.

$ npm start

Note: default port is configured as "3001"

make sure your google-maps-bookmark-server is running, then you can now paste the URL http://localhost:3001 in the launched chrome.

Build

use bellow command to export the project.

$ npm run build

Test

use bellow command to run test cases.

$ npm run generate

Docs

to see the components documentation run bellow command

$ npm run generate-docs -r app/

after generating docs, you can see them in docs directory in projects root

Live demo

Demo

Live recorded video - https://www.loom.com/share/3b3bd7eea3e34b4bb28015b4b67914e3

Features included - v1.0

1. google address suggestion - /api/search/suggestion?query=germany

2. google address locator - /api/search/suggestion?query=germany

3. address bookmark - /api/v1/bookmark

4. add bookmark history - /api/v1/bookmark

5. edit/update bookmark hitory - /api/v1/bookmark

6. delete bookmark hitory - /api/v1/bookmark

7. error handling on updating bookmark

8. not allowing user to bookmark more then once

9. user can be present with current location (if they allow location)

10. can move the user to their current location

11. by tapping bookmark user can be moved to their selected bookmarked location

12. unexpected server error handling on front-end

Guideline Questions

- How do you handle configuration values? What if those values change?

• In this project, we will have the below environment variables, which drives the entire site third party integration core.

  GOOGLE_MAP_API_KEY="<key used for rendering map on client side>" 
  SERVICE_ENDPOINT="<server endpoint>"
  SERVICE_PORT="<server port>"
  SUGGESTION_PATH="<suggestion api>"
  BOOKMARK_PATH="<bookmark api>"
  

  • ultimate goal is to change one place and keep reference everywhere(required). only change on this .env file and restart the application can do the magic :)

- What happens if we encounter an error with the third-party API integration?

• front-end will show the third party server response message(any) or fallback request(any), in some case no response then we can show default error message which configured on front-end.

- Will it also break our application, or are they handled accordingly?

• Front end is dependent on the back-end in most of the cases, but how ever it should have its own shape and quality to behave independently, in case of server unavailable scenario also we still can show the application with proper user understandable error messages.

- Now we will need to change the third-party geocoder API to another one. How can we change our current solution so that we can make this change as seamless as possible? Or how will we change (or refactor) our solution so that any future changes with the third-party integration is only done in isolation?

• There are two case, 1. server returns the data(response structure) exactly as returned by third party service, then changes only .env file to point new api do the magic :) 2. In case if server returns differnent response structure then we need to write a adaptor which will convert new server response format of data into exiting third party modal data. no code change required only .env to point new enpoint and one adaptor on front-end which can do the magic :)