This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing
What I Built
I created an interactive landing page where users can customize their own skateboard shape with Halloween-themed prints.
The page mixes punk, horror, and Halloween aesthetics, featuring dark tones, neon accents, and creepy visuals like skulls, pumpkins, and ghosts.
Users can:
- Choose a print from a gallery of Halloween designs and see it instantly applied to the skateboard mockup.
- Upload their own artwork (PNG, JPG, or SVG) to create a truly unique and scary board.
- Buy the customized skateboard directly through a purchase button.
The goal was to blend interactivity and e-commerce with a strong Halloween visual identity, appealing to skateboarders who love edgy, horror-inspired art.
Demo
🚀 Live Demo: https://custom-helloween-skateboard-deck.vercel.app/
🧠 Code Repository: https://github.com/rogeriorioli/custom-helloween-skateboard-deck
Journey
This project was a blast to build!
I started with the idea of bringing Halloween energy into the skate culture, combining both worlds through a clean yet chaotic interface.
Technically, I used React + TailwindCSS, and implemented interative click to image to overlay prints onto the skateboard shape dynamically.
The biggest challenge was making the image overlay feel natural and visually satisfying — like a real printed shape.
What I learned:
- How to handle image layering and uploads efficiently in React.
- How to design a dark, high-contrast UI that’s still visually balanced.
- The importance of subtle animations and small visual details (hover glows, fades, etc.) to create immersion.
Happy Halloween 🎃
May your code be spooky and your UI delightfully haunted!
Top comments (17)
Epic
thank you
hi , you are known to say why i don't receive my challenge badge ?
this is so fun!
thank you
This is so cool!
thank you
Super creative idea! 🛹🔥
The Halloween theme + live skateboard customization makes this feel like a real storefront. The UI, overlays, and small animation details really bring it to life. Great execution!
thank you
wonderful design
thank you
Awesome, where did you get the default designs?
generate by gemini (Nano Banana)
@thepracticaldev where my badge ?
awesome!
thank you
@thepracticaldev , hi , you are known to say why i don't receive my challenge badge ?