🏪 SekitarKampus - Direktori Digital UMKM

Platform direktori digital untuk UMKM di sekitar kampus Malang

Website untuk membantu mahasiswa menemukan tempat makan, minum, dan layanan UMKM di sekitar kampus dengan lebih mudah.

---

📋 Daftar Isi

• ✨ Fitur Utama
• 🛠️ Teknologi yang Digunakan
• 🚀 Instalasi & Menjalankan
• 📁 Struktur Proyek
• 🌐 Deployment
• 🎨 Design System
• 📊 Data UMKM
• 🤝 Core Team
• 📄 Lisensi
• 📞 Kontak

Kenapa Bikin Ini?

• Banyak warung/kedai bagus tapi ga ketemu karena ga ada online
• Mahasiswa sering bingung cari tempat makan yang deket
• Info menu dan harga seringnya ga jelas
• UMKM kecil butuh bantuan untuk lebih visible

SekitarKampus adalah platform direktori digital yang dibuat khusus untuk menampilkan UMKM (Usaha Mikro, Kecil, dan Menengah) yang berada di sekitar lingkungan kampus, khususnya di daerah Malang, Jawa Timur.

Masalah yang Dipecahkan

• 😔 UMKM kecil di sekitar kampus sulit ditemukan secara online
• 🔍 Mahasiswa sering kesulitan mencari tempat makan/minum terdekat
• 💰 Informasi menu dan harga tidak transparan
• 📱 UMKM belum memanfaatkan teknologi digital

Solusi yang Ditawarkan

• ✅ Platform direktori digital yang mudah diakses
• 🗺️ Fitur peta interaktif untuk menemukan lokasi UMKM
• 📋 Informasi lengkap: menu, harga, jam buka, kontak
• 🔎 Pencarian dan filter untuk kemudahan navigasi

---

✨ Fitur Utama

🔍 Fitur

1. Halaman Direktori Utama

   • Grid/List tampilan UMKM
   • Search Bar dengan fuzzy search (Fuse.js)
   • Filter berdasarkan kategori (Makanan, Minuman, Jasa)

2. Halaman Detail UMKM

   • Informasi lengkap (nama, deskripsi, alamat, jam buka, kontak)
   • Galeri foto dengan lightbox
   • Daftar menu & harga
   • Peta lokasi interaktif (React-Leaflet) dengan single marker

🚀 Fitur Unggulan

3. Peta Interaktif Multi-Pin

   • Visualisasi semua UMKM dalam satu peta
   • Custom marker berdasarkan kategori
   • Popup interaktif dengan detail & navigasi

4. UMKM Favorit

   • Simpan UMKM favorit dengan localStorage
   • Halaman khusus untuk menampilkan favorit
   • Tombol favorit di setiap card UMKM

5. Rekomendasi Berbasis Lokasi

   • Deteksi lokasi user dengan Geolocation API
   • Tampilkan UMKM terdekat dari posisi user
   • Perhitungan jarak real-time

6. Dark Mode

   • Toggle dark/light mode
   • Preferensi tersimpan di localStorage
   • Transisi smooth antar mode

7. AI Chatbot Simulasi

   • Asisten virtual interaktif
   • Quick reply buttons (bukan free text)
   • Rekomendasi UMKM berdasarkan budget & kebutuhan
   • Navigasi otomatis ke halaman detail

8. Halaman About

   • Informasi proyek & tim
   • Tech stack yang digunakan
   • Profil kompetisi WIA 2025

---

🛠️ Teknologi yang Digunakan

Teknologi	Versi	Kegunaan
React.js	18.3.1	Framework UI utama
Tailwind CSS	3.4.13	Styling utility-first
React Router DOM	6.26.0	Routing & navigasi SPA
React-Leaflet	4.2.1	Peta interaktif
Leaflet	1.9.4	Library peta open-source
Fuse.js	7.0.0	Fuzzy search algorithm
Framer Motion	11.5.0	Animasi & transisi
Lucide React	0.445.0	Ikon modern & bersih
Zustand	4.5.5	State management ringan

---

🚀 Instalasi & Menjalankan

Prerequisites

Pastikan sudah terinstall:

• Node.js (v16 atau lebih baru)
• npm (v8 atau lebih baru)

Langkah-Langkah

1. Clone repository

   git clone <repository-url>
   cd Mia

2. Install dependencies

   npm install

3. Jalankan development server

   npm start

4. Buka browser

   Aplikasi akan berjalan di: http://localhost:3000

Commands Lainnya

# Build untuk production
npm run build

# Run tests
npm test

# Eject configuration (TIDAK DISARANKAN)
npm run eject

---

📁 Struktur Proyek

Mia/
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── components/           # Komponen reusable
│   │   ├── Layout.jsx
│   │   ├── Navbar.jsx
│   │   ├── Footer.jsx
│   │   ├── UMKMCard.jsx
│   │   ├── SearchBar.jsx
│   │   ├── CategoryFilter.jsx
│   │   ├── ImageGallery.jsx
│   │   ├── MapView.jsx
│   │   └── ChatbotButton.jsx
│   ├── pages/                # Halaman utama
│   │   ├── Home.jsx
│   │   ├── UMKMDetail.jsx
│   │   ├── MapPage.jsx
│   │   ├── Favorit.jsx
│   │   └── About.jsx
│   ├── data/                 # Data UMKM
│   │   └── umkm.js
│   ├── store/                # Zustand store
│   │   └── useStore.js
│   ├── utils/                # Helper functions
│   │   └── helpers.js
│   ├── App.js                # Router config
│   ├── index.js              # Entry point
│   └── index.css             # Global styles
├── package.json
├── tailwind.config.js
├── postcss.config.js
└── README.md

---

🌐 Deployment

Rekomendasi Platform Hosting

1. Vercel (Recommended)

   npm install -g vercel
   vercel

2. Netlify

   • Drag & drop folder build ke Netlify
   • Atau gunakan Netlify CLI

3. GitHub Pages

   npm install --save-dev gh-pages
   # Tambahkan scripts di package.json
   npm run deploy

Build untuk Production

npm run build

File production akan tersimpan di folder /build

---

🎨 Design System

Warna Utama

Primary (Biru Tua):   #1c3f80
Background (Beige):   #f5eee6
Accent (Kuning):      #f5cb3f
Text (Hitam):         #000000
Card (Putih):         #FFFFFF

Font

• Font Family: Inter (Google Fonts)
• Weights: 300, 400, 500, 600, 700, 800

---

📊 Data UMKM

Proyek ini menampilkan 10 data UMKM:

• 10 Data (Adelian's Mom Kitchen, Kantin DEA, Maliki Coffee, Dll)

Semua data tersimpan di src/data/umkm.js dan dapat dengan mudah diganti/ditambah.

---

🤝 Core Team

Tim SekitarKampus yang membangun proyek ini:

Sulthan Adam Rahmadi 🚀 Owner & Lead Developer 📋 Project Manager 💻 Frontend Developer 🎨 UI/UX Implementation 🏗️ System Architecture ⚙️ State Management GitHub

Muhammad Alif Mujaddid ⚡ Core Developer 💻 Frontend Developer 🧩 Component Development 🔧 Feature Implementation 🗺️ Map Integration 🧪 Testing & QA GitHub

Keyshayara Qanita Kamila 🎨 UI/UX Designer 🎨 Visual Design 🖼️ Asset Creation 🎯 Design System ✨ User Experience 📐 Layout Design

Proyek ini dibuat dengan ❤️ untuk Web In Action (WIA) 2025

---

📄 Lisensi

MIT License - Copyright (c) 2025 Tim SekitarKampus

Lihat file LICENSE untuk detail lengkap.

---

📞 Kontak

Untuk pertanyaan atau informasi lebih lanjut:

• 📧 Email: sultanadamr@gmail.com
• 🌐 Website: [Link akan ditambahkan setelah hosting]

---

Dibuat dengan ❤️ untuk Kompetisi WIA 2025

Membantu UMKM Lokal Go Digital