Introduction
For today I had nothing specific, so I went full freestyle. The theme that emerged was skating - I guess I chose it because I wrote "freestyle"! 😄
Let me elaborate on 3 concepts to share my thinking process:
Design your Board: An online shop to customize skateboards
Find your Spot: A web app showing the best skate places (similar to hoodmaps)
Tell me his personality: Upload a picture of someone's skate gear/brands for a personality analysis
And the winner is: TrickBox, The Ultimate Trick List - a simple web app displaying various skateboard tricks.
Drafting
In Drafting we are taking our raw idea and shaping it:
Problem: It's cumbersome to find skateboard tricks that are easy to learn.
Idea: Curate skateboard tricks scattered across the internet.
Solution: Create a clean website that organizes tricks by difficulty and style.
Thoughts:
This is more of a design task than a development challenge.
Roadmap:
Prompt AI for a UX Design Handoff
Simplify the design drastically
Create index.html
Build vanilla page
Create script to generate trick images
Use generated images for frontend
Adjust style and UX iteratively
Call it a day
I tend to work agile and highly iterative - planning as best I can, building something, learning from it, and drafting again until I reach that "eagle eye view" where I can see both the big picture and the important details. In this case, we don’t need to go extensive with our draft, there are no much technical unknowns. Quite nice.
Build
I sat down with my coffee and a blank notepad, thinking about how to bring TrickBox to life. The design handoff looked good, but turning it into code would be my adventure for the day.
First, I sketched the structure: a simple, fast-loading web app showing skate tricks with images and descriptions. No fancy frameworks needed—just plain HTML, CSS, and vanilla JavaScript.
I started with a basic folder structure. For the images, instead of hunting for free-to-use skate photos, I created an image-generator script using AI. This gave me consistent style, no copyright issues, and the ability to regenerate any images I didn't like.
For each trick, I generated both an image and a text description, saving these files and creating a metadata.json file to connect everything. The frontend would load this data and display it in a clean, responsive grid.
I coded the generator in Node.js, making API calls to an image generation service. After running it, images of kickflips, ollies, and grinds appeared in my generated-images folder.
With the content ready, I built the frontend using a responsive grid layout. Each trick displays as a card showing the image, name, and difficulty. Clicking a card reveals the full description - everything happens on a single page for simplicity.
I kept testing on different screen sizes, ensuring it looked good from phones to desktops. The design is intentionally minimal, letting the trick images take center stage.
After some tweaks and refinements, my TrickBox app took shape - a functional pre-alpha version ready to share.
Showcase
Screenshot:
