Redux Pokemon Tcg Shop

Overview

Pokemon TCG Shop is a fictional product created to demonstrate the usage of Redux Toolkit in managing client and server state. The project is built using Next.js, TypeScript, ChakraUI, and Framer Motion. The data for the project is fetched from the Pokemon TCG API, and the app also supports Dark Mode. The use of Skeleton helps achieve a CLS (Cumulative Layout Shift) value of 0, ensuring a smooth user experience. The responsive design ensures compatibility on different devices.

Features

• Next.js and TypeScript: The project is built using Next.js, a popular framework for React applications, and TypeScript, a statically typed superset of JavaScript.
• Redux Toolkit: Redux Toolkit is used to manage client and server state in the application, providing a powerful and efficient way to handle state management.
• ChakraUI and Framer Motion: ChakraUI is used for building the user interface of the app, providing a collection of ready-to-use components. Framer Motion is used for adding animations and transitions to the UI.
• Pokemon TCG API: The app fetches data from the Pokemon TCG API to display information about different Pokemon trading cards.
• Dark Mode Support: The project supports Dark Mode, allowing users to switch between light and dark themes.
• Skeleton Loading: The use of Skeleton helps achieve a CLS value of 0, ensuring a smooth loading experience for the users.
• Responsive Design: The app is designed to be responsive across different devices, providing a seamless user experience on mobile, tablet, and desktop.

Installation

To install Pokemon TCG Shop, follow these steps:

1. Clone the repository:

   git clone [repository_url]
   

2. Install the dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Open the app in your browser by accessing http://localhost:3000.

Summary

Pokemon TCG Shop is a demo project that showcases the usage of Redux Toolkit for state management in a Next.js application. With features like Dark Mode support, responsive design, and efficient data fetching from the Pokemon TCG API, the app provides a smooth and enjoyable user experience. The use of ChakraUI and Framer Motion adds to the overall aesthetics and functionality of the app. Developers can use this project as a reference for building their own Next.js applications with Redux state management.