Public Art London

An interactive map app where users can find public artworks, and use or create London public walking art tours.

• Utilized JSON Web Tokens and localStorage to store encrypted user information client-side, providing user authentication.
• Applied Google Maps and Directions APIs to map public art in London and create tours with step by step directions for users.
• Developed a Rails API backend with endpoints for users, artworks and tours.
• Implemented a smooth user interface with React, and specifically Router for navigation and Semantic for styling.

User stories:

A user can:

• Login/sign up (using JSON Web Tokens and localStorage to store encrypted user information client-side).
• Edit or delete their account.
• Browse public art works in London plotted on an interactive map impletedted with Google Maps API.
• Search the artworks using a DebouncedInput React component.
• Select public art tours to go on, generating directions via the Google Directions API.
• Create their own public art tour by selecting artworks and then obtaining directions via the Google Directions API.
• User created tours are added to the Postgres database and therefore added to the list of available tours on the app.

Prerequisites

Make sure you have installed:

• Ruby, version 2.6.1 or newer
• Postgres
• Rails, version 5.2.3 or newer

You can check in the terminal:

ruby -v
rails -v
postgres -v

This should output some information on the installed versions. If not, you can refer to the Ruby, Postgres and Rails documentation.

You will also need a Google API key for this project. You can get one on the Google API website. Your project needs to enable the Maps Javascript API,Places API and Geocoding API.

For the frontend repository of this app see https://github.com/louisenorris/London_Public_Art_Tours_frontend

Getting started

Fork and clone this repository and the frontend repository. Start Postgres.

Installation

Backend

On a terminal window, move into the backend directory of this project. Use the gem manager bundler to install all dependencies. Create, migrate and seed the database. Start the Rails server. To do all this, run these commands, one at a time.

bundle install
rails db:create
rails db:migrate
rails db:seed
rails start

Frontend

On a new terminal tab, navigate to the frontend directory inside the root directory of the project. Use the package manager npm to install all dependencies.

npm install

Google API

Once you have a key it needs to be added to an .env file as below where it says 'INSERT_YOUR_API_KEY':

REACT_APP_GOOGLE_API_KEY=INSERT_YOUR_API_KEY_HERE

Make sure you then add the .env file to your .gitignore file. Then reference your API key inside the MapWrapped component of the Map.js file as follows, then save:

googleMapURL={https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_API_KEY}`}`

Start the server on port 3001.

npm start

Visit localhost:3001.

You're all set!

Notes

This app is optimised for mobile use, please change your browser's device settings accordingly.