MVP Daftar Produk UMKM

Aplikasi web fullstack yang dirancang untuk mengelola produk Usaha Mikro Kecil Menengah (UMKM) dengan kemampuan unggah gambar yang komprehensif, dibangun menggunakan teknologi web modern termasuk Next.js untuk frontend dan Express.js untuk backend API.

📋 Ringkasan

Ini adalah proyek pembelajaran yang mendemonstrasikan struktur monorepo fullstack lengkap untuk membangun sistem manajemen produk. Aplikasi ini memungkinkan bisnis UMKM untuk mengelola katalog produk mereka dengan gambar yang disimpan di Supabase, memberikan contoh nyata integrasi server-side rendering dan API.

✨ Fitur

• Manajemen Produk

  • Melihat daftar produk lengkap beserta gambarnya.
  • Menambah produk baru dengan unggah gambar.
  • Menghapus produk yang sudah ada.
  • Pembaruan data secara real-time.

• UI/UX Modern

  • Desain responsif dengan Tailwind CSS.
  • Pemuatan halaman cepat dengan Next.js SSR.
  • Interaksi pengguna yang mulus.

• Penanganan Gambar

  • Unggah gambar produk melalui Supabase Storage.
  • Optimasi gambar otomatis.
  • URL gambar yang aman.

🏗️ Struktur Proyek

Learn-Server-Side-Rendering/
├── apps/
│   ├── api/                    # Backend Express.js API
│   │   ├── src/
│   │   ├── package.json
│   │   └── .env
│   └── web/                    # Aplikasi Frontend Next.js
│       ├── app/
│       ├── components/
│       ├── public/
│       ├── package.json
│       └── .env.local
└── package.json                # Konfigurasi workspace root

🛠️ Tech Stack

Backend (API)

• Express.js 5.1.0 - Framework web yang cepat dan fleksibel.
• Supabase - Solusi database dan penyimpanan file.
• Multer 2.0.2 - Penanganan data form multipart untuk unggah file.
• CORS - Cross-origin resource sharing.
• dotenv - Manajemen variabel lingkungan.

Frontend (Web)

• Next.js 15.4.6 - Framework React dengan kemampuan SSR.
• React 19.1.0 - Library UI.
• Tailwind CSS - Framework CSS utility-first.
• Geist Font - Tipografi modern.
• Axios - Client HTTP untuk permintaan API.

🚀 Memulai

Prasyarat

• Node.js (v18 atau lebih baru).
• npm atau Yarn package manager.
• Akun Supabase (tersedia paket gratis di supabase.com).

Pengaturan Supabase

1. Buat proyek baru di Supabase.
2. Buat storage bucket bernama products.
3. Atur bucket menjadi akses publik.
4. Dapatkan URL Supabase dan Service Role Key dari pengaturan proyek.

Pengaturan API

1. Navigasi ke direktori API

   cd apps/api
   

2. Install dependensi

   npm install
   

3. Buat file environment Buat file .env dengan isi berikut:

   PORT=4000
   SUPABASE_URL=url_proyek_supabase_anda
   SUPABASE_SERVICE_ROLE_KEY=service_role_key_supabase_anda
   SUPABASE_BUCKET=products
   CORS_ORIGIN=http://localhost:3000
   

4. Jalankan server API

   npm run dev
   

   API akan berjalan di http://localhost:4000

Pengaturan Aplikasi Web

1. Navigasi ke direktori web

   cd apps/web
   

2. Install dependensi

   npm install
   

3. Buat file environment Buat file .env.local:

   NEXT_PUBLIC_API_URL=http://localhost:4000
   

4. Jalankan server pengembangan

   npm run dev
   

5. Akses aplikasi Buka http://localhost:3000 di browser Anda.

📡 Endpoint API

💻 Penggunaan

1. Melihat Produk

   • Halaman beranda menampilkan semua produk dalam tata letak grid.
   • Setiap produk menampilkan gambar, nama, dan deskripsi.

2. Menambah Produk Baru

   • Klik tombol "Add Product".
   • Isi detail produk (nama, deskripsi, harga).
   • Unggah gambar produk.
   • Kirim formulir untuk membuat produk.

3. Menghapus Produk

   • Klik tombol hapus pada kartu produk.
   • Konfirmasi penghapusan.
   • Produk dan gambar terkait akan dihapus.

🔧 Variabel Lingkungan

API (.env)

• PORT - Port server API (default: 4000).
• SUPABASE_URL - URL proyek Supabase Anda.
• SUPABASE_SERVICE_ROLE_KEY - Service role key Supabase untuk operasi admin.
• SUPABASE_BUCKET - Nama storage bucket untuk gambar produk.
• CORS_ORIGIN - Origin CORS yang diizinkan (URL frontend).

Web (.env.local)

• NEXT_PUBLIC_API_URL - URL Backend API (default: http://localhost:4000).

🎓 Tujuan Pembelajaran

Proyek ini mengajarkan:

• Struktur dan manajemen monorepo.
• Server-side rendering dengan Next.js.
• Pengembangan API RESTful dengan Express.js.
• Penanganan unggah file dengan Multer.
• Integrasi penyimpanan cloud dengan Supabase.
• Pola dan hook React modern.
• Styling dengan Tailwind CSS.
• Konfigurasi berbasis lingkungan.

🤝 Kontribusi

1. Fork repositori ini.
2. Buat branch fitur (git checkout -b feature/FiturLuarBiasa).
3. Commit perubahan Anda (git commit -m 'Menambah FiturLuarBiasa').
4. Push ke branch tersebut (git push origin feature/FiturLuarBiasa).
5. Buka Pull Request.

📄 Lisensi

Proyek ini bersifat open source dan tersedia untuk tujuan edukasi.