halaman login (dekstop)
profil (dekstop)
halaman beranda (dekstop)
papan peringkat sekolah (dekstop)
papan peringkat seluruh sekolah di jenjang nya (dekstop)
Ranked match (dekstop)
hasil kemenangan (dekstop)
report sistem

## Inspirasi

Kemampuan matematika siswa Indonesia jauh di bawah rata-rata negara OECD: 366 berbanding 472 pada PISA 2022. Kami melihat tiga penyebab di balik selisih itu. Latihan biasanya dikerjakan sendirian dan terasa membosankan, umpan balik datang terlambat (baru setelah dikoreksi guru), dan akses ke bimbingan tambahan tidak merata. Penelitian tentang gamifikasi (Li, Ma & Shi, 2023, meta-analisis 41 studi) menunjukkan unsur permainan dapat membantu belajar. Dari situ kami bertanya: bagaimana kalau latihan matematika terasa seperti pertandingan yang adil dan seru melawan teman dengan kemampuan setara?

Apa yang dilakukan produk ini

Study Clash Ranked adalah website gratis yang mengutamakan layar HP untuk pertandingan matematika 1 lawan 1 secara real-time.

Pertandingan Ranked: dua siswa mengerjakan 5 soal yang sama dengan timer di server. Jawaban benar yang lebih cepat mendapat poin lebih besar (100 sampai 150 poin per soal). Pemenang ditentukan dari total poin.
Pencarian lawan yang adil: rating bergaya Elo (semua mulai dari 1000) mempertemukan pemain dengan rating dan jenjang yang berdekatan. Kalau belum ada lawan dalam 10 detik, bot berbasis aturan akan menggantikan, jadi siswa tidak menunggu terlalu lama.
Mode Room: bermain dengan teman memakai kode 4 karakter.
Mode Latihan: berlatih melawan bot tanpa mengubah rating.
Peringkat: per jenjang (SD, SMP/MTs, SMA/SMK), dengan tampilan "Sekolahku" dan "Global", ditambah tingkatan (Perunggu, Perak, Emas).
Pembahasan instan: setelah pertandingan, jawaban yang salah dibahas langkah demi langkah.
Akses mudah: masuk dengan Google atau sebagai tamu, tanpa perlu mengunduh aplikasi, berjalan di HP maupun laptop.
Permainan yang adil: waktu dan penilaian dihitung di server, jawaban diperiksa di server, pemain mendapat peringatan agar tidak memakai bantuan AI, dan antarmuka sudah menyediakan alur pelaporan lawan yang mencurigakan.

Cara kami membangunnya

Frontend: Next.js 16, React 19, TypeScript, Tailwind CSS v4, KaTeX untuk menampilkan rumus, dan Zustand untuk state.
Real-time: satu server Bun menjalankan Next.js dan Socket.IO sekaligus. Pencarian lawan dan pertandingan yang sedang berjalan ditangani di server, dan Zod memvalidasi setiap data yang masuk lewat socket.
Data dan autentikasi: Supabase (PostgreSQL, Google OAuth, login anonim) untuk akun, rating, hasil pertandingan, dan peringkat.
Desain: sistem desain sendiri yang berpusat pada logo kapsul miring kami, dengan tata letak responsif dari HP kecil sampai layar desktop yang lebar.
Soal: bank soal awal dengan pembahasan langkah demi langkah, dipilih berdasarkan tingkat kesulitan sesuai jenjang.

Tantangan yang kami hadapi

Menjaga dua pemain tetap sinkron dengan satu timer utama di server, termasuk saat koneksi putus dan jawaban yang masuk terlambat.
Membuat soal tetap adil antar jenjang, dan mencegah soal terlalu sering berulang dengan bank soal yang masih kecil.
Memperbaiki antrean pencarian lawan yang berputar tanpa henti dan membuat pemain terjebak menunggu bot.
Membagi pekerjaan frontend dan backend tanpa saling merusak kesepakatan data, serta menggabungkan perombakan tampilan besar ke kode yang sedang aktif dikerjakan dengan aman.
Membuat satu tata letak yang pas di HP, laptop, dan layar yang sangat lebar.

Pencapaian yang kami banggakan

Satu alur lengkap yang bisa dimainkan: masuk, bertanding, hasil, pembahasan, dan peringkat.
Penilaian yang dipegang server, sehingga kecurangan lewat browser tidak berpengaruh.
Tampilan yang nyaman di HP maupun desktop.

Yang kami pelajari

Sistem real-time butuh satu sumber kebenaran, dan menguji dengan dua perangkat sungguhan lebih berguna daripada diagram apa pun.
Kesepakatan yang jelas antara frontend dan backend menghemat lebih banyak waktu daripada menambah fitur.
Keadilan (pertandingan berbasis rating, anti-curang) adalah fitur produk, bukan sekadar detail teknis.

Penggunaan AI

Kami memakai Claude Code untuk membantu menulis sebagian antarmuka di bawah arahan dan pemeriksaan kami, serta alat bantu AI untuk gambar maskot. Seluruh kode diperiksa dan di-commit oleh anggota tim. Produknya sendiri memakai algoritma rating dan bot berbasis aturan, bukan model bahasa.

Rencana selanjutnya

Produk

Tingkat kesulitan dan batas waktu per soal, serta soal berbasis template dengan angka acak.
Mata pelajaran lain di luar aljabar, memakai mesin pertandingan yang sama.
Sistem laporan yang terhubung ke moderasi, dan dasbor sederhana untuk guru.
- Fitur Bimbel (dalam rencana): latihan terarah dan kelas bersama bimbel mitra.

Biaya pengembangan dan keberlanjutan Siswa tetap bermain gratis. Biaya server, basis data, pembuatan soal, dan moderasi akan dibiayai dari dua jalur utama:

Turnamen antar sekolah. Kami menyelenggarakan turnamen berkala (kualifikasi lewat peringkat, final lewat Room) yang dibiayai sponsor berupa dana dan hadiah, misalnya voucher buku, beasiswa kursus, dan merchandise. Sponsor mendapat nama turnamen, logo, dan laporan partisipasi tanpa data pribadi siswa.
Kemitraan bimbel. Bimbel mitra dapat menyediakan kelas dan latihan terarah lewat fitur Bimbel, dan mendukung biaya platform sebagai imbalan akses ke komunitas pelajar yang aktif berlatih.