🛒 Kino – Second-Hand Marketplace Platform
🔗 Live Site: kinomarkt.vercel.app
📂 Repository: github.com/Shakawat-Sadik/Kino.com
🎯 About Kino
Kino is a full-stack second-hand marketplace where users can buy, sell, and manage pre-owned products securely. Built with Next.js, BetterAuth, Stripe, and MongoDB, it offers role-based dashboards, product search & filtering, and a seamless checkout experience.
🔹 Inspired by: Bikroy, Facebook Marketplace, eBay, OLX
🔹 Purpose: Reduce waste, promote sustainability, and enable affordable shopping.
✨ Key Features
🔐 Authentication & Authorization
- Multi-provider login – Email/password + Google OAuth via BetterAuth
- Role-based access –
buyer, seller, and admin roles, each with dedicated dashboards
- Protected routes – Private pages (dashboard, orders, checkout) guarded via middleware/proxy
🛍️ Marketplace Core
- Product management – Sellers can add, edit, and delete listings with images (Cloudinary)
- Search, filter & sort – Browse by category, sort by price
- Product details – Full listing info with images, seller info, condition, and price
- Wishlist – Buyers can save products for later
💳 Payments (Stripe)
- Secure checkout – Stripe Checkout Session for one-click payments
- Payment success page – Order confirmation after transaction
- Order status tracking – From placed order through delivery
- Payment history – Buyers can review past transactions
📊 Role-Based Dashboards
| Role | Features |
|---|
| Buyer | Orders, Wishlist, Payment History, Profile Management |
| Seller | Products, Sales Analytics (Recharts), Order Management |
| Admin | User Management, Product Approval, Platform Analytics |
🎨 UI/UX
- Modern design – Radix UI / Shadcn-style components + Tailwind CSS v4
- Animations – Motion (Framer Motion) on hero sections and cards
- Responsive – Mobile, tablet, and desktop layouts
- Dark/Light theme toggle via
next-themes
🛠 Tech Stack
| Category | Technologies |
|---|
| Framework | Next.js 16 (App Router), React 19 |
| Styling | Tailwind CSS v4, Radix UI, Lucide Icons |
| Animation | Motion, Lenis (smooth scroll) |
| Auth | BetterAuth (email/password + Google OAuth), MongoDB adapter |
| Database | MongoDB |
| Image Storage | Cloudinary |
| Payments | Stripe (@stripe/stripe-js, @stripe/react-stripe-js) |
| Charts | Recharts |
| Deployment | Vercel |
| Package Manager | pnpm |
Key Dependencies
next, react / react-dom, better-auth, @better-auth/mongo-adapter, mongodb, stripe client SDKs, cloudinary, recharts, motion, lenis, radix-ui, lucide-react, next-themes, sonner, embla-carousel-react, react-day-picker, date-fns, cmdk, vaul
🔧 Project Structure
kino.com/
├── src/
│ ├── app/ # App Router — pages & API routes
│ │ ├── auth/ # Login, sign-up, admin login
│ │ ├── dashboard/ # Role-based dashboards (buyer/seller/admin)
│ │ ├── products/ # Product listing & details
│ │ ├── categories/ # Category browsing
│ │ ├── checkout/ # Stripe checkout flow
│ │ ├── payment-success/
│ │ └── api/ # API routes (auth, cloudinary, etc.)
│ ├── components/ # Reusable UI components
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities, auth & DB configs
│ └── proxy.js # Route protection
└── public/ # Static assets
This is a single Next.js application (frontend + API routes together) — there is no separate backend repo.
🚀 Getting Started
Prerequisites
- Node.js (v18+)
- pnpm (v8+)
- MongoDB database (e.g. MongoDB Atlas)
- Stripe account (test mode)
- Cloudinary account (for image uploads)
Installation
-
Clone the repo
git clone https://github.com/Shakawat-Sadik/Kino.com.git
cd Kino.com
-
Install dependencies
pnpm install
-
Set up environment variables
Create a .env file in the project root with the required variables for MongoDB, BetterAuth (including Google OAuth credentials), Stripe, and Cloudinary.
-
Run the development server
pnpm dev
Open http://localhost:3000 in your browser.
-
Build for production
pnpm build
pnpm start
📎 Resources
