RacingType

RacingType

A focused typing test with realistic mechanical keyboard sounds, an interactive virtual keyboard, multiple practice modes, and detailed performance statistics.

Next.jsNext.jsReactReactTailwind CSSTailwind CSSTypeScriptTypeScript
N
Najib Bahrudin /
7 min read

Latar Belakang

Kemampuan mengetik merupakan keterampilan penting dalam aktivitas belajar dan bekerja secara digital. Namun, latihan mengetik sering kali terasa monoton karena hanya menampilkan teks dan hasil kecepatan tanpa pengalaman interaktif yang menarik. Pengguna juga membutuhkan informasi yang lebih lengkap untuk mengevaluasi performanya, seperti kecepatan, akurasi, konsistensi, dan perkembangan selama tes.

Berdasarkan kebutuhan tersebut, RacingType dikembangkan sebagai aplikasi latihan mengetik berbasis web yang menggabungkan pengukuran performa dengan pengalaman mengetik yang lebih imersif. Aplikasi ini menyediakan suara mechanical keyboard, visualisasi keyboard, beberapa mode latihan, serta statistik hasil yang terperinci.

Identifikasi Masalah

  • Latihan mengetik cenderung terasa monoton dan kurang personal.
  • Pengguna sulit mengetahui detail kesalahan serta konsistensi mengetiknya.
  • Banyak typing test berfokus pada WPM, tetapi kurang memperhatikan pengalaman penggunaan.
  • Kebutuhan latihan setiap pengguna berbeda, sehingga satu mode tes saja tidak cukup.
  • Preferensi tampilan dan latihan sering hilang ketika pengguna kembali menggunakan aplikasi.

Tujuan Pengembangan

RacingType bertujuan membantu pengguna melatih kecepatan dan akurasi mengetik melalui pengalaman yang fokus, menyenangkan, dan dapat dipersonalisasi. Hasil tes dirancang bukan hanya untuk menampilkan skor, tetapi juga membantu pengguna memahami pola performa dan area yang masih dapat ditingkatkan.

Overview Produk

RacingType adalah aplikasi typing test berbasis web yang membantu pengguna mengukur dan melatih kecepatan serta akurasi mengetik. Pengguna dapat memilih latihan berdasarkan waktu, jumlah kata, kutipan, atau mode bebas. Setelah tes selesai, aplikasi menampilkan WPM, raw speed, accuracy, consistency, kesalahan karakter, waktu latihan, dan grafik performa.

Buka live site RacingType

Target Pengguna

  • Pelajar dan mahasiswa yang ingin meningkatkan keterampilan mengetik.
  • Developer, penulis, dan pekerja digital yang sering menggunakan keyboard.
  • Pengguna yang ingin memantau WPM, akurasi, dan konsistensi secara lebih detail.
  • Penggemar mechanical keyboard yang menginginkan pengalaman audio saat berlatih.

Fitur Utama

Mode Latihan

  • Time mode dengan pilihan 15, 30, 60, atau 120 detik.
  • Words mode berdasarkan target jumlah kata.
  • Quote mode dengan pilihan panjang kutipan.
  • Zen mode untuk latihan bebas tanpa tekanan target.
  • Opsi tingkat kesulitan, angka, dan tanda baca.

Feedback dan Statistik

  • Perhitungan WPM dan accuracy secara real-time.
  • Statistik akhir berupa WPM, raw speed, accuracy, consistency, elapsed time, dan rincian karakter.
  • Grafik perkembangan WPM dan raw speed selama tes.
  • Personal best untuk setiap mode yang tersimpan secara lokal.
  • Hasil tes dapat diunduh dalam format JSON atau CSV.

