Skip to content

farishhz/jakbar-explore

Repository files navigation

๐Ÿฎ Museum Hidup Jakarta Barat

Jakarta Barat Heritage Next.js TypeScript Tailwind CSS

Jelajahi Warisan Budaya, Kuliner Legendaris, dan Kisah Akulturasi di Glodok

๐Ÿš€ Demo โ€ข ๐Ÿ“– Dokumentasi โ€ข ๐ŸŽจ Fitur โ€ข ๐Ÿ’ป Instalasi


๏ฟฝ Tentang Proyek

Museum Hidup Jakarta Barat adalah platform digital interaktif yang mengajak Anda menjelajahi Glodok dan kawasan Jakarta Barat bukan sekadar sebagai tempat wisata kuliner, tetapi sebagai museum yang hidup - tempat di mana sejarah, budaya, dan tradisi masih bernapas di setiap sudutnya.

๐ŸŽฏ Misi Kami

  • ๐Ÿ›๏ธ Melestarikan Warisan Budaya - Mendokumentasikan dan mempromosikan warisan budaya Tionghoa-Indonesia
  • ๏ฟฝ Mengangkat Kuliner Legendaris - Memperkenalkan kuliner turun-temurun yang penuh cerita
  • ๐Ÿค Merayakan Toleransi - Menampilkan harmoni dan akulturasi budaya yang indah
  • ๐Ÿ“š Edukasi Interaktif - Memberikan pengalaman belajar yang menyenangkan tentang sejarah lokal

โœจ Fitur Utama

๐Ÿ›๏ธ Museum Hidup

Konsep unik yang menghadirkan Glodok sebagai museum terbuka dengan:

  • Akulturasi Budaya - Kisah perpaduan kuliner Tionghoa dan rempah Nusantara
  • Toleransi & Harmoni - Cerita kerukunan antar budaya dan agama
  • Arsitektur Bersejarah - Eksplorasi bangunan kolonial dan gaya Indische

๐Ÿ“œ Jejak Masa Lalu

Timeline interaktif sejarah Glodok dari tahun 1610 hingga era modern:

  • Timeline visual dengan animasi smooth
  • Fakta-fakta unik tentang Glodok
  • Profil arsitektur khas Tionghoa-Belanda

๐Ÿœ Peta Rasa Kuliner

Katalog lengkap kuliner legendaris dengan:

  • Kuliner Halal - Cempedak Goreng, Gado-Gado Direksi, Rujak Shanghai, Kopi Es Tak Kie
  • The Old Masters - Kuliner non-halal turun-temurun 3-4 generasi
  • Rating, harga, lokasi, dan cerita di balik setiap hidangan
  • Fitur favorit untuk menyimpan kuliner pilihan

๐Ÿ‘ฅ Wajah Jakarta

Profil pedagang legendaris dengan:

  • Kisah hidup dan dedikasi mereka
  • Quote inspiratif tentang warisan budaya
  • Foto dan informasi toko mereka

๏ฟฝ๏ธ Panduan Jelajah

Rute jalan kaki yang telah dirancang:

  • Heritage Walk (1 jam) - Fokus arsitektur dan sejarah
  • Culinary Adventure (2 jam) - Wisata kuliner lengkap
  • Informasi transportasi (TransJakarta, KRL, Ojol, Mobil Pribadi)

๐Ÿ“– Kamus Budaya

Glosarium istilah budaya Tionghoa-Indonesia:

  • Ciam Si, Pecinan, Cap Go Meh, Sekba, dan lainnya
  • Penjelasan konteks penggunaan
  • Membantu pemahaman budaya lokal

๐Ÿ’ฐ Estimasi Budget

Kalkulator budget wisata:

  • Paket Pelajar Hemat (Rp 50.000)
  • Paket Kenyang Sultan (Rp 150.000)
  • Tips hemat dan rekomendasi

๐Ÿ“ธ Galeri Foto

Koleksi foto berkualitas tinggi:

  • Lightbox interaktif
  • Foto arsitektur, festival, dan kehidupan sehari-hari
  • Optimasi gambar dengan Sharp

