A Responsive Multi step Form using Next.JS with Typescript and Shadcn

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

I'm most proud of how I implemented the multi-step form logic using Redux Toolkit for state management and how I integrated animations with Framer Motion to enhance the user experience. I also enjoyed working with ShadCN UI components, which made styling clean and consistent.

If I were to do it again, I would focus more on accessibility and form validation edge cases. I’d also consider adding unit and integration tests to make the solution more robust and production-ready.

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

One of the main challenges was managing the form state across multiple steps while keeping the codebase clean and scalable. I solved this by using Redux Toolkit to centralize the state, which made it easier to manage and debug.

Another challenge was implementing smooth step transitions without breaking the form logic. I used Framer Motion to handle animations, and I had to carefully coordinate the animation timing with form validations and state updates to avoid any glitches.

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

way to handle multi-step form state. I’m also open to suggestions on improving the user experience, especially regarding transitions and animations between steps using Framer Motion.

Additionally, any tips on improving form validation patterns and making the app more accessible (a11y) would be super helpful.