Responsive website using React and styled-components

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

I am most proud of successfully creating a responsive and visually appealing website that adapts well to various screen sizes using React and styled-components. The integration of interactive maps with Leaflet JS on the locations page was a challenging yet rewarding experience, enhancing the user experience.

If I were to do this project again, I would focus more on optimizing performance from the start. While lazy loading and code splitting were implemented, additional techniques such as server-side rendering (SSR) with Next.js could further improve the initial load times. Additionally, instead of using styled-components, I would opt for Tailwind CSS when working with Next.js for a more seamless integration and improved styling performance. I would also refine the form validation logic to provide even more user-friendly error messages and consider integrating a backend service for dynamic data fetching to make the site more scalable and maintainable.

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

One of the main challenges I encountered was managing responsive design across different screen sizes. Ensuring that the layout and interactive elements looked good and functioned well on both mobile and desktop devices required careful planning and testing. I overcame this by using CSS grid and flexbox for layout management, and media queries to adjust styles based on the screen size.

Another challenge was integrating interactive maps with Leaflet JS, especially ensuring that they loaded correctly and were fully responsive. To solve this, I leveraged my prior knowledge of Leaflet JS, revisited the documentation, and experimented with different configurations until I achieved the desired result.

Additionally, form validation was a significant challenge. Implementing comprehensive and user-friendly validation required utilizing Formik and Yup. I overcame this by drawing on my previous experience with these libraries, thoroughly revisiting their documentation, and testing various validation scenarios to ensure all edge cases were covered.

Lastly, optimizing performance with lazy loading and code splitting required a good understanding of React's lazy and Suspense features. I resolved this by applying my existing knowledge of these features, gradually implementing them, and testing their impact on the application's load time, ensuring that the user experience remained smooth.