Skip to content

README.md

Latest commit

 

History

History
93 lines (59 loc) · 2.27 KB

README.md

File metadata and controls

93 lines (59 loc) · 2.27 KB
Raw

🛒 Nexton E-Commerce

A fully responsive E-Commerce web app built with React.js, Redux Toolkit, and Tailwind CSS. This project demonstrates modern UI design, smooth state management, and essential shopping features like product search, cart system, and multi-page navigation.

🚀 Features

🧠 Redux Toolkit for global state management

🛍️ Add to Cart / Delete from Cart functionality

🔍 Search Products with real-time filtering

📄 Multi-page navigation using React Router

📱 Fully responsive layout built with Tailwind CSS

⚡ Optimized performance & clean component structure

🗂️ Folder Structure

src/ │ ├── app/ │ └── store.js # Redux store setup │ ├── features/ │ └── cart/ # Cart slice and logic │ └── products/ # Product slice and data │ ├── components/ # Reusable UI components ├── pages/ # Multi-page routes (Home, Shop, Cart, etc.) ├── assets/ # Images and static files └── App.js # Root app component

⚙️ Installation

  1. Clone the repository

git clone https://github.com/yourusername/nexton-ecommerce.git

🧩 Example Code

import { useDispatch } from "react-redux"; import { addToCart } from "../features/cart/cartSlice";

function ProductCard({ product }) { const dispatch = useDispatch(); return (

{product.title}

{product.title}

${product.price}

<button onClick={() => dispatch(addToCart(product))} className="mt-3 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700" > Add to Cart
); }

🧠 Key Concepts

Redux Toolkit for managing cart and product data

Dynamic product rendering using map()

Search filtering with useState and array filter

Reusable components for maintainable codebase

Routing system for page navigation

🧰 Built With

React.js

Redux Toolkit

Tailwind CSS

React Router DOM

JavaScript (ES6+)

📄 License

This project is open-source and available under the MIT License.