Demo | full-stack, react, google maps, firebase, coding task

Build tests

Create, edit, delete, view map locations with react and google maps API.



e2e test preview (userflow - User adds new location)


Install Node.js, Git and then:

git clone react-map-app
cd react-map-app
yarn install
yarn start

Note: You have to set google map api key.

// Replace gMapKey with your own key
// src/Map/GoogleMapWrapper.js
const gMapKey = `${process.env.REACT_APP_GOOGLE_MAP_API}`;


You need to have open instance of application at localhost:3000 before using cypress. Run yarn start and then on another terminal instance run:

yarn cy:open

End-to-End tests with cypress simulate realistic user interaction with the application. There are no stubs but real request to backend (Firebase) and Map API. Please play around sparingly


  • Create, view, edit, delete map locations (React.js)
  • Validate user input (getFieldDecorator, regex)
  • View (synced) map locations with Google map api (React.js, react-google-maps)
  • Save/load map locations to/from a backend api (axios, firebase)


react map app arc
React-map-app architecture

  • Design Considerations: Scalability, Portability, Maintainability
  • UI: ant-design and vanilla css (flexbox layout)
  • Module-based folder structure and path-based component naming
  • Local state management (React.js)
  • Type checking (prop-types)
  • Integration, End to end(E2E) tests (
  • Management with automated Kanban (github project)
  • Continuous Deployment (Netlify CD)
  • Continuous Integration (Travis CI)
  • Automated versioning (semantic-release)
  • Monitor bundle - report: wba-report.html (webpack-bundle-analyzer)
  • Unit, integration tests (jest, react-testing-library, wallaby)
  • Fallback for no 3rd party map api
  • Fallback/alternative map api (mapbox)
  • Fallback/alternative backend api (express.js)


The application was designed without tight coupling to backend or map APIs. Further information about switching backend or/and map APIs follows below.


Any REST api is compatible with this application. Steps to use another API:

  1. Create a new axios instance at src/axios.js with your configuration (baseURL, headers config)
  2. Replace the GET request at componentDidMount() and the PUT request putToFirebase() method of the MapScreen component (src/Map/Screen.js) using the new axios instance.

3rd-party Map API

To change from google-maps to another 3rd-party MAP API follow the steps:

  1. Create a new react-component to handle the rendering of the map based the new 3rd-party MAP API.
  2. Replace <GoogleMapWrapper/> and <Marker/> references at the MapScreen (src/Map/Screen.js) component
class MapScreen extends React.Component {
const dataToMarkers =, i) => (
       position={{ lat:, lng: item.lon }}
return (
     <div className={`flexContainer margin-1`}>
       {/*** MAP COMPONENT ***/}
       <div className="flexItem">
         {this.state.gMapError ? (
           `GoogleMapAPI error - put fallback component here`
         ) : (


Please open an issue for support.

Andreas Teneketzoglou

Andreas Teneketzoglou
Front end web developer | Electrical & computer engineer

  • Andreas Teneketzoglou 2018 -
  • Powered by Gatsby.js -
  • Delivery by Netlify