Post

♻️ PILASAKI' - Pilah Sampah Kita

♻️ PILASAKI' - Pilah Sampah Kita
PILASAKI Banner

🏆 FINALIS ICONIC IT 2024

Git GitHub HTML5 CSS3 Bootstrap TensorFlow.js PHP MySQL Laravel

Website Edukasi Pengelolaan Sampah untuk Indonesia yang Berkelanjutan

🔗 Repository🌐 Live Demo


🎯 About PILASAKI

PILASAKI (Pilah Sampah Kita) adalah platform web inovatif yang dikembangkan untuk ICONIC IT 2024, bertujuan meningkatkan kesadaran masyarakat tentang pengelolaan sampah melalui teknologi modern dan pendekatan edukatif yang menarik.

🌍 Visi & Misi

🎯 Visi

  • Menciptakan Indonesia yang bersih dan berkelanjutan melalui edukasi pengelolaan sampah

📋 Misi

  • ✅ Meningkatkan pemahaman masyarakat tentang jenis sampah dan cara pengelolaannya
  • ✅ Menyediakan artikel informatif dan terkini mengenai pengelolaan sampah
  • ✅ Mendukung Tujuan Pembangunan Berkelanjutan (SDGs) dalam pendidikan dan keberlanjutan kota

🚀 Fitur Unggulan

📚 1. Sistem Manajemen Konten Artikel

  • 📝 Kategorisasi artikel yang terstruktur
  • 🔍 Fitur pencarian canggih
  • 📖 Riwayat artikel yang telah dibaca
  • 🏷️ Tag dan filtering yang mudah

🤖 2. Klasifikasi Sampah Otomatis dengan AI

  • 🧠 Powered by TensorFlow.js
  • 📸 Upload gambar untuk analisis otomatis
  • 🎯 Identifikasi kategori sampah secara real-time
  • 💡 Saran pengelolaan berdasarkan jenis sampah

💬 3. Forum Diskusi Interaktif

  • 🗣️ Platform diskusi antar pengguna
  • 📢 Berbagi pengalaman dan tips
  • 🤝 Komunitas peduli lingkungan
  • ⭐ System rating dan feedback

🛠️ Tech Stack

CategoryTechnologyPurpose
BackendLaravel 11Web Framework
FrontendBlade TemplatesServer-side Rendering
StylingTailwindCSSModern CSS Framework
DatabaseMySQLData Storage
AI/MLTensorFlow.jsImage Classification
Build ToolViteAsset Bundling
AuthenticationLaravel SocialiteSocial Login
Image ProcessingIntervention ImageImage Manipulation

📦 Dependencies Highlight

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "backend": {
    "laravel/framework": "^11.9",  
    "intervention/image": "^3.7",
    "laravel/socialite": "^5.15",  
    "anhskohbo/no-captcha": "^3.6"
  },
  "frontend": {
    "tailwindcss": "^3.4.14",
    "vite": "^5.0",
    "axios": "^1.6.4"
  }
}

🎨 Screenshots & Demo

🏠 Homepage & Dashboard

Clean, modern interface dengan navigasi yang intuitif

Dashboard

📖 Content Management

Sistem artikel dengan kategorisasi dan pencarian yang powerful

Artikel Feature

🤖 AI Classification

Machine learning untuk klasifikasi sampah otomatis

AI Classification Demo

Classification Interface

💬 Community Forum

Platform diskusi untuk membangun komunitas

Forum Discussion


🚀 Quick Start

📋 Prerequisites

  • PHP >= 8.2
  • Composer
  • Node.js & NPM
  • MySQL
  • XAMPP (recommended)

🔧 Installation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 1. Clone repository
git clone https://github.com/PeterChen712/Pilasaki.git
cd Pilasaki

# 2. Install PHP dependencies
composer install

# 3. Setup environment
cp .env.example .env
php artisan key:generate

# 4. Install Node dependencies  
npm install

# 5. Configure database (.env file)
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=pilasaki
DB_USERNAME=root
DB_PASSWORD=

# 6. Run migrations & seed data
php artisan migrate
php artisan db:seed

# 7. Build assets
npm run build

# 8. Start development server
php artisan serve

