# 🛍️ Shop Project A modern e-commerce web application built with: - **Vite + React + TypeScript** - **Tailwind CSS** - **shadcn/ui** - **Supabase backend** - **Real-time notifications** - **Payment flow with OTP verification** - **Telegram integration (optional)** --- ## 🚀 Table of Contents - [Project Overview](#project-overview) - [Features](#features) - [Tech Stack](#tech-stack) - [Getting Started](#getting-started) - [Environment Variables](#environment-variables) - [Run Locally](#run-locally) - [Database](#database) - [Deployment](#deployment) - [Telegram Integration](#telegram-integration) - [Folder Structure](#folder-structure) - [Contributing](#contributing) - [License](#license) --- ## 📌 Project Overview This is a scalable e-commerce storefront with: - Product listings - Cart & checkout - Payment verification via OTP - Real-time notifications - Seller & buyer dashboards - Admin controls --- ## ✅ Features ### Customer Features - Browse products - Add to cart - Checkout with card + OTP verification - Receive order notifications - View order history ### Admin Features - Manage products - Manage orders - View sales analytics ### Security Features - OTP verification - Card tokenization (recommended) - Minimal sensitive data storage - Optional Telegram notifications for admin --- ## 🧰 Tech Stack | Layer | Technology | |------|------------| | Frontend | React + TypeScript + Vite | | UI | Tailwind CSS + shadcn/ui | | Backend | Supabase (Auth + Database + Functions) | | Real-time | Supabase Realtime | | Notifications | Supabase Notifications | | Payment | OTP verification flow | --- ## ⚙️ Getting Started ### Prerequisites Install Node.js (recommended via nvm): ```bash nvm install --lts ``` ### Clone the project ```bash git clone cd ``` ### Install dependencies ```bash npm install ``` --- ## 🧩 Environment Variables Create a `.env` file at the root: ``` VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_service_role_key TELEGRAM_BOT_TOKEN=your_bot_token TELEGRAM_CHAT_ID=your_chat_id ``` > ⚠️ Never commit `.env` to GitHub. --- ## ▶️ Run Locally ```bash npm run dev ``` Open: ``` http://localhost:5173 ``` --- ## 🗃️ Database Setup (Supabase) Create tables: ### `payment_transactions` | Column | Type | |--------|------| | id | uuid | | user_id | uuid | | order_id | uuid | | amount | numeric | | currency | text | | card_last_four | text | | card_brand | text | | status | text | | otp_verified | boolean | | metadata | jsonb | ### `notifications` | Column | Type | |--------|------| | id | uuid | | user_id | uuid | | type | text | | title | text | | message | text | | data | jsonb | | read | boolean | | created_at | timestamptz | --- ## ☁️ Deployment ### Build ```bash npm run build ``` ### Preview ```bash npm run preview ``` ### Recommended Hosting - Vercel - Netlify - Cloudflare Pages --- ## 📢 Telegram Integration (Optional) If you want payment notifications on Telegram: 1. Create bot → get token 2. Get your chat id 3. Add to `.env` Example function: ```ts await supabase.functions.invoke('send-telegram-notification', { body: { ... } }); ``` --- ## 📁 Folder Structure ``` src/ ├─ components/ │ ├─ payment/ │ ├─ notifications/ │ ├─ ui/ ├─ pages/ │ ├─ buyer/ │ ├─ seller/ │ ├─ admin/ ├─ integrations/ │ └─ supabase/ ├─ hooks/ │ └─ useAuth.ts └─ styles/ ``` --- ## 🤝 Contributing 1. Fork the repo 2. Create a feature branch 3. Make your changes 4. Submit a PR --- ## 🧾 License MIT License # bananini