๐Ÿ› ๏ธ Teknologi

๐ŸŽฏ Core Framework

  • โšก Next.js 16 - React framework dengan App Router
  • ๐Ÿ“˜ TypeScript 5 - Type-safe development
  • ๏ฟฝ Tailwind CSS 4 - Utility-first CSS framework

๐Ÿงฉ UI & Animasi

  • ๏ฟฝ Framer Motion - Smooth animations & transitions
  • ๐ŸŽจ shadcn/ui - High-quality accessible components
  • ๐ŸŽฏ Lucide React - Beautiful icon library
  • ๐ŸŒˆ Radix UI - Unstyled, accessible components

๐Ÿ“Š Data & State Management

  • ๏ฟฝ Zustand - Lightweight state management
  • ๏ฟฝ TanStack Query - Data fetching & caching
  • ๏ฟฝ๏ธ Prisma - Type-safe ORM

๐ŸŽจ Advanced Features

  • ๐Ÿ“Š Recharts - Data visualization
  • ๐Ÿ“… Date-fns - Date utilities
  • ๐Ÿ–ผ๏ธ Sharp - Image optimization
  • ๐ŸŽฃ React Hook Form + Zod - Form validation

๐Ÿš€ Instalasi

Prasyarat

  • Bun >= 1.3.4 (atau Node.js >= 18)
  • Git

Langkah Instalasi

# 1. Clone repository
git clone https://github.com/username/jakbar-mulok4.git
cd jakbar-mulok4

# 2. Install dependencies
bun install

# 3. Setup database (opsional)
bun run db:push

# 4. Jalankan development server
bun run dev

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

Build untuk Production

# Build aplikasi
bun run build

# Jalankan production server
bun start

๐Ÿ“ Struktur Proyek

jakbar-mulok4/
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ app/                    # Next.js App Router
โ”‚   โ”‚   โ”œโ”€โ”€ page.tsx           # Homepage utama
โ”‚   โ”‚   โ””โ”€โ”€ layout.tsx         # Root layout
โ”‚   โ”œโ”€โ”€ components/            # React components
โ”‚   โ”‚   โ””โ”€โ”€ ui/               # shadcn/ui components
โ”‚   โ”œโ”€โ”€ hooks/                # Custom React hooks
โ”‚   โ””โ”€โ”€ lib/                  # Utilities & configs
โ”œโ”€โ”€ public/
โ”‚   โ””โ”€โ”€ images/               # Asset gambar
โ”œโ”€โ”€ prisma/                   # Database schema
โ”œโ”€โ”€ package.json
โ””โ”€โ”€ README.md

๐ŸŽจ Fitur Interaktif

โœจ Animasi & Transisi

  • Parallax scrolling pada hero section
  • Fade-in animations saat scroll ke section
  • Hover effects pada cards dan buttons
  • Smooth transitions antar halaman

๐ŸŽฏ User Experience

  • Sticky navigation dengan active state indicator
  • Mobile-responsive dengan hamburger menu
  • Lightbox gallery untuk foto
  • Favorite system untuk menyimpan kuliner favorit
  • Smooth scroll ke section tertentu

๐Ÿ“ฑ Mobile-First Design

  • Responsive di semua ukuran layar
  • Touch-friendly interactions
  • Optimized images untuk mobile
  • Fast loading dengan lazy loading

๐ŸŽจ Desain & Tema

๐ŸŽจ Color Palette

  • Primary: Red-Orange gradient (from-red-600 to-orange-600)
  • Secondary: Green-Teal gradient (from-green-600 to-teal-600)
  • Background: Warm gradients (from-orange-50 via-white to-red-50)
  • Accent: Gold untuk elemen budaya Tionghoa

๐Ÿ–ผ๏ธ Visual Identity

  • Ikon: Lucide React dengan tema heritage
  • Typography: System fonts dengan hierarchy yang jelas
  • Imagery: Foto berkualitas tinggi dari Glodok
  • Spacing: Generous whitespace untuk readability

๐Ÿ“– Dokumentasi

