Dya Collection

Dya Collection

A website-based e-commerce platform developed to digitize the 'Toko Koleksi Tas DYA' MSME, a women's bag store that previously relied on conventional sales methods. As a Community Service Project (PPM), this solution was designed to expand market reach, professionalize sales processes, and streamline data management. Built with Next.js, the platform features a complete product catalog, an online ordering system, and a comprehensive admin dashboard for managing products and transactions, empowering the business to compete in the digital era.

Visit StoreGitHub Repo

Role

Full-stack Developer,

UI/UX Designer

Use case

E-commerce Platform,

MSME Digitalization

Tools

Next.js,

Clerk,

Prisma,

PostgreSQL,

Cloudinary,

shadcn/ui

Team

Wahyu Akhmad FadillahAhmad Saifi K.U.Dede FernandaAlifia Shafa Shabrina
Dya Collection E-commerce Platform

Dya Collection - Fashion E-commerce Platform

Deploy with Vercel

A modern e-commerce platform for Dya Official's fashion products, specializing in women's bags and accessories. Built with Next.js 14, this platform combines elegant design with powerful features for both customers and administrators. A collaborative PPM (Community Service) project developed by a team of 4 developers.

Fitur Utama

  • Katalog Produk

    • Tampilan produk yang elegan
    • Kategori produk yang terorganisir
    • Pencarian dan filter produk
    • Detail produk lengkap dengan varian

  • Manajemen Inventori

    • Sistem stok real-time
    • Manajemen varian produk
    • Notifikasi stok menipis
    • Riwayat perubahan stok

  • Panel Admin

    • Dashboard intuitif
    • Manajemen produk dan kategori
    • Pengelolaan pesanan
    • Analisis penjualan
    • Manajemen media dengan Cloudinary

  • Pengalaman Pengguna

    • Desain responsif
    • Navigasi mudah dengan command palette (⌘K)
    • Optimasi gambar otomatis
    • Loading state yang smooth

Teknologi yang Digunakan

  • Next.js 14: Framework React modern dengan App Router
  • TypeScript: Untuk type-safety dan maintainability
  • Supabase: Database dan autentikasi
  • Cloudinary: Manajemen dan optimasi media
  • shadcn/ui: Komponen UI yang customizable
  • Tailwind CSS: Styling yang fleksibel

Cara Memulai

git clone https://github.com/ahmdsaif87/dya-collection
cd dya-collection
npm install

Setup environment variables di file ".env":

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloudinary_name

Jalankan server development:

npm run dev

Buka http://localhost:3000 di browser Anda.

Struktur Proyek