Pengalaman Mengetik

  • Suara mechanical keyboard dengan pengaturan volume.
  • Virtual keyboard interaktif yang merespons tombol pengguna.
  • Enam tema keyboard: Classic, Mint, Royal, Dolch, Sand, dan Scarlet.
  • Sembilan pilihan font untuk menyesuaikan kenyamanan membaca.
  • Ghost mode, live WPM, feedback suara ketika salah, dan haptic feedback pada perangkat yang mendukung.
  • Dukungan PWA dan penggunaan offline melalui service worker.

Alur Penggunaan

  1. Pengguna membuka RacingType dan memilih mode latihan.
  2. Pengguna menentukan durasi, jumlah kata, panjang kutipan, atau mode zen.
  3. Pengguna dapat mengaktifkan angka, tanda baca, tingkat kesulitan, suara, dan virtual keyboard.
  4. Tes dimulai ketika pengguna mengetik karakter pertama.
  5. RacingType menghitung performa secara real-time dan memberikan feedback visual maupun audio.
  6. Setelah tes selesai, pengguna melihat statistik, grafik, personal best, dan dapat mengunduh hasil.
  7. Pengguna dapat mengulang tes dengan konfigurasi yang sama atau memilih mode lain.

Teknologi yang Digunakan

  • Next.js 16 dan React 19 untuk antarmuka aplikasi berbasis App Router.
  • TypeScript untuk menjaga keamanan tipe pada logika tes dan data statistik.
  • Tailwind CSS, Base UI, dan shadcn/ui untuk sistem tampilan dan komponen.
  • Motion untuk animasi serta transisi antarmuka.
  • Recharts untuk visualisasi grafik performa.
  • Drizzle ORM dan LibSQL untuk lapisan data yang type-safe.
  • Serwist untuk PWA, service worker, dan dukungan offline.
  • Biome sebagai linter dan formatter, serta Vercel untuk deployment.

Keunggulan Produk

Pembeda utama RacingType bukan sekadar mengukur WPM. Produk ini memberikan pengalaman mengetik yang lebih menyenangkan dan personal melalui virtual keyboard, audio mechanical keyboard, tampilan minimalis, tema yang dapat dipilih, serta statistik yang lengkap.

Kombinasi antara feedback langsung dan laporan performa membantu pengguna tetap fokus saat tes sekaligus memahami hasilnya setelah latihan selesai.

Batasan Saat Ini

  • Word pool yang tersedia masih berfokus pada bahasa Inggris.
  • Personal best tersimpan di localStorage, sehingga belum dapat disinkronkan antarperangkat.
  • Database saat ini belum digunakan untuk menyimpan riwayat performa setiap pengguna.
  • Belum tersedia halaman riwayat lengkap untuk melihat perkembangan jangka panjang.
  • Automated test untuk perhitungan WPM dan validasi hasil masih perlu ditambahkan.
  • Linting masih memerlukan perapian pada format, accessibility, dan beberapa penggunaan React hook.

Rencana Pengembangan

  • Menambahkan halaman riwayat hasil dan grafik perkembangan.
  • Menambahkan akun pengguna agar data dapat tersimpan lintas perangkat.
  • Menyediakan word pool bahasa Indonesia dan bahasa lain.
  • Membuat latihan adaptif berdasarkan huruf yang paling sering salah.
  • Menambahkan leaderboard atau challenge untuk memperkuat unsur “racing”.
  • Menyediakan onboarding singkat untuk pengguna baru.
  • Menjelaskan istilah raw speed, consistency, dan statistik karakter dengan bahasa sederhana.
  • Menambahkan halaman About atau How It Works untuk memperkuat identitas produk.

Kesimpulan

RacingType mengubah latihan mengetik dari aktivitas yang hanya mengejar angka menjadi pengalaman yang lebih fokus, imersif, dan informatif. Dengan mode latihan yang beragam, audio mechanical keyboard, virtual keyboard, personalisasi tampilan, dan statistik mendalam, RacingType memberikan fondasi yang kuat untuk membantu pengguna meningkatkan kemampuan mengetik secara bertahap.