CartConnect

CartConnect is an e-commerce shopping cart application built with React-Redux.

Table of Contents

• Demo
• Features
• Technologies Used
• Getting Started
• Available Scripts
• How It Works
• Future Improvements
• Challenges and Learnings

Demo

You can view a live demo of the project CartConnect.

Features

• Browse products from a sample store.
• Add or remove products from the shopping cart.
• View cart summary and total amount.
• Responsive design for optimal viewing on various devices.

Technologies Used

• React (for building the UI)
• Redux Toolkit (for state management)
• Tailwind CSS (for styling)
• Fake Store API (for fetching product data)

Getting Started

Follow these steps to run the project locally:

Prerequisites

Ensure that Node.js and npm are installed on your machine. If not, you can download them from here.

Installation

1. Clone the repository:

   git clone https://github.com/Jiteshiyu/CartConnect.git
   cd CartConnect

2. Install the dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:3000 to see the app in action.

Available Scripts

• npm run dev: Start the development server.
• npm run build: Build the app for production.
• npm run preview: Preview the production build locally.

How It Works

The CartConnect app uses an external API to fetch and display product data.

1. Fetching Product Data: The app sends a GET request to the Fake Store API, retrieving data such as product names, prices, and images.
2. Cart Functionality: Users can add products to their cart and remove them as needed.
3. Displaying Data: The app shows a list of products and allows users to manage their shopping cart.
4. Responsive Design: The layout adjusts for different screen sizes using Tailwind CSS.

Future Improvements

• Add user authentication for a personalized shopping experience.
• Implement a search functionality to find products more easily.
• Improve the user interface with additional animations and graphics.
• Add error handling for failed API requests.

Challenges and Learnings

• State Management: Utilizing Redux Toolkit for state management helped streamline the data flow throughout the app.
• API Integration: Integrating the Fake Store API required handling asynchronous requests effectively.
• Responsive Design: Ensuring a responsive layout across devices required careful use of Tailwind CSS utilities.

Support

If you liked the project, give it a 🌟 on the repo!

Connect with me: