E-commerce Platform is a comprehensive web application that allows users to create, manage, and personalize their online stores. Built with cutting-edge technologies like React, Supabase, Redux Toolkit, and React Query, it delivers high performance, responsive design, and a seamless user experience.

This platform is packed with features for store owners and customers, such as real-time chat, product inventory charts, and interactive product reviews.

• Create, edit, and delete your online store.
• Add, edit, and remove products.
• Visualize inventory data using interactive charts for better management.

• Comment on products with the ability to reply to comments.
• Rate products and view aggregate ratings.

• Real-time messaging between store owners, clients, or other users.
• User Activity Status: View the online/offline status of the user you're chatting with.

• Login/logout via email or Google authentication.
• Update user details, including username, password, and avatar.

• Global State: Managed with Redux Toolkit to handle Supabase logic seamlessly.
• Remote State: Managed with React Query for efficient caching and real-time updates.
• Custom hooks for modular and reusable logic.

• Fully responsive design using Tailwind CSS.
• Engaging animations powered by Framer Motion for smooth transitions.

• Modern and Secure: Provides a seamless and safe checkout experience.
• Real-Time Updates: Automatically reduces inventory stock after successful purchases.
• User-Friendly Design: Ensures an intuitive and smooth payment process.

• React.js - Frontend library for building user interfaces.
• Vite - High-performance build tool for fast development.

• Supabase - Backend-as-a-service for authentication, real-time database, and storage.
• Redux Toolkit - Centralized global state management.
• React Query - Efficient remote state management with data caching.

• Tailwind CSS - Modern utility-first styling framework.
• Framer Motion - For smooth and dynamic animations.
• MUI (Material UI) - Prebuilt components for enhanced UI design.

• React Hook Form - Managing form state and validation.
• Chart.js - Interactive inventory management charts.
• Swiper - Advanced slider for product carousels.

• ESLint - Linting tool for maintaining code quality.
• Prettier - Ensures consistent code formatting.
• Vite Plugin ESLint - Integrates ESLint directly with Vite.

🗄️ Database Structure & Optimizations Our platform leverages a Many-to-Many relationship and advanced indexing techniques to ensure optimal performance in critical features such as user favorites and the custom search engine.

🔗 Many-to-Many Relationship: User Favorites Implemented via a pivot table (user_favorites) in Supabase to efficiently associate users with their favorite products. Enables users to seamlessly add, remove, and retrieve favorite products in real-time. Uses foreign key constraints to maintain data integrity and ensure efficient lookups. ⚡ Search Engine Indexing for Performance Custom full-text search engine optimized with indexes on key fields (product_name, description, category, etc.). GIN (Generalized Inverted Index) and trigram indexes applied for fast, fuzzy search matching, improving user experience with instant search results. Enhances query speed, reducing response time for product searches even with a large dataset.

src/
├── assets/          # Static assets (images, icons, fonts, etc.)
├── components/      # Reusable UI components
├── features/        # Feature-specific logic (e.g., Redux slices, React Query hooks)
├── pages/           # Complete pages (e.g., Dashboard, Login, Product Listing)
├── services/        # API handling and Supabase integration
├── utils/           # Utility functions and helpers
├── App.tsx          # Main application entry point
└── main.tsx         # Starting point with Vite integration and rendering

To set up the project locally, follow these steps:

1. Clone the repository:

   git clone https:/github.com/bakerAllozi/e-commerce-react-Final-version-
   

2. Navigate to the project directory:

   cd ecommerce-platform

3. Install dependencies:

   npm install

4. Configure Environment Variables:
   Create a .env file and add the following keys:

   VITE_SUPABASE_URL=your-supabase-url
   VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
   

5. Run the development server:

   npm run dev

• Dashboard with Inventory Charts:
  

  • more about store
    

• Product Comments and Replies:
  

• Real-Time Chat:
  

• baker Allozi - GitHub Profile