Navigasi Utama

  • Beranda - Hero section dengan CTA
  • Jelajahi - Museum Hidup, Jejak Masa Lalu, Wajah Jakarta
  • Kuliner - Peta Rasa dengan katalog lengkap
  • Panduan - Panduan Jelajah, Kamus Budaya, Estimasi Budget
  • Galeri - Koleksi foto
  • Kontak - Informasi kontak

Data Kuliner

Setiap item kuliner memiliki:

{
  id: string
  name: string
  description: string
  price: number
  rating: number
  location: string
  image: string
  isHalal: boolean
  story: string
  generations?: number  // untuk Old Masters
}

Rute Jalan Kaki

{
  id: number
  name: string
  duration: string
  distance: string
  stops: string[]
  highlights: string[]
  bestTime: string
  image: string
}

๐Ÿค Kontribusi

Kami sangat terbuka untuk kontribusi! Jika Anda ingin berkontribusi:

  1. Fork repository ini
  2. Buat branch fitur (git checkout -b feature/AmazingFeature)
  3. Commit perubahan (git commit -m 'Add some AmazingFeature')
  4. Push ke branch (git push origin feature/AmazingFeature)
  5. Buat Pull Request

Ide Kontribusi

  • ๐Ÿ—บ๏ธ Menambah rute jalan kaki baru
  • ๐Ÿœ Menambah data kuliner legendaris
  • ๐Ÿ“ธ Kontribusi foto berkualitas tinggi
  • ๐ŸŒ Terjemahan ke bahasa lain
  • ๐ŸŽจ Perbaikan UI/UX

๐Ÿ“ Scripts

# Development
bun run dev          # Jalankan dev server di port 3000

# Build
bun run build        # Build untuk production

# Production
bun start            # Jalankan production server

# Database
bun run db:push      # Push schema ke database
bun run db:generate  # Generate Prisma Client
bun run db:migrate   # Jalankan migrations
bun run db:reset     # Reset database

# Linting
bun run lint         # Jalankan ESLint

๐ŸŒŸ Roadmap

Phase 1 (Current) โœ…

  • Landing page dengan hero section
  • Katalog kuliner halal & non-halal
  • Timeline sejarah interaktif
  • Profil pedagang legendaris
  • Panduan rute jalan kaki
  • Kamus budaya
  • Estimasi budget
  • Galeri foto dengan lightbox

Phase 2 (Coming Soon) ๐Ÿšง

  • Integrasi Google Maps untuk navigasi
  • Sistem booking tour guide
  • Review & rating dari pengunjung
  • Blog artikel tentang sejarah & budaya
  • Augmented Reality (AR) untuk heritage tour
  • Multi-language support (EN, CN)

Phase 3 (Future) ๐Ÿ”ฎ

  • Mobile app (React Native)
  • Virtual tour 360ยฐ
  • Podcast cerita pedagang legendaris
  • E-commerce untuk oleh-oleh khas
  • Kolaborasi dengan Dinas Pariwisata DKI

๐Ÿ‘ฅ Tim

Dikembangkan dengan โค๏ธ oleh tim yang peduli dengan pelestarian warisan budaya Jakarta Barat.


๐Ÿ“ž Kontak


๐Ÿ™ Acknowledgments

Terima kasih kepada:

  • Para pedagang legendaris Glodok yang telah menjaga warisan budaya
  • Komunitas Jakarta Barat yang mendukung pelestarian budaya
  • Fotografer yang berkontribusi foto-foto indah
  • Open source community untuk tools dan libraries yang luar biasa

๐Ÿฎ Museum Hidup Jakarta Barat ๐Ÿฎ

Jelajahi Warisan, Rasakan Sejarah, Rayakan Keberagaman

Made with Love

About

๐ŸŒ† jakbar-explore adalah website interaktif untuk mengeksplorasi Jakarta Barat. Temukan info kuliner, transportasi, berita, dan fitur permainan edukatif. Dibangun dengan Next.js & Tailwind CSS untuk pengalaman modern dan responsif!

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors