Joystick Journey Shop

Ship #1 Changes requested

@arhan_levaku4 on Joystick Journey Shop · about 1 month ago

What did I make?
Joystick Journey is a full e-commerce website for a physical product I actually built — a joystick-controlled marble maze with swappable boards. The site is built from scratch in Next.js 15 with CSS Modules, Framer Motion animations, Stripe for real payments, and Resend for branded confirmation emails. You can browse the product, pick your maze color, joystick color, and bundle size, check out securely, and get a confirmation email automatically. The product is real and already has its first sales.
What was challenging?
Three things genuinely tripped me up. First, Next.js 15’s App Router has strict rules about client vs server components. I kept hitting “event handlers cannot be passed to client component props” and “useSearchParams must be wrapped in Suspense” errors that broke Vercel builds entirely. Second, getting Stripe to redirect back correctly after checkout required carefully managing environment variables between localhost and production. Third, confirmation emails kept landing in spam, turns out new domains always do this and you have to earn inbox placement over time through DKIM and DMARC records.
What am I proud of?
The whole thing looks and feels like a real premium brand. The dark UI with amber touches, Framer Motion scroll animations, particle backgrounds, and the product shop with color/bundle selectors all came together into something that genuinely looks like it could compete with established e-commerce stores. And it’s not just a demo because real people have bought the product through this site!
What should people know to test it?
Visit joystickjourney.shop. The full site is live. Browse the shop, try the color and bundle selectors, click “Swap the maze” on the home page to see the maze gallery, and watch the tutorial video. If you want to test checkout use a real card, the site is fully live with Stripe payments. The success page, confirmation email flow, and all animations are live too. Check your spam folder after checkout for the confirmation email!

4 devlogs
8h

Try project → See source code →

Open comments for this post

@arhan_levaku4 on Joystick Journey Shop · about 1 month ago

4h 36m 55s logged

Devlog #4 - The shop page got a full update this week. I added a retro joystick color selector and a popup image feature so customers can actually see what they’re buying up close. Sounds simple, but this took way longer than expected as the popup image kept rendering as static, and I spent a good chunk of time fixing sizing issues before finally getting it to fit. On the backend side, I got Stripe out of sandbox mode and connected the real API key to hook a prebuilt checkout form after ordering, so payments are now fully live and secure. Two features that look small on the surface but had a lot of errors.

Open comments for this post

@arhan_levaku4 on Joystick Journey Shop · about 2 months ago

1h 1m 22s logged

Devlog #3 - As promised, I have now rebuilt the success page from scratch to match the theme. It now has the same floating amber particle background from the hero, a cool ring animation around the confirmation emoji, gradient text, and an order status tracker showing exactly where the customer is in the fulfillment process. The whole card animates in with Framer Motion on load.
The hardest part was getting the particle canvas to sit behind the glassmorphism card without z-index fighting everything else. Took a few attempts but backdrop-filter: blur(20px) on the card with the canvas absolutely positioned behind it ended up being the cleanest solution.

Open comments for this post

@arhan_levaku4 on Joystick Journey Shop · about 2 months ago

1h 47m 27s logged

Devlog #2- Just finished wiring up the automatic confirmation emails through Resend’s API. After every purchase, the customer gets a branded email from [email protected] with their order details. First test email went straight to junk (new domain so expected) but the code worked after several minor issues.

Open comments for this post

@arhan_levaku4 on Joystick Journey Shop · about 2 months ago

35m 21s logged

Devlog #1 — Added success confirmation page!
Got the full checkout flow working end to end today. When a customer completes their purchase on Stripe, they now get redirected to a custom success page instead of a blank screen.
The tricky part was getting the session ID from the URL after Stripe redirects back — Next.js 15 requires useSearchParams() to be wrapped in a Suspense boundary or the whole build fails. Took me a bit to figure out why Vercel kept rejecting the deployment, but two characters fixed it.