🌐 Access Application

Open your browser and visit: http://localhost:8000


🏗️ Project Structure

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
pilasaki/
├── 📁 app/                    # Laravel application logic
│   ├── Http/Controllers/      # Request handlers
│   ├── Models/               # Eloquent models
│   └── Services/             # Business logic
├── 📁 database/              # Database files
│   ├── migrations/           # Database schema
│   └── seeders/             # Sample data
├── 📁 public/               # Public assets
├── 📁 resources/            # Frontend resources
│   ├── views/               # Blade templates
│   ├── css/                 # Stylesheets
│   └── js/                  # JavaScript files
├── 📁 routes/               # Application routes
└── 📁 storage/              # File storage

🎯 SDGs Alignment

SDG GoalOur Impact
🎓 Quality EducationPlatform edukasi sampah interaktif
🏙️ Sustainable CitiesSolusi pengelolaan sampah perkotaan
🌍 Climate ActionMengurangi dampak lingkungan
♻️ Responsible ConsumptionEdukasi pola konsumsi berkelanjutan

🏆 ICONIC IT 2024 Journey

🗓️ Competition Timeline

PhaseDateMilestone
📝 RegistrationNov 2024Tim terdaftar
💡 IdeationDec 2024Konsep PILASAKI
⚡ DevelopmentJan 2025MVP Development
🎯 SubmissionFeb 2025FINALIST!

🎖️ Achievement

  • 🏆 FINALIST - Top 10 Web Development Competition
  • 💡 Innovation Award - AI Integration Excellence
  • 🌱 Social Impact Recognition - Environmental Solution

🚀 Key Features Deep Dive

🤖 AI-Powered Waste Classification

How it works:

  1. 📸 User uploads waste image
  2. 🧠 TensorFlow.js processes image
  3. 🎯 AI identifies waste category
  4. 💡 System provides disposal recommendations
  5. 📊 Analytics tracks classification patterns

Supported Categories:

  • ♻️ Recyclable (Plastic, Paper, Metal)
  • 🗑️ Non-recyclable
  • ☣️ Hazardous waste
  • 🌿 Organic waste

📚 Smart Content Management

Features:

  • 🏷️ Auto-tagging - AI-suggested tags
  • 🔍 Advanced Search - Full-text search with filters
  • 📈 Analytics - Reading patterns and popular content
  • 📱 Mobile-first - Responsive design

💬 Community Engagement

Community Features:

  • 👥 User profiles and achievements
  • 💬 Threaded discussions
  • ⭐ Reputation system
  • 🏆 Gamification elements

🔮 Future Roadmap

🎯 Phase 2 (Q2 2025)

  • 📱 Mobile App Development (Flutter)
  • 🌐 Multi-language Support
  • 📊 Advanced Analytics Dashboard
  • 🤖 Chatbot Integration

🎯 Phase 3 (Q3 2025)

  • 🚛 Waste Collection Scheduling
  • 🏪 Marketplace for Recycled Products
  • 🎮 Gamification & Rewards System
  • 🌏 Regional Expansion

👥 Team

Tim Developer PILASAKI

Team

Web Development Competition ICONIC IT 2024


🤝 Contributing

Kami welcome kontribusi dari komunitas! Silakan:

  1. 🍴 Fork repository
  2. 🌿 Create feature branch (git checkout -b feature/AmazingFeature)
  3. 💾 Commit changes (git commit -m 'Add AmazingFeature')
  4. 📤 Push to branch (git push origin feature/AmazingFeature)
  5. 🔄 Open Pull Request

🙏 Acknowledgments

  • 🏆 ICONIC IT 2024 - Platform kompetisi yang luar biasa
  • 🌱 Environmental Community - Inspirasi untuk solusi berkelanjutan
  • 🤖 TensorFlow Team - AI framework yang powerful
  • 💎 Laravel Community - Framework yang amazing

🌱 Mari Bersama Pilah Sampah Kita untuk Indonesia Berkelanjutan! 🌍

PILASAKI - ICONIC IT 2024 Finalist


Made with 💚 for a sustainable Indonesia

This post is licensed under CC BY 4.0 by the author.