VirtuCart - Ecommerce Platform

Table of Contents

1. Overview
2. Features
3. Screenshots
4. How to Use
5. Project Structure
6. Technologies Used
7. Testing Credentials

Overview

VirtuCart is a React-based ecommerce platform that utilizes technologies like Redux, Context, Tailwind CSS, Formik, Yup, SweetAlert, and the FakeStoreAPI. It offers a comprehensive shopping experience with features such as user authentication, product listing, detailed product information, shopping cart functionality, and more.

Features

• Product Listing: Display a list of products available in the store, including images, titles, prices, and descriptions.

• Product Details: Show detailed information about each product, including specifications and customer reviews.

• User Authentication: Allow users to create accounts, log in, and log out. Keep track of user-specific information, such as order history.

• Shopping Cart: Enable users to add products to their shopping cart. Display the contents of the shopping cart with quantities and prices.

• Checkout Process: Guide users through a seamless checkout process. Collect shipping information and provide order summaries.

• Search and Filtering: Implement search functionality for users to find specific products. Provide filters based on categories, prices, and other criteria.

• Responsive Design: Ensure the application is accessible and user-friendly across various devices.

• Wishlist: Allow users to add products to a wishlist for future reference.

• User Profile: Display user-specific information and order history.

• Form Validation: Implement form validation using Formik and Yup for a seamless user experience.

• Alerts: Integrate SweetAlert for user-friendly alerts and notifications.

Screenshots

Home Page

Product Listing

Filters

Product Details

Add to cart

Cart Page

Checkout

Profile

Light Mode

How to Use

1. Clone the repository to your local machine.

   git clone https://github.com/utkarshgupta04092003/ecommerce-using-fakestoreapi.git

2. Navigate to the project directory.

   cd ecommerce-using-fakestoreapi

3. Install dependencies.

   npm install

4. Start the development server.

   npm run dev

5. Open your browser and visit http://localhost:5173 to explore VirtuCart.

Project Structure

• src/components: Contains React components for different sections of the application.
• src/context: Manages dark mode features using React Context.
• src/redux: Implements state management with Redux, including slices for cart and wishlist functionality.
• src/utils: Includes utility functions and constants.
• src/forms: Integrates Formik and Yup for form validation.
• src/alerts: Utilizes SweetAlert for user-friendly alerts.
• src/App.js: Main application component defining the structure and routing.

Technologies Used

• React
• Redux
• Context API
• Tailwind CSS
• FakeStoreAPI
• React Router DOM
• Formik
• Yup
• SweetAlert

Testing Credentials

To test the website, use the following credentials:

• Email: don@gmail.com
• Password: ewedon
• Or
• Email: morrison@gmail.com
• Password: 83r5^_

Feel free to explore VirtuCart, an ecommerce platform offering a delightful shopping experience!