Sistem informasi akademik yang sebelumnya diterapkan di SMK IT Rabbany mengalami sejumlah kendala dalam implementasinya, seperti tampilan yang tidak responsif, pemisahan platform antara Website dan aplikasi Android, serta keterbatasan akses akibat kebijakan larangan penggunaan smartphone di lingkungan sekolah. Untuk menjawab tantangan tersebut, penelitian ini mengembangkan sistem informasi akademik baru dengan pendekatan Mobile First dan teknologi Progressive Web Applocation (PWA). Pendekatan Mobile First memastikan antarmuka yang responsif dan optimal pada perangkat seluler, sedangkan PWA memungkinkan akses lintas platform, penggunaan Offline, instalasi seperti aplikasi Native, serta peningkatan performa dan keterlibatan pengguna.
Pengembangan sistem dilakukan dengan metode Waterfall, mencakup tahapan analisis kebutuhan, perancangan sistem, implementasi menggunakan React.js, Express.js, dan Axios, serta pengujian menggunakan black-box testing. Hasil pengujian menunjukkan bahwa sistem berhasil meningkatkan efisiensi penggunaan, menyederhanakan proses Login, dan memberikan pengalaman pengguna yang lebih baik. Fitur-fitur utama seperti Caching, sinkronisasi data Offline, dan proteksi akses telah diimplementasikan secara efektif. Sistem ini diharapkan dapat mendukung kebutuhan pengelolaan akademik di lingkungan sekolah secara lebih fleksibel dan adaptif terhadap kebijakan yang berlaku.
Kata kunci: Sistem informasi akademik, Mobile First, Progressive Web Applocation, PWA, responsif, React.js