HOMYNOMAD.ID

Reinterpretasi modern website booking penginapan Visual segar, alur pemesanan yang nyaman, dan pengalaman browsing properti yang terasa ringan dan natural.

---

OVERVIEW

Homynomad.id adalah project redesign dari homynomad.com — bukan sekadar meniru, melainkan membangun ulang dengan pendekatan visual dan pengalaman yang lebih modern.

ASPEK	DESKRIPSI
🎨 Tampilan lebih segar	Desain kontemporer yang terasa ringan, lapang, dan nyaman di mata
📱 Responsif sempurna	Pengalaman mobile, tablet, dan desktop yang konsisten tanpa zoom
🧭 Booking flow natural	Dari lihat properti hingga konfirmasi, setiap langkah terasa jelas
🌙 Dark mode	Tampilan gelap nyaman untuk browsing malam hari, konsisten di mana pun
✨ Detail yang diperhatikan	Transisi halus, tipografi enak dibaca, tata letak yang memberi ruang

---

REDESIGN GOALS

AREA	ARAH DESAIN
Visual Identity	Warna yang menenangkan, tipografi modern, foto properti sebagai pusat perhatian
Booking Experience	Alur pemesanan yang terasa singkat, jelas, dan tidak membuat ragu
Browsing Experience	Menelusuri properti terasa menyenangkan — seperti window shopping
Kenyamanan	Tidak ada informasi berlebihan, tidak ada langkah yang membingungkan
Kepercayaan	Informasi properti transparan, foto asli, harga jelas sejak awal
Konsistensi	Tampilan seragam di setiap sudut website, tanpa kejutan visual

---

NAVIGATION STRUCTURE

Struktur routing ini mengacu pada docs/information-architecture/route-structure.md.

RUTE	JENIS	PERILAKU	KETERANGAN
/	Halaman	Standar	Beranda — hero, properti unggulan
/#explore	Anchor	Scroll smooth	Eksplorasi — pencarian dengan filter
/location/[location]	Modal	Overlay di /	Detail lokasi — foto, kamar, harga
/location/[location]/room/[room]	Modal	Nested overlay	Detail kamar — fasilitas, harga, booking
/about	Halaman	Standar	Filosofi, visi, misi
/booking	Halaman	Standar	Form booking, riwayat pemesanan
/auth/login	Halaman	Guest only	Masuk
/auth/register	Halaman	Guest only	Daftar akun baru
/profile	Halaman	Authenticated	Profil pengguna — data diri, riwayat
/profile/wishlist	Halaman	Authenticated	Favorit — properti tersimpan
/profile/settings	Halaman	Authenticated	Pengaturan tema, bahasa, mata uang
/support	Halaman	Standar	Pusat bantuan — FAQ, kontak

---

FEATURES OVERVIEW

FITUR	PRIORITAS	DESKRIPSI
🔐 Login & Registrasi	P0	Daftar dan masuk dengan mudah, akses booking & profil
🏠 Eksplorasi Penginapan	P0	Cari properti dengan filter, galeri foto, peta lokasi
📅 Booking & Reservasi	P0	Kalender ketersediaan, konfirmasi cepat, riwayat
🔔 Pencarian Tersimpan + Alert	P1	Simpan pencarian, notifikasi harga & ketersediaan
🚗 Informasi Komutasi	P1	Estimasi waktu ke kantor, stasiun, transportasi umum
👀 Visibilitas Ketersediaan	P1	Indikator real-time "tinggal 2 kamar", popularitas
👤 Profil Pengguna	P1	Data pribadi, riwayat booking, pengaturan preferensi
❤️ Wishlist	P1	Simpan properti favorit, lihat lagi kapan saja
🌙 Dark Mode	P1	Beralih tema gelap/terang, nyaman di segala suasana
📞 Pusat Bantuan	P2	FAQ, kontak support, bantuan seputar booking

---

ARCHITECTURE OVERVIEW

Homynomad.id menggunakan Feature-Sliced Design (FSD) — arsitektur frontend yang memisahkan kode berdasarkan domain fitur, bukan tipe teknis.

Hirarki layer (hanya boleh mengimpor dari layer di bawahnya):

app/ → components/ → features/ → entities/ → shared/

