eCart is a modern shopping website UI built using React and Redux. It showcases a clean and responsive e-commerce interface that includes features like product listings, shopping cart, and product details.
- Features
- Technologies Used
- Installation
- Usage
- Project Structure
- Redux State Management
- Screenshots
- Contributing
- License
- Product Listings: Display available products with images, prices, and descriptions.
- Shopping Cart: Add/remove items from the cart and update the total price.
- Product Details: View detailed information about individual products.
- Responsive Design: Optimized for desktop, tablet, and mobile.
- Navigation: Smooth navigation between product pages, cart, and home.
- React: Front-end JavaScript library.
- Redux: State management library.
- React-Redux: Integration between React and Redux.
- CSS/Tailwind CSS: For styling the UI.
- React Router: Client-side routing for navigating between pages.
Follow these steps to set up and run the project locally:
- Clone the repository:
git clone https://github.com/Sahiljain0/Ecomm-p.git
└── package.json
Here’s the full README.md content in code format, complete with sections on installation, usage, and placeholder images for screenshots. You can copy and paste this directly into your project:
markdown Copy code
eCart is a modern shopping website UI built using React and Redux. It showcases a clean and responsive e-commerce interface that includes features like product listings, shopping cart, and product details.
- Features
- Technologies Used
- Installation
- Usage
- Project Structure
- Redux State Management
- Screenshots
- Contributing
- License
- Product Listings: Display available products with images, prices, and descriptions.
- Shopping Cart: Add/remove items from the cart and update the total price.
- Product Details: View detailed information about individual products.
- Responsive Design: Optimized for desktop, tablet, and mobile.
- Navigation: Smooth navigation between product pages, cart, and home.
- React: Front-end JavaScript library.
- Redux: State management library.
- React-Redux: Integration between React and Redux.
- CSS/Tailwind CSS: For styling the UI.
- React Router: Client-side routing for navigating between pages.
Follow these steps to set up and run the project locally:
bash Copy code cd ecart Install the dependencies:
bash Copy code npm install Run the development server:
bash Copy code npm start Open your browser and go to:
bash Copy code http://localhost:3000 Usage Running the App Locally After running npm start, the development server will be launched. Open http://localhost:3000 in your browser to view the app. The page will reload whenever you make edits to the source code.
Building for Production To create an optimized production build of the app, run:
bash Copy code npm run build The optimized production files will be located in the build/ folder, ready for deployment.
components/: Contains reusable components like Cart, Header, and Product. pages/: Contains page components such as Home, ProductPage, and CartPage. redux/: Holds Redux-related files such as actions, reducers, and the store configuration.
The project uses Redux for centralized state management. Here's an overview of how Redux is structured:
Actions: Define actions for adding/removing products to/from the cart. Reducers: Handle the app state transitions based on actions. Store: Holds the global app state.