Skip to content
Submitted 4 months ago

Multi-Step Form built with Next.js, Mantine, TypeScript, and Zustand

next, typescript, zustand, post-css
Gellen•170
@gellend
A solution to the Multi-step form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

  • Most Proud Of:

    • Successfully implementing a functional multi-step form with client-side routing (Next.js App Router) and global state management (Zustand).
    • Successful integration between Next.js and Mantine, including initial theming setup and ColorSchemeScript to address hydration issues.
    • Implementation of an organized directory structure for components, store, and types.
    • Resolving bugs related to Zustand state management ("Maximum update depth exceeded" and "getSnapshot should be cached") by correcting selector patterns.
    • Creating a responsive Sidebar component that matches the reference design, including the use of background images and active step indicators.
    • Implementation of basic form validation using @mantine/form.

  • Do Differently Next Time:

    • Perhaps define the global color scheme (CSS variables) earlier in the process for consistency and to avoid using direct HSL values in some places initially.
    • Consider creating a more comprehensive type system for all form data and component props from the outset.
    • Explore further optimizations for useEffect in synchronizing the form with the store, although the current solution is functional.
What challenges did you encounter, and how did you overcome them?
  • Initial Mantine & Next.js Setup: Encountered a hydration error related to data-mantine-color-scheme. This was resolved by adding mantineHtmlProps to the <html> tag and ColorSchemeScript in app/layout.tsx.
  • State Management with Zustand: Faced "Maximum update depth exceeded" and "getSnapshot should be cached" errors in several form step components. This issue was identified as stemming from how Zustand selectors were fetching state (fetching the entire state object caused excessive re-renders) and was fixed by changing selectors to only retrieve relevant state portions individually.
  • Styling and Design Consistency: Required several iterations to adjust component styling (like Sidebar, input fields, buttons) to match style-guide.md and visual references, including the implementation of active states. This involved using CSS variables, Mantine's styles props, and CSS Modules.
  • Navigation and Next.js Link Component Props: There was an error related to legacyBehavior on the Next.js Link component in SummaryStep.tsx, which was resolved by removing the prop.
  • Form Synchronization with Store: There was some difficulty ensuring useEffect in SelectPlanStep.tsx ran with the correct dependencies to synchronize form state with the Zustand store without triggering unnecessary loops.
What specific areas of your project would you like help with?

Currently, the main focus is on adjusting the design for mobile view and ensuring all colors and active states fully align with style-guide.md throughout the application.

  • Review of the current styling implementation, especially the use of Mantine's styles prop versus CSS Modules for more complex cases (e.g., very specific hover states on buttons).
  • Suggestions for best practices in handling responsiveness with Mantine across various form components.
  • Perhaps feedback on the accessibility of the created form.
Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Gellen's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord