E-commerce Site

An awesome E-commerce project!

View Demo . Report Bug . Request Feature

About The Project

This project is a modern e-commerce site built using a suite of powerful technologies, designed to provide a seamless shopping experience. Leveraging React.js for a dynamic user interface, Commerce.js for a robust backend, Tailwind CSS for beautiful styling, React Hook Form for efficient form handling, Firebase Authentication for secure user management, and Stripe for smooth payment processing, this site offers comprehensive e-commerce functionalities.

The site is fully responsive, ensuring a seamless shopping experience across all devices, from mobile phones to desktops. Users can browse products by category, view detailed product information, and manage their cart with ease. Secure user authentication is implemented using Firebase, ensuring that only logged-in users can access certain features, such as viewing the cart and proceeding to checkout.

The checkout process is streamlined with an address form and integrated Stripe payments, supporting both card and Google Pay options. Performance is optimized with debounce effects on frequent actions, and pagination features display 8 products at a time with a "Load More" button to fetch additional products.

Additionally, the site utilizes Swiper.js for responsive image sliders, enhancing the visual appeal of product pages. The project is designed with scalability in mind, allowing for easy future enhancements such as advanced product filtering, additional payment options, social logins, order tracking, and international delivery. These features ensure that the site not only meets current user needs but is also prepared for future growth and improvements.

🎨 Layout

💻 Technologies

• React.js: A JavaScript library for building user interfaces. It enables the creation of reusable UI components and efficient rendering of dynamic content.
• Commerce.js: A headless commerce API that provides powerful backend functionalities for managing products, categories, carts, and checkout processes.
• Tailwind CSS: A utility-first CSS framework that offers a highly customizable and responsive design system, making it easy to style components.
• React Hook Form: A library for handling forms in React, providing simple and performant form validation and state management.
• Firebase Authentication: A service for user authentication that supports various sign-in methods, ensuring secure and reliable user management.
• Stripe: A payment processing platform that enables secure and seamless transactions, supporting multiple payment methods including card and Google Pay.
• Swiper.js: A modern mobile touch slider with hardware-accelerated transitions and a rich set of features, used for creating responsive image sliders and carousels.

🚀 Getting started

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

Prerequisites

Here you list all prerequisites necessary for running your project. For example:

Ensure you have Node.js and npm (or yarn) installed.

• Installation :

1. Clone the repository:

git clone  https://github.com/harjyoti12/ecommerce-site.git

cd ecommerce-site

2. Install dependencies:

  npm install

or

npm yarn

3. Set up Firebase and Stripe:

Configure Firebase Authentication in the Firebase Console.

Obtain Stripe API keys from the Stripe Dashboard.

🛠️ Cloning

To get started with the project, you'll first need to clone the repository to your local machine. Here's how you can do it:

1. Open your terminal.

2.Clone the repository:

git clone https://github.com/harjyoti12/ecommerce-site.git

3.Navigate into the project directory:

cd ecommerce-site

Roadmap

• Advanced Product Filtering:
• Expanded Payment Options:
• Additional Login Options:
• Order Tracking:
• International Delivery:

See the open issues for a full list of proposed features (and known issues).

📫 Contribute

• We welcome contributions to improve the project! To contribute, please follow these guidelines:

1. Fork the Repository:

Click the "Fork" button on the top right corner of the repository page on GitHub to create your own copy of the repository.

2. Clone Your Fork:

git clone https://github.com/harjyoti12/ecommerce-site.git

cd ecommerce-site

3.Create a New Branch:

• It's best to create a new branch for your changes.

git checkout -b feature/your-feature-name

4. Make Your Changes:

• Implement your changes or additions to the project. Be sure to test your changes thoroughly.

5. Commit Your Changes:

git add .
git commit -m "Add a descriptive message about your changes"

6. Push to Your Fork:

git push origin feature/your-feature-name

7. Create a Pull Request:

• Go to the original repository on GitHub and click "New Pull Request."
• Select your branch and provide a detailed description of the changes you made.
• Submit the pull request for review.

🤝 Collaborators

Special thank you for all people that contributed for this project.

Harjyoti Kalita