yogeshtakeo commented 10 months ago

Full Stack Development Bootcamp - Fake Store API Integration with RTK Query and Styled Components

Task Description

In this task, you will integrate the Fake Store API into your Vite + React application by fetching product data using Redux Toolkit Query (RTK Query) and storing it in the Redux store. You will create multiple pages to view products, display detailed product information and handling the form which will be designed professionally. For styling, you will use Styled Components for the majority of the styling and choose between Tailwind CSS or Material UI for the modal component.

Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js (at least version 14.0.0)
npm (Node Package Manager)

Task Steps

Step 1: Set Up a Vite + React Project

Open your terminal and navigate to the directory where you want to create your project.
Run the following command to create a new Vite + React project using create-vite@latest:
```
npx create-vite@latest fake-store-redux --template react
```
Navigate into your project directory:
```
cd fake-store-redux
```

Step 2: Install and Configure Redux Toolkit Query

Install Redux Toolkit Query and React Redux as dependencies:
```
npm install @reduxjs/toolkit react-redux
```
Set up your Redux store according to the official documentation.

Step 3: Fetch Data from Fake Store API using RTK Query

Set up Redux Toolkit Query and create an API endpoint to fetch product data from the Fake Store API.
Use RTK Query's useQuery hook to fetch and manage product data in the Redux store.

Step 4: Create Pages to View Products and Display Details

Create a React component named ProductListPage in a suitable directory (e.g., src/pages).
Use the Redux state or RTK Query's useQuery hook to display the list of products on the ProductListPage.
Create a ProductDetailPage component to display detailed information about a selected product.

Step 5: Implement Navigation

Implement a navigation bar to navigate between the ProductListPage and AddProductForm.
Although you are required to have a form, just add validation for the inputs and styling is a must that should be through styled-components, you dont have to create any action to do anything. Just displaying the data somewhere will be fine but not required.

Step 6: Styling with Styled Components

Use Styled Components for the majority of your styling needs across components.
Choose either Tailwind CSS or Material UI to style the modal component for displaying detailed product information.

Step 7: Run the Development Server

Start the development server by running:
```
npm run dev
```
Open your browser to see your Vite + React app with the product list, product details, and form pages in action.

Task Completion

Congratulations! You've successfully completed the Fake Store API integration task with RTK Query, Redux, and styled components. You've learned how to fetch product data from the API, store it in the Redux store using RTK Query, create pages to view products and details, form handling functionality while using Styled Components for styling and choosing either Tailwind CSS or Material UI for the modal component.

Further Learning

To further enhance your skills, consider implementing features such as editing existing products, adding product categories, or incorporating more advanced RTK Query concepts. Follow up with useMutation hook on the library. and try to incorporate it.

Conclusion

Great job on completing this comprehensive task! You've gained valuable experience in integrating APIs, managing state with RTK Query and Redux, creating dynamic pages, Form handling and styling components using Styled Components. Keep exploring and building with RTK Query, Redux, React, and styling tools!