Responsive Multi-Step Form in React and TypeScript

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

I'm proud of building an accessible, modular multi-step form that handles validation effectively and looks polished across different devices. Structuring this form in React and TypeScript allowed me to create reusable components that kept the codebase organized and easy to extend. Using SCSS gave me the flexibility to ensure a responsive design that adapts well to both desktop and mobile screens.

If I were to tackle this again, I’d focus on refining the CSS and further optimizing the user experience on smaller screens. I'd also explore ways to streamline state management even more, perhaps using custom hooks to handle validation and step logic more cleanly.

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

Managing the state across multiple form steps required careful planning, as each step had its own validation rules and unique layout requirements. I handled this by implementing custom hooks for validation and state management, which kept the logic organized and easy to follow.

Styling responsive checkboxes and form elements to maintain a cohesive design across devices was another challenge. I used SCSS variables and media queries to ensure that the components adapted gracefully on smaller screens. This approach helped create a consistent user experience regardless of screen size, and reinforced my understanding of responsive design principles.