Milestone Project - RunFinder
Developer: Seaghan Brosnan
Project Brief
In this project, you'll build an interactive front-end site.
The site should respond to the users' actions, allowing users to actively engage with data, alter the way the site displays the information to achieve their preferred goals.
- Create a site that calls on the Google Maps API to allow users to search for their next running event.
THe site will help users:
- Naviagte through each event on the map
- Find running events
- Provide event locations in a manner that is visually appealing for your user (by drawing on the skills you have learned in User-Centric Frontend Development)
Technologies and Dependencies
- HTML5
- CSS3
- Bootstrap v3.3.7
- Font Awesome v4.7.0
User Stories & User Experience Design
| Strategy | Focus | User Needs | Business Objectives |
|---|---|---|---|
| What are you aiming to achieve? | Find running events | Increase users | |
| Find locations of running events | Social currency | ||
| For whom? | Users intersted in runnig and fitness | Increase brand awareness | |
| Target Audience? |
| Scope | Focus | Functional Specification | Content Requirements |
|---|---|---|---|
| Which features? | Navigate - use the map to naviagte events | View events by country | |
| What’s on the table? | Discover - use the map to discover events | Navigate to an event using the map | |
| Explore - use the map to explore events | Display event names by hovering over the marker | ||
| Structure | Focus | Interaction Design | Information Architecture |
|---|---|---|---|
| How is the information structured? | Where am I? / How did I get here? / What can I do here? / Where can I go? | Organizational / Navigational schemas (dashboard | |
| Home - landing page | |||
| How is it logically grouped? | Mobile - landing page and button to map | Map - Find runnign event locations | |
| Desktop - landing page and button to map | Contact Us - book a consultation |
| Skeleton | Focus | Interface Design | Navigational Design | Information Design |
|---|---|---|---|---|
| How will the information be represented? | See wireframes | Landing Page | ||
| RunFinder map | ||||
| How will the user navigate to the information and features? | Contact Us |
| Surface | Focus | Visual Design |
|---|---|---|
| What will the finished product look like? | Fonts: @import url('https://github.com/brosnans/milestone-project-2/tree/master/assets/css'); | |
| fc0330 | ||
| What colours, typography and design elements will be used? | ff7e40 | |
| eb7d34 |
Wireframes
https://github.com/brosnans/milestone-project-2/blob/master/assets/Wireframe%20%231.jpg
https://github.com/brosnans/milestone-project-2/blob/master/assets/Wireframe%20%232.jpg
https://github.com/brosnans/milestone-project-2/blob/master/assets/Wireframe%20%233.jpg
Deployed to Github Pages
- Project repository: https://github.com/brosnans/milestone-project-2
- Project link: https://brosnans.github.io/milestone-project-2/
- Go to project repo settings on Github
- Select master branch and click save
Tests and Fixes
Mobile
Tested on iPhone 5, 6, 7, 8 and X
PROBLEM
FIX
Desktop
Tested on Chrome, Safari, Firefox
Acknowledgements
This is for educational use.
All content on this project has been written and created by Seaghan Brosnan.
Credits
Media
Images used on landing page taken from https://www.itl.cat/pngfile/big/213-2136767_free-running-girl-jogging.jpg
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