Layer	Isi
app/	Layout root, global providers, globals CSS, favicon
components/ui/	Komponen dasar shadcn/ui (Button, Typography, Section, Input, Badge, dll)
components/widgets/	Blok UI besar reusable (Banner, Header, BentoCard, FloatingActionButton)
components/layouts/	Layout wrapper (AppLayout, Navigation, Footer, CTA, NewsletterBanner)
features/	Interaksi pengguna reusable (Landing — Hero, FeatureGrid)
lib/	Utilitas umum (utils.ts)
shared/api/	API client, fetch wrapper, konfigurasi endpoint
shared/config/	Environment, route constants, tema
shared/data/	Data dummy untuk prototyping (navigation, features, footer, banner, dll)
shared/hooks/	Custom hooks global (useActivePath, useScroll)
shared/motion/	Konfigurasi animasi Framer Motion (presets, transitions)

---

DOCUMENTATION MAP

AREA	DOKUMEN	TUJUAN	LOKASI
Product	Roadmap	Fase pengembangan dan timeline fitur	docs/product/roadmap.md
Product	Feature List	Daftar fitur prioritas (P0/P1/P2)	docs/product/feature-list.md
Product	PRD	Product Requirement Document	docs/product/prd.md
Product	User Flow	Alur pengguna di setiap fitur	docs/product/user-flow.md
Design	Design System	Panduan design system dan komponen	docs/design/design-system.md
Design	Design Principles	Prinsip dan pendekatan desain	docs/design/design-principles.md
Design	Color System	Palet warna, semantic tokens, dark mode	docs/design/color-system.md
Design	Typography	Skala tipografi dan hierarki teks	docs/design/typography.md
Information Architecture	Route Structure	Pattern routing, parameter URL, modal routing	docs/information-architecture/route-structure.md

---

NAMING CONVENTIONS

Jenis	Aturan	Contoh
File komponen (ui/, layouts/)	kebab-case	app-layout.tsx, footer.tsx, typography.tsx
File komponen (widgets/, features/)	PascalCase	Banner.tsx, BentoCard.tsx, Hero.tsx, FeatureGrid.tsx
File utility / data	kebab-case	utils.ts, formatDate.ts, navigation.ts
File hook	kebab-case	use-active-path.ts, use-scroll.tsx
File konfigurasi / motion	kebab-case	presets.ts, transitions.ts, siteConfig.ts
Folder layer FSD	plural	components/, features/, shared/
Folder slice	kebab-case	auth-form/, property-card/, landing/
Folder segment	lowercase	ui/, model/, api/, lib/, hooks/, motion/
Named export (komponen)	PascalCase	AppLayout, Button, Banner, FeatureGrid
Named export (hook)	camelCase	useActivePath, useScroll
Named export (utility)	camelCase	formatDate, cn

---

DESIGN SYSTEM

Pendekatan visual yang konsisten di seluruh website:

ELEMEN	PENDEKATAN
Warna	Palet menenangkan dengan aksen kontras, dark mode penuh
Tipografi	Font modern untuk judul dan body, hierarki yang jelas
Spasi	Tata letak lapang, tidak padat, konten punya ruang bernapas
Komponen	Tombol, kartu, input, modal — semuanya seragam
Foto	Gambar properti sebagai pusat visual, gallery yang imersif
Animasi	Transisi halus, micro-interaction yang memperkuat pengalaman

---

DEVELOPMENT WORKFLOW

Project menggunakan Husky + lint-staged untuk automated validation pada setiap commit dan push.

Validation Pipeline

# Validasi penuh — lint, type-check, build
bun run validate

# Format semua file
bun run format

# Lint saja
bun run lint

# Type-check saja
bun run check

Pre-Commit Hooks

Setiap git commit akan secara otomatis:

1. Format staged files dengan Prettier
2. Lint & fix staged .ts, .tsx, .js, .jsx dengan ESLint
3. Jika ada error, commit gagal — perbaiki dulu

Pre-Push Hooks

Setiap git push akan menjalankan bun run build. Pastikan build sukses.

# Jika build gagal, push tertolak
# Fix error dan push ulang

Scripts Reference

Script	Perintah	Deskripsi
dev	next dev	Development server
build	next build	Production build
start	next start	Start production server
lint	eslint .	Lint semua file
check	tsc --noEmit	Type-check seluruh project
format	prettier --write .	Format semua file dengan Prettier
validate	bun run lint && bun run check && bun run build	Full validation pipeline

Installation Notes

Saat pertama kali clone project:

git clone <repo-url>
cd homynomad.id
bun install        # Otomatis mengaktifkan Husky hooks via prepare script
cp .env.example .env.local
bun dev

Catatan: Husky hooks aktif otomatis setelah bun install. Tidak perlu setup manual.

---

GETTING STARTED

git clone https://github.com/username/homynomad.id.git
cd homynomad.id
bun install
cp .env.example .env.local
bun dev

Buka http://localhost:3000 di browser.

---

LISENSI

Project ini dilisensikan di bawah MIT License — lihat file LICENSE untuk detail.