🌱 JunkPedia

Deskripsi Proyek

junkpedia adalah platform edukasi interaktif yang dirancang untuk meningkatkan kesadaran dan pengetahuan masyarakat tentang pengelolaan sampah yang berkelanjutan. Platform ini menggabungkan pembelajaran, komunitas, dan gamifikasi untuk menciptakan pengalaman belajar yang menarik dan efektif.

Struktur Website

1. Halaman Beranda (

Copy

/

)

Fungsi: Landing page yang memperkenalkan junkpedia kepada pengunjung Tampilan:

• Hero Section: Pengenalan platform dengan call-to-action utama
• Latar Belakang: Informasi tentang masalah sampah di Indonesia
• Statistik: Data real-time tentang dampak sampah
• Testimonial: Feedback dari pengguna platform
• Support By: Partner dan sponsor platform
• Call-to-Action: Ajakan untuk bergabung dengan komunitas

Alur Kerja:

1. Pengunjung masuk ke halaman beranda
2. Melihat hero section dengan pesan yang engaging
3. Membaca informasi latar belakang masalah sampah
4. Melihat statistik yang mendukung urgensi masalah
5. Membaca testimonial untuk membangun kepercayaan
6. Melihat support by untuk informasi partner
7. Mengklik CTA untuk bergabung dengan komunitas

2. Halaman Belajar (

Copy

/belajar

)

Fungsi: Pusat pembelajaran tentang pengelolaan sampah Tampilan:

• Pendahuluan: Overview tentang pentingnya pengelolaan sampah
• Jalur Pembelajaran: Sistem pembelajaran terstruktur dengan progress tracking
• 4 Jenis Sampah: Pengenalan interaktif tentang kategori sampah
• Kalkulator Jejak Sampah: Tool untuk menghitung dampak karbon personal
• Game Pilah Sampah: Mini game edukatif untuk melatih pemilahan
• Solusi Kreatif: Ide-ide inovatif untuk mengolah sampah
• Panduan Pengelolaan: Langkah-langkah praktis pengelolaan sampah
• Timeline Eco: Sejarah dan perkembangan gerakan lingkungan
• Fakta Menarik: Informasi edukatif tentang sampah
• Ayo Bernalar: Aktivitas critical thinking
• Call-to-Action: Ajakan untuk melanjutkan pembelajaran

Alur Kerja:

1. Pengguna mengakses halaman belajar
2. Membaca pendahuluan untuk memahami konteks
3. Mengikuti jalur pembelajaran untuk melacak kemajuan
4. Mempelajari jenis-jenis sampah
5. Menggunakan kalkulator untuk menghitung jejak karbon pribadi
6. Bermain game untuk praktik pemilahan sampah
7. Mengeksplorasi solusi kreatif
8. Mengikuti panduan pengelolaan sampah
9. Membaca fakta menarik untuk motivasi tambahan
10. Berpartisipasi dalam aktivitas critical thinking
11. Mengklik CTA untuk melanjutkan belajar

3. Halaman Komunitas (

Copy

/komunitas

)

Fungsi: Platform untuk berinteraksi dengan komunitas peduli lingkungan Tampilan:

• Statistik Komunitas: Data engagement dan aktivitas komunitas
• Forum Diskusi: Platform diskusi antar anggota
• Papan Peringkat: Leaderboard berdasarkan kontribusi
• Tantangan Komunitas: Challenge dan kompetisi berkelanjutan

Alur Kerja:

1. Pengguna mengakses halaman komunitas
2. Melihat statistik untuk memahami skala komunitas
3. Berpartisipasi dalam forum diskusi
4. Melihat leaderboard untuk motivasi
5. Mengikuti tantangan yang tersedia

4. Halaman Quiz (

Copy

/quiz

)

Fungsi: Menguji pemahaman pengguna tentang pengelolaan sampah Tampilan:

• Pengenalan Quiz: Overview tentang sistem quiz
• Game Quiz Interaktif: Quiz dengan timer dan scoring system
• Hasil dan Analisis: Feedback detail tentang performa

