An e-commerce shop for Joystick Journey, my small business that sells 3D printed revolutionized marble mazes. This web development uses React and CSS for seamless UI flow, along with stripe API for secure, authenticated checkouts for purchase.
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.
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.
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.
