Suburbia Skateboard

A Customizable E-Commerce Experience for Skateboard Enthusiasts

Project Overview

Suburbia Skateboard is a fictional e-commerce platform that allows users to customize and purchase skateboards through an engaging and interactive web interface.
I developed this project during the fifth semester of my Bachelor’s program in Web Design & Development at the SAE Institute Hamburg. The idea was to combine modern web technologies with a highly visual user experience to simulate a real-world product configurator.

Purpose and Concept

The project was designed to serve two main purposes:

To offer users a smooth and intuitive customization experience that allows them to personalize a skateboard in real-time before purchasing it.
To demonstrate the technical potential of integrating 3D rendering, headless content management, and interactive animations within a Jamstack-based web architecture.

Core Features

One of the standout elements of the website is the Hero section, which features an animated 3D skateboard rendered in real-time using Three.js.
This serves not only as a visual hook but also sets the tone for the customization-focused experience ahead.

The heart of the platform is the Customizer page, where users can personalize every aspect of their skateboard.
The interface allows for the selection of board shapes, grip tapes, wheels, decals, and colors — with real-time visual feedback directly applied to the 3D model.
This creates an immersive and playful user experience while keeping the UI clean and responsive.

Other notable features include:

Integration of a headless CMS (Prismic) to manage dynamic product content and assets
Smooth UI transitions and scroll animations powered by GSAP
A responsive layout tailored for both desktop and mobile users, built with Tailwind CSS
Clean codebase structured for scalability using Next.js and modular component logic

Tech Stack & Architecture

Next.js – Used as the primary framework for its flexibility, performance, and hybrid rendering features
Prismic – Headless CMS for managing content such as product options and image assets
Tailwind CSS – Utility-first framework for rapid prototyping and consistent styling
Three.js – 3D library used for rendering the skateboard in both the Hero and Customizer views
GSAP – Animation library for enhancing page transitions and interactions

Design Approach

The design direction was inspired by urban streetwear culture and modern e-commerce sites — bold, clean, and interactive.
I kept the layout minimal to highlight the skateboard and the customization process. Animations were added sparingly to support user actions and make the interface feel smooth and responsive.

Challenges and Learnings

Integrating Three.js with React and Next.js was one of the most technically demanding aspects of the project.
Ensuring performance across different devices required optimization of 3D assets and state handling in the Customizer.

Working with Prismic also taught me a lot about content modeling, slice-based development, and the flexibility of a headless CMS in real-world applications.
Lastly, implementing animations with GSAP helped me think more about motion design as a part of the user journey.

Reflection

Suburbia Skateboard brought together a wide range of skills — from interface design and 3D rendering to animation and content architecture.
It was an opportunity to explore the full potential of the Jamstack and push the boundaries of what a product customization flow can look like on the web.
This project not only strengthened my frontend development skills but also deepened my appreciation for the relationship between design, interactivity, and performance.