Jangkau 🎯

Temukan Peluang Prestasimu Berikutnya
Satu tempat untuk semua informasi lomba, beasiswa, dan kompetisi di seluruh Indonesia.

Live Website • Screenshot • Fitur • Instalasi • Kontribusi

Stars Forks

📋 Daftar Isi

Live Website
Screenshot
Tentang Proyek
Fitur
Teknologi
Struktur Proyek
Instalasi
Penggunaan
API & Database
Scraper
Deployment
Kontribusi
Lisensi

🌐 Live Website

🚀 Akses Jangkau

Platform sudah live dan dapat diakses secara langsung. Untuk development lokal, ikuti panduan instalasi di bawah.

🖼️ Screenshot

🏠 Halaman Utama

Tampilan halaman utama dengan fitur pencarian dan filter

📋 Halaman Detail

Halaman Detail Tampilan detail lomba dengan informasi lengkap dan link pendaftaran

🎯 Tentang Proyek

Jangkau adalah platform web yang mengagregasi informasi lomba, kompetisi, dan beasiswa dari berbagai sumber di Indonesia. Platform ini dirancang untuk membantu mahasiswa dan pelajar menemukan peluang pengembangan diri dengan mudah dan terpusat.

Mengapa Jangkau?

Informasi Tersebar: Informasi lomba dan beasiswa sering tersebar di berbagai platform
Sulit Dicari: Proses pencarian yang memakan waktu dan tidak efisien
Terlewat Deadline: Sering melewatkan peluang karena tidak tahu informasi terbaru
Tidak Terstruktur: Informasi yang tidak terorganisir dengan baik

Jangkau hadir sebagai solusi dengan menyediakan:

✅ Satu Platform Terpusat untuk semua informasi
✅ Pencarian & Filter Canggih berdasarkan kategori, lokasi, dan tanggal
✅ Informasi Terstruktur dengan detail lengkap
✅ Update Otomatis melalui sistem scraping

✨ Fitur

🔍 Fitur Utama

Pencarian Lomba: Cari lomba berdasarkan nama, kategori, atau penyelenggara
Filter Canggih: Filter berdasarkan lokasi, jenis (gratis/berbayar), dan kategori
Detail Lengkap: Informasi komprehensif setiap lomba termasuk:
- Tanggal pendaftaran dan pelaksanaan
- Lokasi dan detail tempat
- Biaya pendaftaran
- Link pendaftaran resmi
- Tag kategori
Responsive Design: Optimized untuk desktop, tablet, dan mobile

🔧 Fitur Teknis

Auto Scraping: Sistem otomatis mengumpulkan data lomba dari sumber terpercaya
AI Processing: Menggunakan Google Gemini AI untuk strukturisasi data
Database Sync: Sinkronisasi otomatis antara development dan production
Multi-Environment: Mendukung development (SQLite) dan production (PostgreSQL)

🛠 Teknologi

Backend

Flask - Web framework Python yang ringan dan fleksibel
SQLAlchemy - ORM untuk manajemen database
PostgreSQL - Database production
SQLite - Database development

Frontend

Jinja2 - Template engine untuk Flask
TailwindCSS - Utility-first CSS framework
HTMX - Modern interactivity dengan minimal JavaScript
Material Symbols - Icon library dari Google

Data Processing

BeautifulSoup - Web scraping library
Google Gemini AI - AI untuk strukturisasi data
Requests - HTTP library untuk web requests

Tools & Utilities

Python-dotenv - Environment variables management
Babel - Internationalization (i18n)
PostCSS & Autoprefixer - CSS processing
Pre-commit - Code quality hooks

📁 Struktur Proyek

