E-Commerce-Template — React 电商模板

SHA-256: 677bd4d7ff8655caf865ab2a21f4ea7fc8b6fbb112b65a5483b3f0fc4bc52e46

2026-10-12T23:59:27.504Z

# E-Commerce Website 🙌

The E-commerce website is a full-stack application built using React with Vite as the bundler. It incorporates Tailwind CSS for styling and Material UI for components, offering a sleek and modern user interface. The platform provides essential functionalities such as signup and login for users to access their accounts, wishlist and cart pages for managing items, search functionality to easily find products, and a profile section for personalization. Furthermore, it includes checkout processes with support for coupons and purchasing, ensuring a seamless shopping experience for customers.


  <img  src="public/assets/Screenshots/0.png" alt="Home">

## [🌟Live Website🌟](https://e-commerce-template-tau.vercel.app/)

## [🌟Design on Figma 🌟](https://www.figma.com/file/yn2DFQJla0UiSMvomFsqwT/E-Commerce-Website-%D9%90Almdrasa?type=design&mode=design&t=fqPRRAQH5lDJGmoY-0)

## Table of Contents

- [Features](#features)
- [Technologies Used](#technologies-used)
- [Set Up ](#set-up)
- [Screenshots](#screenshots)
- [Contact](#contact)



## Featured Skills

1. **React**: Utilized for building the frontend interface, providing dynamic and interactive components.
2. **Vite**: Employed as the build tool to optimize and bundle the project for production.
3. **Tailwind CSS**: Integrated for responsive and customizable styling, enhancing the visual aesthetics of the website.
4. **Material UI**: Leveraged for pre-designed components and UI elements, facilitating rapid development and maintaining consistency in design.
5. **Full-stack Development**: Implemented both frontend and backend functionalities, ensuring end-to-end functionality and user experience.
6. **User Authentication**: Implemented signup and login features to authenticate users and secure their accounts.
7. **Wishlist and Cart Management**: Developed functionalities to add, remove, and update items in the wishlist and cart, enhancing user engagement and convenience.
8. **Search Functionality**: Implemented a search feature to enable users to find products efficiently based on their preferences.
9. **Checkout Process**: Designed a seamless checkout process with support for applying coupons and completing purchases, streamlining the buying journey for users.
10. **Dark/Light Theme**: Implementing a dark/light theme toggle for a website involves adding CSS for both themes and JavaScript to handle the switching logic 

## Technologies Used

- **React**: JavaScript library for building user interfaces.
- **Vite**: Fast, modern build tooling for frontend development.
- **Tailwind CSS**: Utility-first CSS framework for rapid UI development.
- **Material-UI**: React components for faster and easier web development.
- **Custom Hooks**: Utilized custom React hooks for managing state and logic efficiently.
- **Git** (for version control)
- **Responsive For Mobile**

## Set Up

To set up and run the project locally, follow these steps:

1. Clone the repository to your local machine:

   ```bash
   git clone (https://github.com/AbdelrahmanAyman48/E-Commerce-Template/tree/main)
   ```

2. Navigate to the project directory:

   ```bash
   cd E-Commerce-Website
   ```

3. Install the project dependencies:

   ```bash
   npm install
   ```

4. Install `i18next` for internationalization:

   ```bash
   npm install i18next
   ```

5. Install `react-i18next` for React integration with i18next:

   ```bash
   npm install react-i18next
   ```

6. Install `flowbite-react` for UI components:

   ```bash
   npm install flowbite-react
   ```

7. Start the development server:
   ```bash
   npm run dev
   ```


## Screenshots
1. E-Commerce HomePage
  <img  src="public/assets/Screenshots/E-Commerce HomePage.jpg" alt="E-Commerce HomePage">
2. Sign Up
  <img  src="public/assets/Screenshots/Sign Up.jpg" alt="Sign Up">
3. Log In
  <img  src="public/assets/Screenshots/Log In.jpg" alt="Log In">
4. Product Details page
  <img  src="public/assets/Screenshots/Product Details page.jpg" alt="Product Details page">
5. Wishlist
  <img  src="public/assets/Screenshots/Wishlist.jpg" alt="Wishlist">
6. About
  <img  src="public/assets/Screenshots/About.jpg" alt="About">
7. Cart
  <img  src="public/assets/Screenshots/Cart.jpg" alt="Cart">
8. CheckOut
  <img  src="public/assets/Screenshots/CheckOut.jpg" alt="CheckOut">
9. Contact
  <img  src="public/assets/Screenshots/Contact.jpg" alt="Contact">
10. Account
  <img  src="public/assets/Screenshots/Account.jpg" alt="Account">




## Contact

- [Author](https://github.com/AbdelrahmanAyman48)
<!-- - [Website](https://mahmoud-mansy-portfolio.netlify.app/) -->
- [Email](mailto:[email protected])
- [LinkedIn](https://www.linkedin.com/in/abdelrahman-ayman-290674252/)

## Useful Repositories

```bash
   git clone (https://github.com/MMansy19/E-Commerce-Website)
   ```


# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
=======
# E-Commerce-Template
E-Commerce-Template
>>>>>>> 0af8b48809d88f16bdd22b57c84c99da6a8a0d22