A Single Product Page | Next.JS Typscript and Shadcn and Framer-motion

What are you most proud of, and what would you do differently next time?

I'm really proud of how I combined Next.js App Router, ShadCN UI, Redux Toolkit, and Framer Motion to build a smooth, clean, and interactive single product page. I managed to keep the UI consistent, accessible, and responsive while also adding subtle animations that improved the user experience without overwhelming it.

One thing I would do differently next time is to invest more time in optimizing performance and accessibility. Although the page works well, I believe I can improve Core Web Vitals and semantic HTML structure to make it even more robust. I’d also consider implementing better image optimization and experimenting with server-side state handling using tools like server actions in Next.js (or using Zustand instead of Redux for simpler state needs).

What challenges did you encounter, and how did you overcome them?

One of the main challenges I faced was managing global state efficiently, especially when dealing with UI interactions like quantity updates and adding items to the cart. I initially tried using React Context, but it became messy as the app grew. Switching to Redux Toolkit made state management much more predictable and scalable.

Another challenge was styling and maintaining design consistency using ShadCN UI. Since ShadCN is built on top of Tailwind and Radix UI, I had to carefully customize components without breaking accessibility or responsiveness. I used @/components/ui overrides and followed utility-first practices to keep everything modular and clean.

Finally, integrating Framer Motion for smooth animations was a bit tricky when combined with dynamic routing in Next.js App Router. I solved this by using AnimatePresence and key-based animation triggers to control transitions between different states reliably.

What specific areas of your project would you like help with? 🔵 What specific areas of your project would you like help with?

I'd appreciate feedback on the following areas:

• Performance Optimization: I’d love tips on improving performance, especially around lazy loading images, minimizing bundle size, and optimizing Redux usage for a small-scale project like this.
• Accessibility: I tried to keep the UI accessible, but I’m not 100% confident. Any feedback on improving semantic HTML and keyboard navigation would be super helpful.
• Animations: While I used Framer Motion for transitions and micro-interactions, I'm open to feedback on making the animations feel more natural or improving performance around them.
• UI/UX Design: I'm using ShadCN UI and customized components with Tailwind CSS. I'd like feedback on spacing, hierarchy, and how to enhance the visual design without overcomplicating the layout.