Alur Kerja:

1. Pengguna memulai quiz
2. Membaca pengenalan quiz
3. Menjawab pertanyaan secara berurutan dengan timer
4. Mendapat feedback langsung untuk setiap jawaban
5. Melihat skor akhir dan analisis performa

5. Halaman Kontak (

Copy

/contact

)

Fungsi: Menyediakan saluran komunikasi dengan tim junkpedia Tampilan:

• Informasi Kontak: Detail kontak tim junkpedia
• Kategori Bantuan: Sistem kategorisasi untuk pertanyaan
• Form Kontak: Interface untuk mengirim pesan
• FAQ: Pertanyaan yang sering diajukan
• Response Time: Informasi waktu respon

Alur Kerja:

1. Pengguna mengakses halaman kontak
2. Melihat informasi kontak yang tersedia
3. Memilih kategori bantuan yang sesuai
4. Mengisi formulir kontak dengan detail pertanyaan
5. Mengirim pesan dan mendapat konfirmasi
6. Membaca FAQ untuk jawaban cepat
7. Mengetahui waktu respon yang diharapkan

Fitur Utama

1. Sistem Pembelajaran Interaktif

• Progress Tracking: Monitoring kemajuan belajar pengguna
• Gamifikasi: Sistem poin, badge, dan achievement
• Konten Multimedia: Video, infografis, dan animasi interaktif
• Adaptive Learning: Konten yang disesuaikan dengan level pengguna

2. Tools dan Kalkulator

• Waste Calculator: Menghitung jejak karbon dari sampah personal
• Interactive Games: Mini games untuk pembelajaran yang menyenangkan
• Assessment Tools: Quiz dan evaluasi pemahaman

3. Komunitas dan Kolaborasi

• Forum Diskusi: Platform untuk berbagi pengalaman dan tips
• Challenge System: Tantangan berkelanjutan untuk mendorong aksi nyata
• Leaderboard: Sistem peringkat berdasarkan kontribusi
• User Profiles: Profil pengguna dengan tracking achievement

4. Konten Edukatif

• Comprehensive Guides: Panduan lengkap pengelolaan sampah
• Creative Solutions: Ide-ide inovatif untuk upcycling dan recycling
• Environmental Facts: Data dan statistik terkini tentang lingkungan
• Best Practices: Praktik terbaik dari berbagai negara

Teknologi yang Digunakan

Frontend Framework

• Next.js 15: React framework dengan App Router
• TypeScript: Type-safe JavaScript
• Tailwind CSS: Utility-first CSS framework
• Framer Motion: Library animasi (jika digunakan)
• Lucide React: Icon library yang konsisten

UI Components

• shadcn/ui: Komponen UI yang dapat digunakan kembali
• Radix UI: Headless UI components untuk accessibility
• Custom Components: Komponen khusus untuk fitur spesifik

State Management

• React Hooks: useState, useEffect, useContext untuk state lokal
• Custom Hooks: Reusable logic untuk fitur kompleks

Styling dan Animasi

• Lenis Smooth Scrolling: Scrolling yang halus di seluruh website
• Page Transitions: Transisi antar halaman yang smooth
• Hover Effects: Efek hover pada berbagai elemen
• Loading States: Indikator loading untuk interaksi yang membutuhkan waktu
• Dark/Light Mode: Theme switching capability
• Gradient Backgrounds: Modern visual design
• Micro-interactions: Subtle animations untuk UX yang lebih baik

Struktur Folder

``` src/ ├── app/ │ ├── (pages)/ │ │ ├── page.tsx # Homepage │ │ ├── belajar/ # Learning section │ │ ├── komunitas/ # Community section │ │ ├── quiz/ # Quiz section │ │ └── contact/ # Contact page │ ├── components/ │ ├── rb/ # Reusable blocks │ └── globals.css # Global styles ├── components/ │ ├── providers/ │ ├── ui/ │ └── PageTransition.tsx └── lib/ └── utils.ts ```

junkpedia - Bersama Membangun Masa Depan yang Berkelanjutan 🌱