Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mmansy19/e-commerce-website
The E-commerce website is a full-stack application built using React, Firebase, Tailwind CSS and Material UI
https://github.com/mmansy19/e-commerce-website
figma firebase material-ui react-components react-hooks react-router react-router-dom reactjs responsive-web-design rest-api tailwind-css tailwindcss
Last synced: 2 months ago
JSON representation
The E-commerce website is a full-stack application built using React, Firebase, Tailwind CSS and Material UI
- Host: GitHub
- URL: https://github.com/mmansy19/e-commerce-website
- Owner: MMansy19
- Created: 2024-04-22T21:49:27.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-31T12:28:50.000Z (8 months ago)
- Last Synced: 2024-05-31T13:43:28.761Z (8 months ago)
- Topics: figma, firebase, material-ui, react-components, react-hooks, react-router, react-router-dom, reactjs, responsive-web-design, rest-api, tailwind-css, tailwindcss
- Language: JavaScript
- Homepage: https://e-commerce-mansy.vercel.app
- Size: 74.9 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
## [🌟Live Website🌟](https://e-commerce-mansy.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.
## 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/MMansy19/E-Commerce-Website.git
```
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
2. Sign Up
3. Log In
4. Product Details page
5. Wishlist
6. About
7. Cart
8. CheckOut
9. Contact
10. Account
## Contact
- [Author](https://github.com/MMansy19)
- [Website](https://mahmoud-mansy-portfolio.netlify.app/)
- [Email](mailto:[email protected])
- [LinkedIn](https://www.linkedin.com/in/mahmoud-mansy-a189a5232)