Noqta - Multi-Vendor Marketplace Platform

A production-ready, scalable, multi-vendor marketplace built with modern web technologies to empower small sellers and build trust in e-commerce.

---

✨ Overview

Noqta is not just an e-commerce website - it's a smart multi-vendor marketplace platform focused on:

• Building trust between buyers and sellers
• Smart discovery with advanced search and recommendations
• Empowering small sellers with powerful business tools
• Delivering high-quality buyer experience with intuitive, accessible UX

---

🖼️ Screenshots Gallery

🏠 Home	☀️ Home (light)	🌍 Home (AR)	🔍 Search	📂 Categories	❤️ Favorites
Main marketplace	Light mode view	Arabic RTL support	Product search	Browse categories	Saved items
🔐 Login	📝 Register	🛒 Cart	📦 Orders	📄 Order Details	📊 Dashboard
User login	New account	Shopping cart	Order management	Order details view	Seller dashboard
🏬 Vendors	📋 Products	👥 Users	👤 Portfolio	🎯 Platform Features
Vendors list	Product management	User management	User portfolio	Multi-vendor marketplace Role-based dashboards Arabic/English support Dark/Light themes Advanced product search Order tracking system

---

🛠️ Tech Stack

Category	Tools & Libraries
Core Framework	React 19.2.0, TypeScript 5.9.3, Vite 7.2.4
Styling	Tailwind CSS 4.1.18, shadcn/ui, Radix UI Primitives
State Management	Zustand 5.0.9 (Client State), TanStack Query 5.90.12 (Server State)
Routing	React Router DOM 7.11.0
UI Components	shadcn/ui, Radix UI, Lucide React Icons
Internationalization	i18next 24.0.0, react-i18next 15.0.0
Utilities	date-fns 4.1.0, clsx, tailwind-merge, class-variance-authority
Development	ESLint 9.39.1, TypeScript ESLint

---

📁 Project Structure

src/
├── app/                    # Application entry point
├── components/
│   ├── checkout/           # Checkout related components
│   ├── common/             # Shared components (ProductCard, etc.)
│   ├── layouts/            # Page layouts (MainLayout)
│   ├── states/             # Empty/error/loading states
│   ├── ui/                 # shadcn/ui components
│   └── vendors/            # Vendor specific components
├── hooks/                  # Custom React hooks
├── i18n/                   # Internationalization files
├── lib/                    # Utilities and helpers
├── pages/                  # Page components
│   ├── auth/               # Login, Register
│   ├── buyer/              # Buyer pages
│   ├── seller/             # Seller dashboard
│   ├── admin/              # Admin panel
│   └── vendors/            # Vendors pages
├── services/               # API services
├── stores/                 # Zustand stores
├── style/                  # Style files
├── types/                  # TypeScript types
└── ...                     # Other files

---

🎯 Core Features

👥 Multi-Role System

Role	Features
Guest	Browse products, view details, search
Buyer	Cart management, favorites, order tracking, smart search
Seller	Product management, analytics dashboard, sales reports
Admin	Platform oversight, user management, category control

🛒 Smart Shopping Experience

• Seller-grouped cart - Items organized by vendor
• Smart search - Intent-aware with typo correction
• Recommendations - Personalized product suggestions
• Wishlist - Persistent favorites storage

📊 Seller Empowerment

• Dashboard analytics - Sales insights and trends
• Product management - Full CRUD operations
• Order processing - Streamlined fulfillment workflow
• Pricing tools - Coupon and discount management

🌍 International & Accessibility

• Bilingual support - Arabic (RTL) & English (LTR)
• Theme switching - Light/Dark mode with system preference
• Accessible components - Built on Radix UI primitives
• Responsive design - Mobile-first approach

---

🔐 Authentication & Security

Feature	Implementation
Role-based access	Protected routes for each user type
Persistent sessions	LocalStorage with Zustand
Test accounts	Pre-configured buyer, seller, admin roles
Secure routing	React Router with auth guards

Test Accounts

• Buyer: buyer@noqta.com / password
• Seller: seller@noqta.com / password
• Admin: admin@noqta.com / password

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/Maher-Elmair/Noqta-Marketplace.git
cd noqta

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

---

🎨 Design System

Feature	Description
Theme Support	Light, Dark, and System preference
RTL/LTR	Full bidirectional text support
Component Library	shadcn/ui with Radix UI primitives
Icons	Lucide React icon set
Animations	Smooth transitions and micro-interactions

---

📈 Project Roadmap

Phase	Features
Phase 1	✅ Core marketplace functionality ✅ Multi-role system ✅ Basic analytics
Phase 2	🔄 Real backend integration 🔄 Payment gateway 🔄 Advanced recommendations
Phase 3	📅 Real-time notifications 📅 Advanced analytics dashboard 📅 Mobile app (React Native)
Future	🌟 PWA support 🌟 AI-powered insights 🌟 Social features

---

👨‍💻 Developer

Maher Elmair

• 📫 maher.elmair.dev@gmail.com
• 🔗 LinkedIn
• ✖️ X (Twitter)
• ❤️ Made with passion by Maher Elmair

🔗 Live Preview

🚀 Try it now on Vercel:

• 🌍 View Live Project

🙌 Thank You

If you like this project, please ⭐ the repository!
Feel free to open issues or pull requests for improvements 🙏

Noqta - Where trusted commerce meets community