Jangkau/
├── 📁 database/           # Database dan model data
│   ├── init_db.py        # Inisialisasi database lokal
│   ├── models.py         # Model SQLAlchemy untuk scraper
│   ├── models_flask.py   # Model Flask-SQLAlchemy
│   └── jangkau.db        # Database SQLite (development)
│
├── 📁 scraper/            # Sistem web scraping
│   ├── main.py           # Entry point scraper
│   ├── scraper.py        # Logic utama scraping
│   ├── test_db.py        # Testing koneksi database
│   └── 📁 tools/         # Utilitas scraper
│       └── cek_model.py  # Checker model database
│
├── 📁 webapp/             # Aplikasi web Flask
│   ├── app.py            # Aplikasi utama Flask
│   ├── models.py         # Model Flask (auto-sync)
│   ├── requirements.txt  # Dependencies Flask
│   │
│   ├── 📁 helpers/       # Utilitas dan helper functions
│   │   ├── __init__.py
│   │   └── tools.py      # Filter Jinja2 dan utilities
│   │
│   ├── 📁 routes/        # Blueprint routing Flask
│   │   ├── __init__.py
│   │   ├── home.py       # Route halaman utama
│   │   └── detail.py     # Route halaman detail lomba
│   │
│   ├── 📁 static/        # Asset statis
│   │   └── 📁 css/
│   │       ├── input.css     # Input TailwindCSS
│   │       ├── output.css    # Compiled CSS
│   │       └── style.css     # Custom CSS
│   │
│   └── 📁 templates/     # Template Jinja2
│       ├── index.html        # Halaman utama
│       ├── detail.html       # Detail lomba
│       ├── tentang.html      # Halaman tentang
│       ├── 404.html          # Error page
│       │
│       ├── 📁 layouts/   # Layout templates
│       │   └── base.html # Base template
│       │
│       └── 📁 partials/  # Partial templates
│           ├── content.html  # Content component
│           ├── footer.html   # Footer component
│           └── navbar.html   # Navigation component
│
├── 📄 sync_models.py      # Sinkronisasi model database
├── 📄 package.json        # Dependencies Node.js (TailwindCSS)
├── 📄 tailwind.config.js  # Konfigurasi TailwindCSS
├── 📄 postcss.config.cjs  # Konfigurasi PostCSS  
├── 📄 requirements.txt    # Dependencies Python utama
└── 📄 README.md          # Dokumentasi proyek ini

🚀 Instalasi

⚡ Quick Start

# Clone & setup dalam 3 langkah
git clone https://github.com/bertramrayhan/Jangkau.git
cd Jangkau && python -m venv venv && source venv/bin/activate
pip install -r requirements.txt && cd database && python init_db.py

Prasyarat

Python 3.8+
Node.js 16+ (untuk TailwindCSS)
Git

1. Clone Repository

git clone https://github.com/bertramrayhan/Jangkau.git
cd Jangkau

2. Setup Python Environment

# Buat virtual environment
python -m venv venv

# Aktivasi virtual environment
# Windows
venv\Scripts\activate
# macOS/Linux
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt
pip install -r webapp/requirements.txt

3. Setup Node.js Dependencies

npm install

4. Environment Variables

Buat file .env di root directory:

# Database
APP_ENV=development
SECRET_KEY=your-secret-key-here

# AI Processing (opsional, untuk scraper)
GOOGLE_AI_API_KEY=your-gemini-api-key

# Database Production (jika diperlukan)
DATABASE_URL=postgresql://user:password@localhost/jangkau

5. Inisialisasi Database

cd database
python init_db.py
cd ..

6. Build CSS

npm run build

🎮 Penggunaan

Development Mode

1. Jalankan CSS Watcher (Terminal 1)

npm run dev

2. Jalankan Flask App (Terminal 2)

cd webapp
python app.py

3. Akses Aplikasi

Buka browser dan kunjungi: http://localhost:5000

Production Build

# Build CSS untuk production
npm run build

# Set environment
export APP_ENV=production

# Jalankan aplikasi
cd webapp
python app.py

Menjalankan Scraper

# Pastikan sudah set GOOGLE_AI_API_KEY di .env
cd scraper
python main.py

💾 API & Database

Model Database

Tabel Lomba (`lomba`)

- id (Primary Key)
- title (String, Not Null)
- source_url (String, Unique, Not Null) 
- content_html (Text)
- organizer (String)
- registration_start (Date)
- registration_end (Date) 
- event_start (Date)
- event_end (Date)
- is_free (Boolean)
- price_details (Text)
- location (String)
- location_details (Text)
- registration_link (String)
- created_at (DateTime)
- updated_at (DateTime)

Tabel Tag (`tags`)

- id (Primary Key)
- name (String, Unique, Not Null)

Relasi Many-to-Many (`lomba_tags`)

- lomba_id (Foreign Key -> lomba.id)
- tag_id (Foreign Key -> tags.id)

API Endpoints

Method	Endpoint	Description
`GET`	`/`	Halaman utama dengan daftar lomba
`GET`	`/detail/<int:lomba_id>`	Detail lomba berdasarkan ID
`GET`	`/tentang`	Halaman tentang Jangkau
`GET`	`*`	404 error handler

Query Parameters

q - Pencarian teks
tags - Filter berdasarkan tag (multiple)
tipe_lomba - Filter gratis/berbayar (gratis, berbayar)
lokasi - Filter berdasarkan lokasi

🕷 Scraper

Sistem scraper otomatis yang mengumpulkan data lomba dari berbagai sumber:

