2021 • Web • Branding

Creating a database of awesome skating spots for the skateboarding community.

SkateSpot is a web app built with React that allows skaters to find their perfect street skate spots. Users can place their own markers near interesting obstacles to form a community driven database of locations. Users are also able to search for spots - or use a list of nearby locations to explore.

The project

Skaters haven't had a community driven app for as long as I can remember. The only way to find out about new street skating locations is to look around, hear about them from someone, or find official parks on Google Maps. Me and my partner for this project wanted to change this by building an easy to use app that had everything skaters needed to know to find their perfect spots.

SkateSpot was built as a school project. First off I made a Brand Manual, thought of a name and quickly designed a logo (as I only had a couple weeks to start and finish this project), and then started looking up React tutorials to implement API's such as the Google Maps API for React. After getting a grasp of how React worked and how I could implement my own custom map, I added functionality like adding custom markers and linking this to a database to store all locations.

Research

This project was made by me and a colleague student / friend of mine. The assignment we got was to find a problem and solve it with a modern web app. Although we don't really skate ourselves (anymore), we did realize there weren't any skating apps for the skateboarding community to find cool spots. We decided to focus our concept on this, eventually evolving into SkateSpot.

We started looking

Design

Before we could start building our app, we needed some simple app UI designs and a proper branding guide to follow. This prompted me to build the brand manual, and my partner to build the UI designs based on this branding. The finished brand manual can be found at the results.

Development

Since we were able to choose any way to build our web app for this assignment, we decided to go for React as it is the most popular JavaScript framework, and I wanted to learn how to use this framework for future projects.

Results

The deliverables for this project were a brand manual and the web app itself. I was responsible for both of these, and having some help during the development process by having my colleague student building the front-end.

Web app

I was able to build a functional react web app and link it to a simple JSON database with coordinates of spots that users could enter based on their current location. I also got the Google Maps API to work and display all the spots stored in the database based on their location. I'm happy with the result, however there is still some bugfixing to do and functionality to add.

If I had more time for this project I would've implemented functionalities such as searching for spots, deleting spots, having a login/register system with accounts and friends, and being able to filter spots based on these friends. I would also include more parameters when adding a new spot such as obstacle types.

Below is a recording of the finished web app.

SkateSpot - App demo

Branding

I'm happy with how the brand manual turned out. I was able to create a clear structure for the SkateSpot brand, including a logo based on a marker icon. Since skateboarding is popular among younger audiences, I went for a modern style and

Below are some pictures of the brand manual.