This project is developed for Google/Udacity Front End Web Development Nanodegree (Project 8) as the final capstone project.
The aim of the project was to build a single page map application using React and the Google Maps API, integrate a third-party data API and make the app accessible and usable offline. Application state is managed with Redux (wasn't required to complete the project).
Open the page directly from here
The system expected to have the following dependencies installed
- Node.js
- npm
- [ yarn ]
- Git
- Clone repository
- Navigate into project folder and then install dependencies with
npm install - start the server with
npm startoryarn start - the aplication runs on http://localhost:3000
Service worker is being activated in the production version
To get a production version either run yarn or npm
yarn build / npm run build
- Google Maps API
- Ticketmaster Discovery API
- create-react-app
- react-redux
- react-day-picker
The site was tested on Google Chrome only
On the initial page load data is requested from the Ticketmaster API for the next 7 days for the Northern England region. Filter labels (location, date) are created from the fetched data.
The events are displayed in a list in the side menu, where they can be filtered for multiple locations and days plus searched by event name in the search field. Searching / filtering updates the event list and shows only those on the map and adjusting the zoom and center of the map.
On the map venues are displayed, clicking on the marker shows all the events for that venue in the infowindow.
Hovering on events in the side menu highlights the relevant venue marker on the map, clicking on the event list item centers the map and displays an infowindow with additional details above the venu marker along with a link to Ticketmaster website to purchase tickets and an image of the event.
This project is licensed under the MIT License - see the LICENSE.md file for details
- Thank you for Ticketmaster for providing the data