Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/vikasipar/ecommerce-app

ezMart simulates a real-world shopping experience 🛒
https://github.com/vikasipar/ecommerce-app

fakestoreapi firebase-auth reactjs redux-toolkit tailwindcss

Last synced: 7 days ago
JSON representation

ezMart simulates a real-world shopping experience 🛒

Awesome Lists containing this project

README 

        
# Ezmart Logo    ezMart - E-commerce Application

#### click here to [ 👉 view site](https://ezmartshop.vercel.app/)



### Overview

This project is a dynamic and responsive E-commerce application built using React.js, Redux Toolkit, Tailwind CSS, and integrated with Firebase for user authentication. The application fetches product data from the FakeStoreAPI to simulate a real-world shopping experience.



### Motivation



As a fresh developer, my primary motivation for embarking on this E-commerce App project is my hands-on playground for learning and applying new technologies. Through building with React.js, Redux Toolkit, and Tailwind CSS, I aim to gain practical experience and showcase my skills in a real-world context. Integrating Firebase and FakeStoreAPI provides exposure to industry-standard tools. Beyond creating an application, this project signifies a commitment to continuous learning, enabling me to navigate challenges in state management, responsive design, and library integration. It's a journey of refining my problem-solving skills and creating a portfolio piece that represents my growth potential in the field.



### Why I Built the Project This Way

- Seamless Shopping Experience.

- Chose React.js and Redux Toolkit for their modern and efficient approach to state management and UI development.

- Implemented Tailwind CSS for a visually appealing and responsive design across various devices.

- Integrated Firebase for secure user authentication, ensuring the protection of user accounts.

- Incorporated popular libraries such as react-router-dom, react-icons, and react-toastify to add functionality and polish.



### Features



- **Intuitive Product Listing and Filtering:**

  - Seamless navigation through a well-organized product catalog.

  - Dynamic filtering options for an enhanced shopping experience.



- **Product Details Page:**

  - Individual product pages providing comprehensive details and explanations.

  - Rich multimedia content showcasing each product.



- **Seamless Cart Operations with Redux Toolkit:**

  - Efficient state management for smooth and intuitive cart interactions.

  - Add, remove, and update items in the cart seamlessly.



- **Display Number of Items in Cart:**

  - Real-time display of the total number of items in the user's shopping cart.

  - Clear and concise information for a better understanding.



- **Loading States Represented by Loading Skeletons:**

  - Enhance user experience by displaying loading skeletons during data fetching.

  - Keep users informed about ongoing processes.



- **API Integration for Displaying Products:**

  - Utilize FakeStoreAPI for realistic and dynamic product data.

  - Ensure up-to-date and accurate information for users.



- **Secure User Authentication with Firebase:**

  - Implement Firebase for a robust and secure user authentication process.

  - Safeguard user accounts with email and password login.



- **User-Friendly Toast Messages:**

  - Provide informative and user-friendly toast messages.

  - Enhance the overall user experience with clear notifications.



- **Responsive and Visually Appealing Design with Tailwind CSS:**

  - Craft a visually pleasing and responsive design for optimal user engagement.

  - Utilize the power of Tailwind CSS for consistent styling across devices.



### Technologies Used



- **React.js:** A powerful and declarative JavaScript library for building user interfaces.



- **Redux Toolkit:** A set of tools and utilities for efficient state management in React applications. [Read more](https://medium.com/@vikasipar/understanding-redux-toolkit-a-practical-guide-with-an-e-commerce-application-938cf07d38a0).

  

- **Tailwind CSS:** A highly customizable, utility-first CSS framework for building modern and responsive user interfaces.

  

- **Firebase:** A comprehensive platform for building web and mobile applications, providing authentication, real-time database, and cloud functions.

  

- **FakeStoreAPI:** An external API used for fetching realistic and dynamic product data for the E-commerce application.



#### Libraries/Packages Used



- **react-router-dom:** A routing library for handling navigation and view changes in a React application.

  

- **react-icons:** A library providing a comprehensive collection of icons for React applications.

  

- **react-toastify:** A popular library for displaying customizable toast notifications in React projects.

  

- **react-redux:** A library that connects React components to a Redux store for efficient state management.

  

- **tailwindcss:** The core library for implementing Tailwind CSS utility classes in the project.



### Getting Started

1. Clone the repository:

   ```bash

   git clone https://github.com/vikasipar/ecommerce-app.git

   ```

2. Install dependencies:

   ```bash

   npm install

   ```

3. Set up Firebase credentials.



### Running the App

```bash

npm run dev

```

Open [http://localhost:5173](http://localhost:5173) in your browser.



### Deployment

1. Build the project:

   ```bash

   npm run build

   ```

2. Deploy to your hosting platform (e.g., Vercel).



### Screenshots

Homepage Screenshot

               

Add to Cart Screenshot



### Future Enhancements

- Enhanced filters and searching

- Checkout page

- Payment gateway integration



### Contact

**- Vikas Ipar** ([email protected])



Feel free to explore the code and adapt the project to meet your needs. If you encounter any problems or have suggestions for improvement, don't hesitate to reach out.