Skip to content

MMansy19/E-Commerce-Website

Repository files navigation

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.

Home

Table of Contents

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:

    git clone https://github.com/MMansy19/E-Commerce-Website.git
  2. Navigate to the project directory:

    cd E-Commerce-Website
  3. Install the project dependencies:

    npm install
  4. Install i18next for internationalization:

    npm install i18next
  5. Install react-i18next for React integration with i18next:

    npm install react-i18next
  6. Install flowbite-react for UI components:

    npm install flowbite-react
  7. Start the development server:

    npm run dev

Screenshots

  1. E-Commerce HomePage

E-Commerce HomePage

2. Sign Up

Sign Up

3. Log In

Log In

4. Product Details page

Product Details page

5. Wishlist

Wishlist

6. About

About

7. Cart

Cart

8. CheckOut

CheckOut

9. Contact

Contact

10. Account

Account

Contact

Releases

No releases published

Packages

No packages published

Languages