https://github.com/nisha0202/ecommerce-app
This project is a Simple E-Commerce Product List Application built with React, TypeScript, and RTK Query, featuring product search, infinite scrolling, cart functionality with summary, and persistent cart state using Redux.
https://github.com/nisha0202/ecommerce-app
react redux-persist rtk rtk-query tailwindcss typscript
Last synced: 2 months ago
JSON representation
This project is a Simple E-Commerce Product List Application built with React, TypeScript, and RTK Query, featuring product search, infinite scrolling, cart functionality with summary, and persistent cart state using Redux.
- Host: GitHub
- URL: https://github.com/nisha0202/ecommerce-app
- Owner: Nisha0202
- Created: 2024-10-20T03:19:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-22T08:29:19.000Z (over 1 year ago)
- Last Synced: 2025-10-11T09:06:18.011Z (8 months ago)
- Topics: react, redux-persist, rtk, rtk-query, tailwindcss, typscript
- Language: TypeScript
- Homepage: https://e-commerce-jobtask.netlify.app/
- Size: 1.15 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# E-Commerce Product List Application
## Project Overview
This project is a Simple E-Commerce Product List Application built using **React**, **TypeScript**, and **RTK Query**. The application displays a list of products fetched from a mock API, supports infinite scrolling for dynamic loading of products, and allows users to search for specific items. Users can add products to their cart, with a cart summary(total items and total price) displayed at the top of the app. The cart data is persisted in the Redux state, ensuring that users retain their selections even after refreshing the page.
## Functionalities
1. **Product Listing with Infinite Scroll**
2. **Search Functionality**
3. **Cart Management**
4. **Responsive Design**
## Getting Started
### Prerequisites
Make sure you have the following installed on your machine:
- Node.js (version 17 or higher)
- npm (Node Package Manager)
## Installation
1. Clone the repository:
```bash
git clone https://github.com/Nisha0202/ecommerce-app.git
cd ecommerce-app
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
Open your browser and navigate to http://localhost:3000.
## Project Structure
The directory structure of the application is organized as follows:
```
/src
/app
└── store.ts
/components
├── CartSummary.tsx
└── ProductList.tsx
/features
/cart
└── cartSlice.ts
/services
└── productApi.ts
/types
└── types.ts
├── App.css
├── App.tsx
└── main.tsx
```
## Key Architectural Choices
1. **React Functional Components**
: Leveraged React's functional components and hooks for state and lifecycle management.
2. **RTK Query**
: Used for efficient data fetching and caching from the FakeStore API.
3. **Redux Toolkit**
: Simplified the process of managing global state, particularly for the shopping cart.
4. **Redux Persist**
: Integrated redux-persist to automatically save and rehydrate the shopping cart state in localStorage, ensuring that users' cart data is preserved even after refreshing the page.
5. **TypeScript**
: Ensured type safety across the application, reducing runtime errors and improving developer experience.
6. **Tailwind CSS**
: Utilized Tailwind CSS for styling, allowing for rapid design implementation with a utility-first approach that promotes responsive and adaptive UI.
For any questions or suggestions, feel free to open an issue on the repository or contact me at nishajabatunnessa@gmail.com.