🛒 Store-J – Modern Ecommerce

A modern, full-featured virtual store built with React, TypeScript, and TailwindCSS. Store-J provides a seamless shopping experience with real-time chat support, multiple authentication options, and secure payment processing through Tropipay.

🌟 Live Demo

Visit Store-J

📋 Table of Contents

• Features
• Technologies
• Prerequisites
• Installation
• Project Structure

✨ Key Features

🔐 Authentication & Authorization

• Email/Password Authentication - Secure user registration and login
• Google OAuth Integration - One-click sign-in with Google
• JWT Token Management - Secure session handling

🛍️ Shopping Experience

• Product Catalog - Browse products with advanced filtering and sorting
• Shopping Cart - Add, update, and remove items with real-time price calculation
• Product Reviews - Read and write product reviews with star ratings

💳 Payment & Checkout

• Tropipay Integration - Secure payment processing
• Multiple Payment Methods - Credit cards, debit cards, and digital wallets
• Order Tracking - Monitor order status in real-time

💬 Customer Support

• Real-time Chat - Live support via WebSocket connection
• Chat History - Access previous conversations
• Notification System - Real-time updates on orders and messages

👤 User Features

• User Profile - Manage personal information
• Settings Page - Customize preferences and notifications
• Order Management - View and track all orders

📱 Responsive Design

• Mobile-First Approach - Optimized for all screen sizes
• Touch-Friendly Interface - Enhanced mobile interactions
• Progressive Web App - Installable on mobile devices

🚀 Technologies Used

Frontend Stack

• React 18+ - UI library with Hooks and Concurrent Features
• TypeScript 5.0+ - Type-safe JavaScript
• TailwindCSS 3.x - Utility-first CSS framework
• Vite 5.x - Lightning-fast build tool

State Management & Data Fetching

• React Context API - Global state management
• useReducer Hook - Complex state logic
• Custom Hooks - Reusable logic components

Build & Deployment

• Cloudflare Pages - Fast global CDN deployment
• Cloudflare Workers - Edge computing for optimal performance
• Turso Database - Lightweight database

Additional Libraries

• React Router v6 - Client-side routing
• Axios - HTTP client for API requests
• Socket.io Client - Real-time WebSocket communication
• Zod - Schema validation
• Lucide React - Icon library

📦 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18.x or higher (Download)
• npm 9.x or higher (comes with Node.js) or yarn 1.22+
• Git for version control
• A modern web browser (Chrome, Firefox, Safari, Edge)

🔧 Installation

1. Clone the Repository

git clone https://github.com/FelixCodex/ecommerce-jd.git
cd ecommerce-jd

2. Install Dependencies

Using npm:

npm install

Using yarn:

yarn install

3. Start Development Server

npm run dev

The application will be available at http://localhost:5173

Authentication Flow

1. User submits credentials
2. Frontend sends POST request to /api/auth/login
3. Backend validates and returns JWT token
4. Protected routes check authentication status

📂 Project Structure

📦src
┣ 📂Api                    # API service layer
┃ ┣ 📜authService.ts      # Authentication endpoints
┃ ┣ 📜productService.ts   # Product endpoints
┃ ┣ 📜orderService.ts     # Order endpoints
┃ ┣ 📜chatService.ts      # Chat endpoints
┃ ┗ 📜axiosConfig.ts      # Axios configuration
┣ 📂components             # Reusable UI components
┃ ┣ 📂common              # Shared components (Button, Input, Modal)
┃ ┣ 📂layout              # Layout components (Header, Footer, Sidebar)
┃ ┣ 📂product             # Product-related components
┃ ┣ 📂cart                # Shopping cart components
┃ ┗ 📂chat                # Chat components
┣ 📂context                # React Context providers
┃ ┣ 📜AuthContext.tsx     # Authentication state
┃ ┣ 📜CartContext.tsx     # Shopping cart state
┃ ┗ 📜ChatContext.tsx     # Chat state
┣ 📂hooks                  # Custom React hooks
┃ ┣ 📜useAuth.ts          # Authentication hook
┃ ┣ 📜useCart.ts          # Cart management hook
┃ ┣ 📜useWebSocket.ts     # WebSocket connection hook
┃ ┗ 📜useDebounce.ts      # Debounce utility hook
┣ 📂pages                  # Page components
┃ ┣ 📜Home.tsx            # Homepage
┃ ┣ 📜ProductList.tsx     # Product catalog
┃ ┣ 📜ProductDetail.tsx   # Product details
┃ ┣ 📜Cart.tsx            # Shopping cart
┃ ┣ 📜Checkout.tsx        # Checkout process
┃ ┣ 📜Login.tsx           # Login page
┃ ┣ 📜Register.tsx        # Registration page
┃ ┣ 📜Profile.tsx         # User profile
┃ ┗ 📜Orders.tsx          # Order history
┣ 📂reducers               # State reducers
┃ ┣ 📜cartReducer.ts      # Cart state logic
┃ ┗ 📜authReducer.ts      # Auth state logic
┣ 📂routes                 # Route configuration
┃ ┣ 📜AppRouter.tsx       # Main router
┃ ┣ 📜PrivateRoute.tsx    # Protected routes
┃ ┗ 📜PublicRoute.tsx     # Public routes
┣ 📂types                  # TypeScript type definitions
┃ ┣ 📜product.types.ts    # Product types
┃ ┣ 📜user.types.ts       # User types
┃ ┣ 📜order.types.ts      # Order types
┃ ┗ 📜api.types.ts        # API response types
┣ 📂utils                  # Utility functions
┃ ┣ 📜formatters.ts       # Data formatting
┃ ┣ 📜validators.ts       # Validation functions
┃ ┗ 📜constants.ts        # App constants
┣ 📜App.tsx                # Root component
┣ 📜main.tsx               # Application entry point
┗ 📜vite-env.d.ts          # Vite type declarations

⭐ If you find this project useful, please give it a star!

Made with ❤️ by FelixCodex