A React application to work with the Google Map and Google GeoCode with Node-Js as back-end
This is a React application to show a list of map markers on a Google map. In this application users can find a Geo location by searching an address using Google Geocode api. On the server side, there is an In Memory database to save the map markers. You can use your own database infrastructure just by rewriting the repository layer.
on the root of the application run the following commands
- Run
yarnto install theconcurrentlypackage. - Run
npm run setupto install the packages for the both server side and client side applications. - Run
npm startto start the both application.
Make sure these port are free to use on your system.
- client:
http://localhost:8000 - server:
http://localhost:3030
There are test cases for Redux actions and Redux reducers in ./client/src/__tests__.
- To run the tests simply execute
npm run test.
Server side stack is Node js - Express js. There is an in memory database in the following path ./server/src/repositories/map-marker.js.
You can find the server configuration file in the following path: ./server/.env.
# Port
PORT=3030
# Debug
LOG_LEVEL='debug'
| key | Description & Values |
|---|---|
| PORT | Define a port to run the server side application |
| LOG_LEVEL | The log level to see the logs in the console. The default is debug |
| method | url | Description |
|---|---|---|
| GET | /api/mapmarker/ |
To get the list of map markers |
| GET | /api/mapmarker/:id |
To get the a particular map maker by its id |
| POST | /api/mapmarker |
To add a map marker |
| PUT | /api/mapmarker/:id |
To update a particular map marker |
| DELETE | /api/mapmarker/:id |
To delete a map marker |
In this application, there are following folders structure base on best practices:
__tests__: Contains the test for Redux action, Redux reducers and React components.actions: Contains both Redux actions and plain Fetch API call actionsassets: Contains all the global assets including images, fonts and css files.components: Contains reusable components including MegwingMap and MedwingButtonMedwing-Back-Button: A reusable back button to navigate to previous path.Medwing-Button: A reusable button to use across the application as button element.Medwing-Error-Handler: A component to catch all the exceptions which may happen inside the react components.Medwing-Loading-Indicator: A component to show a loading indicator when a view doing a long time process.Medwing-Map: A component to show a map based on Google Map api. To use other 3rd party map api just rewrite this component.Medwing-Map-Searchable: A searchable map based onMedwing-Mapwhich enables the users to find their address and see its Geo location.
constants: Contains constants of the application including Redux action-types, settings and api urls.helpers: Contains helpers methods to use globally across the project including Http-Client and Service-Error-Handler.Http-Client: A wrapper for fetch api and all the api call inside the applicationService-Error-Handler: A application wide error logger service
reducers: Contains Redux reducers.routes: Contains all the application routes.store: Contains the Redux store configurations for both production and development.types: Contains all prop types to type checking for components.views: Contains all the view in the application (UI part).marker: To add or update a map marker by searching it viaMedwing-Map-Searchable.markers-list: To view a list of map markers on the map
The configuration file for this application can be found in in the following path: ./client/app.json.
{
"url": "http://localhost:3030",
"map_api_key": "your google map",
"default_map_center_point": {
"lng": 13.4050,
"lat": 52.5200
}
}
| key | Description & Values |
|---|---|
| url | The server side url of this application - Node js |
| map_api_key | To run this application go to Google developers console and find your api key to use |
| default_map_center_point | Default center view when there is nothing selected on the map |
