🌐 World's Best Web Projects Database

Sistem informasi database penyimpanan repository dan website project terbaik dunia untuk inspirasi, pembelajaran, dan pengembangan ide-ide baru.

---

📖 Tentang Project

World's Best Web Projects Database (WWPV) adalah platform kurasi 145+ website dan web application terbaik dari seluruh dunia — mulai dari Awwwards Site of the Day, scrollytelling masterpieces, WebGL experiments, portfolio kreatif, personal brand / hire-me pages, SaaS marketing, hingga e-commerce inovatif.

Setiap project disimpan dengan metadata lengkap:

• Nama & URL website
• Kategori & tags
• Tech stack
• Tingkat kompleksitas
• Catatan inspirasi
• Ide clone / pengembangan serupa

Tujuannya sederhana: dari melihat project terbaik, muncul ide baru, lalu develop yang serupa atau lebih baik.

---

✨ Fitur Utama

• 🔍 Pencarian Cerdas — Cari berdasarkan nama, deskripsi, tag, atau tech stack
• 🏷️ Filter Lanjut — Filter by kategori, tag, tech stack, dan kompleksitas
• 🔖 Bookmark — Simpan project favorit (local storage)
• 📊 Compare — Bandingkan hingga 3 project sekaligus
• 💡 Ide Clone — Setiap project punya ide pengembangan yang bisa dieksekusi
• 📱 Responsive — Optimal di desktop, tablet, dan mobile
• ⚡ Performa Tinggi — Vanilla JS, tanpa framework berat

---

🗂️ Kategori Web Project

Kategori	Contoh
Kategori	Contoh
----------	--------
🚀 Landing Page	Tesla, Wise, Crav Burgers, Hubtown
💼 Portfolio	Locomotive, Bruno Simon, Obys, SMSY, Gabriel Valdivia, Maggie Appleton
📊 Dashboard / SaaS	Linear, Duolingo, Vercel, Amplitude, Grafana, Retool
🛒 E-commerce	Stripe Press, Simply Chocolate, Hex Pens
🎨 Creative / Experimental	Spotify Wrapped, Rive, Daily Rituals 0% AI
📖 Storytelling / Editorial	Claude Fable Mythos 5, SBS The Boat, Universe to You
🧊 WebGL / 3D	Bruno Simon Portfolio, Active Theory, Lunarwheel
🏔️ Parallax / Scrollytelling	Apple AirPods Pro, Nomadic Tribe, Wamos Air, Firewatch
📢 SaaS Marketing	Notion, Discord, AIR, Volt
🛠️ Tools & Utilities	Awwwards, Shopify Polaris, Figma, Canva, Carbon, Coolors

---

🚀 Cara Menggunakan

1. Buka Website

Live: githubmenarikduplicatemirorclone.vercel.app

Atau jalankan lokal:

cd githubmenarikduplicatemirorclone
python3 -m http.server 8080

Buka http://localhost:8080

2. Navigasi

• Sidebar — Pilih kategori project
• Search — Cari dengan kata kunci
• Filters — Filter berdasarkan tag, tech stack, atau kompleksitas
• Bookmark — Klik ikon ❤️ untuk menyimpan
• Compare — Klik ikon ≡ untuk membandingkan project

3. Dapatkan Ide

Buka detail project untuk melihat:

• Tech stack yang digunakan
• Catatan inspirasi
• Ide clone / pengembangan serupa

---

🛠️ Tech Stack

• HTML5 — Semantic markup
• CSS3 — Custom properties, Grid, Flexbox, Glassmorphism
• Vanilla JavaScript (ES Modules) — No framework
• LocalStorage — Bookmark & compare persistence

---

📝 Struktur Data Project

{
  id: 'wp-001',
  name: 'Claude Fable Mythos 5',
  url: 'https://www.anthropic.com/fable',
  repoUrl: null,
  category: 'storytelling',
  tags: ['AI', 'narrative', 'scroll', 'typography', 'immersive'],
  techStack: ['Next.js', 'React', 'GSAP', 'Tailwind CSS'],
  complexity: 5,
  year: 2025,
  featured: true,
  description: 'Immersive storytelling experience...',
  inspirationNotes: 'Cara menyajikan teks panjang tanpa membosankan...',
  cloneIdeas: [
    'Landing page untuk report/whitepaper dengan narasi berbabak',
    'Portfolio writer dengan chapter-based navigation'
  ]
}

---

🪞 Mirror / Clone Demo

Selain database, repo ini juga menyimpan contoh klon sederhana:

Mirror	Deskripsi	Link
Parallax Hero	Landing page dengan multi-layer scroll & mouse parallax	mirrors/parallax-hero/
Fable Story	Scroll-driven narrative chapter seperti Claude Fable Mythos	mirrors/fable-story/
Hire-Me Dark	Dark conversion landing page untuk consultant/hire-me	mirrors/hire-me-dark/

---

📝 Roadmap

• Inisialisasi database web projects
• Pencarian, filter, bookmark, dan compare
• Detail modal dengan ide clone
• Import/export data JSON
• Screenshot thumbnail untuk setiap project
• Mirror: Claude Fable Mythos 5 style
• Mirror: Apple-style scroll scrubbing
• Mirror: Linear-style dark SaaS landing
• Mirror: Bruno Simon 3D portfolio
• Integrasi dengan Vercel untuk preview private

---

🤝 Cara Berkontribusi

1. Fork repository ini
2. Tambahkan data project di js/data.js
3. Pastikan mengikuti format data di atas
4. Pull Request dengan deskripsi yang jelas

---

📜 Lisensi

MIT License © 2025 subkhanibnuaji

---

<div align="center"> _{Built with ❤️ untuk komunitas developer Indonesia} </div>