Fitur Scraper

Multi-source: Scraping dari InfoLombaIT dan sumber lainnya
AI Processing: Menggunakan Google Gemini untuk strukturisasi data
Batch Processing: Memproses multiple lomba sekaligus
Duplicate Detection: Mencegah duplikasi berdasarkan source_url
Auto-tagging: Otomatis menambahkan tag yang relevan

Cara Kerja

Crawling: Mengambil daftar lomba dari halaman sumber
Content Extraction: Ekstrak detail dari setiap halaman lomba
AI Processing: Strukturisasi data menggunakan Gemini AI
Database Storage: Simpan ke database dengan pengecekan duplikasi

Menjalankan Scraper

# Setup environment variable
export GOOGLE_AI_API_KEY=your-api-key

# Jalankan scraper
cd scraper  
python main.py

🌐 Deployment

Development

Aplikasi menggunakan SQLite dan berjalan di localhost:5000

Production

Aplikasi menggunakan PostgreSQL dan dapat di-deploy ke:

Vercel (recommended)
Heroku
Railway
DigitalOcean

Environment Variables Production

APP_ENV=production
DATABASE_URL=postgresql://user:password@host:port/database
SECRET_KEY=production-secret-key
GOOGLE_AI_API_KEY=your-gemini-api-key

🤝 Kontribusi

Yuk ikut bantu develop Jangkau! Project ini dibuat untuk mahasiswa Indonesia, jadi semua kontribusi dari teman-teman sangat berarti 🙏

🚀 Quick Start

# 1. Fork & Clone
git clone https://github.com/[username-kamu]/Jangkau.git
cd Jangkau

# 2. Setup
python -m venv venv && source venv/bin/activate
pip install -r requirements.txt && pip install -r webapp/requirements.txt
npm install && cp .env.example .env

# 3. Run
npm run dev  # Terminal 1
cd webapp && python app.py  # Terminal 2

# 4. Code & Submit PR!

💡 Cara Kontribusi

🐛 Bug Reports - Nemu bug? Report aja di Issues
✨ Feature Ideas - Punya ide keren? Share di Issues
💻 Code - Frontend, backend, scraper, semuanya welcome!
📚 Docs - Bantu improve dokumentasi
🌐 Website Sources - Saran website sumber lomba yang bagus

📖 Panduan Lengkap

Lihat CONTRIBUTING.md untuk panduan detail, tapi santai aja—nggak serumit yang dibayangkan! 😄

📝 Lisensi

Distributed under the MIT License. See LICENSE for more information.

📞 Kontak & Support

Author: Bertram Rayhan
GitHub: @bertramrayhan
Project Link: https://github.com/bertramrayhan/Jangkau

Laporkan Bug atau Request Fitur

Gunakan GitHub Issues untuk melaporkan bug atau meminta fitur baru.

Made with ❤️ for Indonesian students
Jangkau - Temukan Peluang Prestasimu Berikutnya

Built With

Updates

Bertram Rayhan started this project — Jun 25, 2026 04:07 AM EDT

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.

Jangkau 🎯

📋 Daftar Isi

🌐 Live Website

🖼️ Screenshot

🏠 Halaman Utama

📋 Halaman Detail

🎯 Tentang Proyek

Mengapa Jangkau?

✨ Fitur

🔍 Fitur Utama

🔧 Fitur Teknis

🛠 Teknologi

Backend

Frontend

Data Processing

Tools & Utilities

📁 Struktur Proyek

🚀 Instalasi

⚡ Quick Start

Prasyarat

1. Clone Repository

2. Setup Python Environment

3. Setup Node.js Dependencies

4. Environment Variables

5. Inisialisasi Database

6. Build CSS

🎮 Penggunaan

Development Mode

1. Jalankan CSS Watcher (Terminal 1)

2. Jalankan Flask App (Terminal 2)

3. Akses Aplikasi

Production Build

Menjalankan Scraper

💾 API & Database

Model Database

Tabel Lomba (lomba)

Tabel Tag (tags)

Relasi Many-to-Many (lomba_tags)

API Endpoints

Query Parameters

🕷 Scraper

Fitur Scraper

Cara Kerja

Menjalankan Scraper

🌐 Deployment

Development

Production

Environment Variables Production

🤝 Kontribusi

🚀 Quick Start

💡 Cara Kontribusi

📖 Panduan Lengkap

📝 Lisensi

📞 Kontak & Support

Laporkan Bug atau Request Fitur

Built With

Updates

Tabel Lomba (`lomba`)

Tabel Tag (`tags`)

Relasi Many-to-Many (`lomba_tags`)