Product list with cart, i18n, mobile friendly design and routing.

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

What I'm Most Proud Of

• Switching to TypeScript: Transitioning from JavaScript to TypeScript gave me more confidence in handling types and improved the overall code quality.
• React Routing: Implementing React Router to create a dynamic, single-page application was a rewarding challenge that improved my understanding of SPAs.
• i18n Integration: I'm proud of implementing i18n for multi-language support, including translations for aria labels to enhance accessibility.
• Design Changes:
  • Adding a cancellation countdown timer to the "place order" button, improving user experience.
  • Making the cart more mobile-friendly by adjusting its placement rather than leaving it at the bottom of the document.
  • Expanding the project to multiple pages and making it work seamlessly with React routing.

What I'd Do Differently

• Testing: Next time, I plan to focus on adding unit and end-to-end testing to catch bugs earlier and prevent issues from arising as the project evolves.
• ESLint: I would like to use ESLint more effectively to ensure cleaner, more consistent code.
• Project Scope: I realized that adding too many features caused the project to grow larger and more complex than originally intended. While it was a great learning experience, it significantly extended the project timeline. In the future, I’ll focus on better planning and scoping the project to avoid this.

What challenges did you encounter, and how did you overcome them? Challenges I Encountered and How I Overcame Them

• Switching from CRA to Vite: Transitioning to Vite brought some challenges, especially with how SVGs are imported and styled differently compared to Create React App. After some troubleshooting, I learned how to properly handle SVGs and style them as needed.

• Learning TypeScript: Initially, adapting to TypeScript was tricky, particularly when passing down props in React Router. However, with practice, I became more comfortable with TypeScript and its benefits. I plan to continue improving by practicing basic TypeScript outside of React to strengthen my skills further.

• React Router & TypeScript Integration: Understanding how to integrate React Router with TypeScript was another hurdle, especially when it came to passing props. After experimenting, reading the documentation, and turning to Stack Overflow for help, I was able to work through these issues successfully.

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

I’m concerned that I may have overengineered certain aspects of this application. Additionally, some late changes to the layout impacted existing styles and prop passing. Any feedback on how the project could be streamlined or simplified would be greatly appreciated!