Thrive Loom E-Commerce MVP

Welcome to the Thrive Loom E-Commerce MVP! This project is a minimal viable product (MVP) for a basic e-commerce platform. It showcases essential features such as product listing, shopping cart functionality, and a simplified checkout process. The frontend is developed using React, with data stored locally for simplicity.

Table of Contents

• Project Overview
• Core Features
• Project Structure
• Installation
• Usage
• Technologies Used
• Screenshots
• License
• Contact

Project Overview

Thrive Loom E-Commerce MVP focuses on creating a user-friendly shopping experience with core e-commerce functionalities. This project is perfect for demonstrating your skills in React and front-end development.

Core Features

• Product Listing and Detail Pages: Display a list of products and detailed views of each product.
• Shopping Cart Functionality: Manage cart state, allowing users to add, update, and remove items.
• Simplified Checkout Process: Capture user details and display a confirmation message (no actual payment processing).
• Local Storage for Data Persistence: Persist cart data and user details using local storage.

Project Structure

• Setup and Environment: Initialized the project with Create React App and organized the project directory.
• Product Listing: Created a JSON file for product data, implemented ProductList and ProductDetail components.
• Shopping Cart: Implemented a ShoppingCart component, managed cart state, and persisted data.
• Checkout Process: Created a Checkout component with form validation and a confirmation message.

Installation

Step 1: Setup and Environment

1. Clone the repo:

   • Clone the repository from GitHub:

     git clone https://github.com/tmstani23/ecommerce_project_mvp

2. Navigate to the project folder:

   • Change into the project directory:

     cd ecommerce_project_mvp

3. Install Dependencies:

   • Install all project dependencies:

     npm install

Step 2: Running the App

1. Run the project:
   • Start the development server:

     npm start

Usage

Open your browser and navigate to http://localhost:3000 to view the application. Browse products, add items to the cart, and proceed to checkout.

Technologies Used

• React: For building the user interface.
• Tailwind CSS: For styling the application.
• React Router: For handling routing.
• Local Storage: For data persistence.

Screenshots

Here are some screenshots of the application:

Home Page

Product List

Shopping Cart

Checkout Page

License

This project is licensed under the MIT License.

Contact

Created by Tim Stanislav as an MVP for demonstration purposes.

Feel free to contact me at:

• Email: [email protected]
• LinkedIn: LinkedIn
• Twitter: X (Twitter)