pixelomo/mapbook

Easily add and view your addressbook contacts

MapBook

With MapBook you can easily add and view your addressbook contacts. Simply type an address into the search bar and autocomplete will suggest the best match. Click on the suggestion or hit 'Enter' and it will be added to your addressbook. Now a form will pop up and ask for your contacts name and any notes you might want to add to remind you about them. Adding a name is required, only add notes if you want to. You can also click anywhere on the map and add a new contact that way.

On the right side of the app you can see your addressbook. This is instantly updated when you add a new contact. Click on any contact and the map will pan to their location.

Technology Choices

I chose to use Google Maps API since this is a web app everyones used to, it's very user friendly and easy to customise. Rather than simply have a form and addressbook I felt the map enhanced the UI/UX considerably. This also made getting latitude and longitude coordinates easy.

I built the app using React since I'm comfortable using it and it suits the task. I thought the addressbook instantly updating would impress potential clients. I used a boilerplate React Slingshot. Which describes itself as

"React + Redux starter kit/boilerplate with Babel, hot reloading, testing and linting".

I wasn't sure at first whether I'd need Redux, as it turned out I did not. If the app was further developed it might need it. I considered using redux-persist to store addresses when the page is reloaded. For now I've removed Redux and the actions/reducer folders from the project.

Setting up the Google Maps Javascript API and integrating it in to a React App can be fairly complex, luckily I found a good library for doing just this Google Map React.

I used Cypress for testing. It's a great tool which allows end to end testing. npx cypress open will launch the testing GUI, it will show available specs. Clicking on mapbook_spec.js will run the simple test spec I wrote. This launches the app in a browser and runs through the test cases, highlighting whether or not they pass. It's very easy to debug issues and time travel through different cases. The testing spec can be found here: cypress/integration/mapbook_spec.js

File structure

To get started run npm install Then npm start

This will run the app locally. Since we have hot reloading out of the box with react slingshot, every time you save a file the app will update on the browser without you needing to refresh the page. This speeds up development and makes it more enjoyable.

For styling I have used styled components. This is a great CSS-in-JS library. It allows you to use many of the features of libraries such as SASS, including variables, functions and nesting. What makes it really powerful is that you can update style using props. For example in the Form component the opacity is controlled by a prop 'show' if this is set to true then the form is opaque:

const Form = styled.form`
  opacity: ${props => props.show ? 1 : 0};
`

When a new address is entered I call the openForm function which switches the state of show to true, this state is passed as prop to Form which then updates

openForm(){
    this.setState({ 
        formVisible: true
    })
}

<Form show={this.state.formVisible} />

The src folder contains all the development files. React elements are split in to containers and components, this follows Dan Abramov's Presentational and Container Components methodology. Containers take care of the logic side of the app, whereas components act as the presentational layer, taking props from their container to define their state. I've left some elements in the main container 'Panel' which a junior developer could practice this theory on by breaking it down further. For example the Address and Form elements should both be moved to separate components.

The dist folder contains the production files which are generated by running npm run build.

I'm using firebase to host MapBook here. It's simple to setup hosting a quickly deploy apps using firebase, it can also be used for storing a database if you need. Once you have run npm run build you can deploy your latest build using firebase deploy.