Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mahmoudsaeedua74/e-commorce

This is a fully responsive E-Commerce website built with modern web technologies. The project includes essential features for an online shopping platform and delivers a seamless user experience across all devices.
https://github.com/mahmoudsaeedua74/e-commorce

query react react-hooks react-router reactjs tailwind-css tailwindcss tanstack-react-query usequery

Last synced: about 1 month ago
JSON representation

This is a fully responsive E-Commerce website built with modern web technologies. The project includes essential features for an online shopping platform and delivers a seamless user experience across all devices.

Awesome Lists containing this project

README

        

# E-Commerce Website

## Project Overview
This is a fully responsive E-Commerce website built with modern web technologies. The project includes essential features for an online shopping platform and delivers a seamless user experience across all devices.

## Features
- **User Authentication**: Includes Login, Signup, and Reset Password functionalities.
- **Wishlist**: Allows users to save their favorite products.
- **Payment System**: Integrated to handle user payments.
- **Shopping Cart**: Users can add, edit, and remove items in their cart.
- **Order Management**: Displays all user orders.
- **Product Listings**: Showcases products with sorting and filtering options.
- **Responsive Design**: Ensures compatibility across all screen sizes.

## Technologies Used
- **React**: To build the user interface.
- **Tailwind CSS**: For styling and responsive design.
- **TanStack Query**: For efficient data fetching and state management.
- **Context API**: For managing application state globally.

## Installation and Setup
1. Clone the repository:
```bash
git clone
```
2. Navigate to the project directory:
```bash
cd ecommerce-website
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm start
```
5. Open the application in your browser at `http://localhost:3000`.

## Folder Structure
```
src/
├── components/ # Reusable components
├── pages/ # Page components
├── context/ # Context API for state management
├── styles/ # Tailwind CSS styles
└── index.js # Entry point
```

## How It Works
1. **Authentication**: Users can register, log in, or reset their password.
2. **Product Management**: Products are displayed with sorting and filtering options for better browsing.
3. **Shopping Flow**:
- Users can add products to their cart.
- The cart allows for item updates, and the total price is dynamically calculated.
- Payment integration ensures a smooth checkout experience.
4. **Wishlist**: Users can save and manage favorite items.
5. **Orders**: Displays a history of all user orders.

## Screenshots

![Screenshot 2024-12-14 215810](https://github.com/user-attachments/assets/68280885-57f6-4705-9244-5f16f4847003)

![Screenshot 2024-12-14 215748](https://github.com/user-attachments/assets/62d70b60-16e3-47f6-9b4a-9eb9ea9b52dc)
![Screenshot 2024-12-14 215702](https://github.com/user-attachments/assets/fd5784db-762d-455f-ac71-20fe9f90286a)

## Contributing
Contributions are welcome! If you'd like to contribute, follow these steps:
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature-name
```
3. Make your changes and commit them:
```bash
git commit -m "Add feature-name"
```
4. Push to your branch:
```bash
git push origin feature-name
```
5. Submit a pull request.

## License
This project is licensed under the MIT License. See the LICENSE file for more details.

---

Feel free to reach out with any questions or feedback. Thank you for checking out my project!

# 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