Frontend Quiz App

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

** What I’m Most Proud Of ** I’m most proud of how much I’ve learned and accomplished throughout this project. Despite feeling overwhelmed at times, I pushed through and developed an app that not only works as intended but also incorporates multiple React concepts and features. I’m proud of:

• Tackling React from Scratch: I had to re-learn React after not using it for a while, and it felt great to see the progress I made, especially with passing props, managing state, and using hooks like useEffect.
• Building a Functional and Interactive App: Creating a working quiz app with a dynamic user interface, dark/light mode toggle, and smooth transitions between questions was an achievement I’m proud of.
• Deploying the App: Getting my app up on GitHub Pages was a big step for me, as it made everything feel more real and professional. Sharing my app with others gave me a sense of accomplishment.

** What I Would Do Differently Next Time ** While I’m proud of my work, there are a few things I’d approach differently next time:

• Planning and Wireframing: I’d spend more time planning the app before starting. I didn’t do much wireframing, which made me jump into coding without a clear visual direction. This led to some unnecessary back-and-forth during the development process.
• Handling State More Effectively: While I used props and state well, I feel I could have used Context API or Redux to manage state more efficiently, especially as the app grows and more features are added.
• Testing Early: I didn’t implement testing during the development process, which in hindsight, would’ve been helpful to catch bugs earlier. Next time, I’ll start writing tests right from the beginning.
• Design and UI/UX: Although I made the app functional, the design could have been more polished. I’d focus more on UI/UX principles and try to make the app look as good as it works.

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

** Challenges I Encountered and How I Overcame Them ** Throughout the development of my quiz app, I encountered several challenges, each of which taught me something valuable. Here’s how I navigated those obstacles:

• Understanding React Basics: After not using React for a while, I found myself struggling to remember some of the core concepts. To overcome this, I watched tutorials and referred to the React documentation regularly. ChatGPT also helped me clarify doubts and explain concepts in simpler terms, allowing me to move forward with confidence.

• Managing App State and Props: Passing props between components and managing state was tricky at first, especially as the app grew more complex. I overcame this by breaking down the app into smaller, reusable components and using props to pass data between them. I also practiced more with state management in React, which made me more comfortable with it over time.

• Dark Mode/Light Mode Toggle: Implementing a theme toggle was more challenging than I initially thought. I had to manage CSS variables and ensure the switch worked smoothly across the entire app. By looking up examples and experimenting with localStorage to persist the theme across sessions, I was able to implement this feature successfully.

• Handling onClick Events: As the app required multiple user interactions, handling onClick events properly was crucial. At times, I faced issues where event handlers weren’t firing as expected. I debugged these issues by checking my syntax and making sure the events were bound to the correct elements. Referring to Stack Overflow also helped me find solutions to common event handling issues.

• Deploying to GitHub Pages: Deploying the app to GitHub Pages presented its own set of challenges, especially when dealing with routing and React's single-page application (SPA) nature. After some trial and error and reading through GitHub’s documentation, I found the solution to configure the app correctly for deployment. This process taught me a lot about deployment tools and the importance of understanding how they interact with your app.

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

While I’ve made significant progress on my quiz app, there are still a few areas where I’d appreciate some guidance to improve and refine my work:

• State Management with Context API or Redux: As the app expands, managing state across multiple components is becoming more challenging. I would love help understanding the best practices for using Context API or Redux to streamline state management and avoid prop drilling.

• Testing the Application: I haven’t yet written tests for my app, and I’m unsure where to start. I’d like help with setting up testing frameworks like Jest or React Testing Library and writing effective tests to ensure my app works as expected.

• UI/UX Design Improvements: While the app is functional, the design could use some refinement. I would appreciate feedback on improving the user interface and user experience, such as making it more intuitive, visually appealing, and accessible.

• Performance Optimization: As the app grows and becomes more complex, performance could become an issue. I’d like help identifying potential bottlenecks and optimizing the app for better speed and responsiveness.

• Deployment Best Practices: Although I deployed my app on GitHub Pages, I’d like to learn more about other deployment strategies (e.g., Netlify, Vercel) and how to set up Continuous Integration/Continuous Deployment (CI/CD) for smoother project management.