Project: Pokédex with React Query

Project Set-up

Link to GitHub here

Project description

This project will allow you to deepen your understanding of the libraries and hooks covered this week. You'll be refactoring your Pokédex project from last week, adding in React Query for handling API requests, React Context for storing non-API global state, and a contact form with at least 6 fields, utilizing the useReducer hook to manage form state.

Project Milestones

  1. React Query Setup: Refactor your Pokédex application to use React Query to handle API requests to the PokeAPI. This will allow you to fetch, cache, and efficiently synchronize your Pokemon data.
  2. React Context: Set up a React Context to handle global non-API state. For this project, we'll be using it to handle a global "theme" state.
  3. Contact Form: Add a contact form with at least 6 fields. This should include a variety of field types (like text inputs, number inputs, select dropdowns, etc.). Use the useReducer hook to manage your form state.
  4. React Router: Set up React Router in your application to handle navigation between different screens.

Learning Objectives

  • Build a deep understanding of managing state in React applications using different tools and libraries.
  • Practice using React Query to handle API requests.
  • Understand and implement the React Context for managing the global state.
  • Understand and implement the useReducer hook for managing complex state logic.
  • Gain practical experience in integrating these different pieces into a larger application.

Bonus Milestones

  1. Dark/Light Theme: Use the global "theme" state to implement a dark/light mode toggle for your application.
  2. Advanced Form Handling: Implement form validation for your contact form. This could include things like required fields, minimum/maximum length, valid email format, etc.
  3. Error and Loading States: Implement error and loading states for your Pokemon data fetching using React Query.
  4. More Complex Routing: Implement more complex routing, such as nested routes or conditional rendering based on the path.