yogeshtakeo commented 1 year ago

Full Stack Development Bootcamp - Redux Toolkit Query Task with Product Page

Task Description

In this task, you will utilise Redux Toolkit Query to fetch product data from the Fake Store API and create a product page in your Vite + React application. You are encouraged to use any UI library of your choice (e.g., Material UI, Tailwind CSS, Daisy UI, Flowbite UI) to enhance the UI. Additionally, follow the directory-per-component pattern for organising your code, implement a loading indicator for RTK Query, add correct type references with TypeScript, and create a proper card implementation to display the products.

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 redux-query-product-page --template react
```
Navigate into your project directory:
```
cd redux-query-product-page
```

Step 2: Follow the Directory-per-Component Pattern

Create a separate directory for each component you'll be building (e.g., ProductPage, CardComponent).
Organise your components, styles, and related files within their respective directories.

Step 3: Install and Configure RTK Query

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

Step 4: Fetch Data using RTK Query and Implement Card Component

Open the file where you will define your RTK Query API service. Create a new API endpoint to fetch product data from the Fake Store API using RTK Query.
Create a proper card component to display the products. Style the card component using the chosen UI library.

Step 5: Create a Product Page

Create a React component named ProductPage in a suitable directory (e.g., src/pages).
Use the useQuery hook from RTK Query to fetch and display the product data on the ProductPage component.

Step 6: Implement Navigation and UI Library

Choose a UI library (e.g., Material UI, Tailwind CSS, Daisy UI, Flowbite UI) for styling.
Implement a navigation bar that allows navigation to the ProductPage component.
Style your components using the chosen UI library.

Step 7: Loading Indicator and Type References

Implement a loading indicator for your RTK Query component.
Ensure you have the correct type references in your components when using TypeScript.

Step 8: Run the Development Server

Start the development server by running:
```
npm run dev
```
Open your browser and navigate to http://localhost:3000 to see your Vite + React app with the product page, RTK Query, and enhanced UI in action.

Task Completion

Congratulations! You've successfully completed the Redux Toolkit Query task with a product page. You've learned how to use RTK Query to fetch and display product data, implement navigation, style your components using a UI library, organise your code using the directory-per-component pattern, implement a loading indicator, and use proper type references with TypeScript.

Submission

Please follow the submission process below:

Take a screenshot of your completed application showcasing the product page, RTK Query, and the enhanced UI.
Open a new issue in this repository.
Paste the submission screenshot in the issue.
Provide the following details in the issue:
- Name: Your name
- GitHub URL: Your GitHub repository URL for this task

Your submission will be reviewed, and feedback will be provided through the same issue.

Further Learning

To further enhance your skills with RTK Query, explore more advanced features such as caching, mutations, and pagination. Refer to the official documentation for comprehensive guidance.

Conclusion

Great job on completing this comprehensive Redux Toolkit Query task with Vite + React and creating a product page! You've gained valuable experience in using RTK Query to manage data fetching, designing a user-friendly UI using your chosen UI library, organising your code using the directory-per-component pattern, implementing a loading indicator, and using proper type references with TypeScript. Keep exploring and building with Redux Toolkit and RTK Query!