🛒 BachatBzr – E-Commerce Platform

BachatBzr is a full-stack e-commerce platform designed for real-time product management, secure transactions, and automated order processing.
Built with Next.js and powered by Supabase, it delivers a seamless shopping experience for customers and powerful admin tools for store owners.

🔗 Website Preview: https://bachatbzr.com

---

🚀 Tech Stack

Frontend

• ⚡ Next.js 14 – Full-stack framework for SSR & API routes
• 🎨 Shadcn UI – Modern, accessible component library
• 💠 Tailwind CSS – Utility-first styling for responsive layouts
• 🖌 MUI & Radix UI – UI enhancements & accessibility tools
• 🗂 Redux Toolkit – Predictable state management
• 🌐 Axios – Smooth API communication
• 🔄 SWR – Data fetching with caching & revalidation

Backend

• 🖥 Next.js API Routes – Backend logic in the same codebase
• 🗄 Supabase – Database, authentication & realtime features
• 📧 Nodemailer – Email notifications & verification
• 🖼 Cloudinary – Image upload & optimization
• 💳 Stripe – Secure payment processing
• 📦 Leopard Courier API – Automated booking, packaging & shipment tracking

Database

• 🗃 Supabase PostgreSQL – Scalable, realtime database

Other Tools

@emotion/react, @emotion/styled, keen-slider, swiper,
react-hook-form, react-toastify, sonner, react-dropzone, react-easy-crop,
fast-xml-parser, jszip, wowjs

---

✨ Features

🛍 Customer

• Browse, search & filter products
• Real-time product updates (sold items disappear instantly)
• Add to cart & checkout
• Stripe-powered secure payments
• Login via Email or Google
• Track orders & shipments
• View load sheet & parcel status

🛠 Admin

• Add, update, delete & view products
• Download product details
• Manage users – ban/unban & change roles (user ↔ admin)
• View & manage orders in realtime
• Update shipping status
• Leopard Courier integration for booking & tracking
• Automatic packing & shipment creation
• Role-based access control

📦 Order Management

• Realtime order updates via Supabase subscriptions
• Auto courier integration for fulfillment
• Bulk load sheet generation

🔐 Authentication & Security

• Supabase Email & Google login
• Role-based permissions
• Secured API endpoints
• Cloudinary-powered secure image handling

---

🗂 Project Structure

BachatBzr/
│
├── pages/                # Next.js pages & API routes
├── components/           # UI components (Shadcn, custom)
├── styles/               # Tailwind & global styles
├── lib/                  # API helpers, utilities
├── redux/                # Redux Toolkit slices
├── public/               # Static assets
├── .env.example          # Environment variables sample
└── README.md             # Project documentation

---

⚙️ Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_API_URL=

SUPABASE__URL=
SUPABASE_KEY=
SUPABASE_SERVICE_ROLE_KEY=
SUPABASE_ANON_KEY=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
NEXT_PUBLIC_SUPABASE_URL=

CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=

Email_to_send_Message=
NODEMAILER_EMAIL=
NODEMAILER_PASSWORD=

LEOPARDS_API_KEY=
LEOPARDS_API_PASSWORD=

AdminEamil=

---

📦 Installation & Setup

1️⃣ Clone Repository

git clone https://github.com/IsmailofficialGithub/bachatbzr.git
cd bachatbzr

2️⃣ Install Dependencies

npm install

3️⃣ Configure Environment

• Copy .env.example → .env.local
• Add your Supabase, Stripe, Cloudinary, Nodemailer & Leopard API credentials

4️⃣ Run Development Server

npm run dev

Visit http://localhost:3000

---

🖥 Deployment

• Frontend & Backend: Vercel
• Database & Auth: Supabase
• Images: Cloudinary
• Payments: Stripe

---

📄 License

This project is licensed under the MIT License.

---

👨‍💻 Author

Ismail Abbasi 📌 Portfolio: https://ismail-portfolio-sigma.vercel.app/ 💼 LinkedIn: https://linkedin.com/in/ismailabbasi 🐙 GitHub: https://github.com/IsmailofficialGithub