This project focused on practicing React Router. My primary goal was to deepen my understanding of how it works and to map out how all the components are interconnected. To aid my learning, I created a visual representation of how I understood the structure and flow of the application.
Challenges and Solutions I used the class code provided as a framework and relied on ChatGPT as my main resource to troubleshoot issues like error messages. While the solutions to the problems I faced were often straightforward, the most challenging part was pinpointing exactly where the issues originated within the codebase.
To tackle the project, I divided it into separate components and began working from App.jsx downwards. However, I found myself jumping back and forth between components and pages, which made it harder to focus on one task at a time. In hindsight, I believe it would have been more effective to follow the approach I've used in previous projects:
Start by building reusable components. Create sections (or pages, in this case). Then connect everything with React Router. Styling Process For styling, I began by experimenting to ensure everything worked correctly and to identify where styles should be applied. Afterward, I adopted a mobile-first approach, progressively enhancing the design to suit desktop views. This workflow helped me ensure responsive design throughout the project.
Reflections and Future Improvements If I had more time, I would have:
Broken down the code into smaller components, especially on the pages where fetching data and hooks are currently nested. Separating these concerns would improve maintainability and reusability. Created a more personalized design. While the project used the provided framework, I would have enjoyed having more time to experiment with a unique layout and design choices. Dedicated additional time to explore and try out new ideas or features, enhancing both the functionality and user experience of the site. Key Takeaways This project was a valuable learning experience in understanding React Router and managing a project with interconnected components. While I faced challenges with debugging and structuring my work, I’ve gained confidence in identifying issues and planning a more efficient workflow for future projects.
See instructions of this project