Frontend Developer

Minggu/

Bulan/

Tahapan

Aktivitas Utama

Deskripsi Kegiatan

Outcome

Minggu 1-2 (Tahap 1: Orientasi dan Setup)

Onboarding Tools dan Teknologi

• Setup tools: VS Code, NodeJS, Expo CLI (React Native), Flutter SDK.

• Review dasar-dasar JavaScript/TypeScript, ReactJS, React Native.

Mahasiswa siap menggunakan environment frontend untuk web dan mobile.

Minggu 3-5 (Tahap 2: Basic Web Development)

Membuat Web Frontend Dasar

• Membuat aplikasi web sederhana dengan ReactJS.

• Mempelajari penggunaan ChakraUI/TailwindCSS.

• Membuat layout dasar halaman (landing page, dashboard).

Mahasiswa menghasilkan web sederhana berbasis ReactJS + styling framework.

Minggu 6-7 (Tahap 3: Basic Mobile Development)

Membuat Aplikasi Mobile Hybrid Sederhana

• Membuat aplikasi mobile sederhana menggunakan React Native atau Flutter.

• Memahami struktur navigasi, komponen, dan basic UI/UX mobile.

Mahasiswa menghasilkan aplikasi mobile hybrid sederhana.

Minggu 8-9 (Tahap 4: API Integration (Web & Mobile))

Menghubungkan Frontend ke API

• Belajar fetch API menggunakan Axios/Fetch.

• Menampilkan data dinamis dari API ke halaman web dan mobile.

• Implementasi autentikasi sederhana (login/logout) di frontend.

Web dan mobile apps terhubung ke API dan sudah memiliki login basic.

Minggu 10-11 (Tahap 5: Advance Web Frontend)

State Management dan Routing

• Implementasi state management (Context API / Redux sederhana).

• Mengatur routing halaman dengan React Router.

• Handling error dan loading state.

Aplikasi web lebih kompleks dan modular.

Minggu 12 (Tahap 6: UI/UX Enhancement)

Penyempurnaan Tampilan Web & Mobile

• Mengoptimalkan tampilan responsif dengan TailwindCSS / ChakraUI.

• Implementasi animasi sederhana dan UX improvement.

• Validasi form dan field input.

Web dan mobile apps tampil lebih profesional dan responsif.

Minggu 13-14 (Tahap 7: Advanced API & Auth Handling)

Peningkatan Keamanan dan Akses Data

• Integrasi token (JWT) di sisi frontend.

• Implementasi role-based access di UI.

• Refresh token dan auto-logout saat session habis.

Frontend mampu mengelola sesi autentikasi dengan baik.

Minggu 15 (Tahap 8: Persiapan Proyek Frontend)

Pemahaman dan Perencanaan Proyek

• Mahasiswa menerima project brief dari mentor berupa aplikasi Web atau Mobile yang akan dikembangkan. Mahasiswa mempelajari wireframe, alur navigasi, dan flow integrasi API yang telah disediakan, serta mendiskusikan teknis implementasi dengan mentor.

Mahasiswa memahami struktur, kebutuhan UI, dan teknis integrasi proyek frontend yang akan dikerjakan.

Minggu 16–18 (Tahap 9: Pelaksanaan Proyek Frontend)

Implementasi Proyek Sesuai Arahan

• Mahasiswa mengerjakan proyek frontend sesuai dengan desain dan instruksi yang telah ditentukan, termasuk implementasi layout, komponen UI, routing, integrasi API dan autentikasi. Dilakukan testing dan debugging untuk memastikan fungsionalitas berjalan baik.

Mahasiswa menyelesaikan proyek frontend sesuai arahan, siap ditampilkan sebagai portofolio, dan dapat diuji secara end-to-end.

Minggu 18 (Tahap 10: Final Review and Presentation)

Finalisasi dan Presentasi Proyek

• Final review project bersama mentor.

• Presentasi aplikasi web/mobile di hadapan tim.

• Dokumentasi project dan refleksi pembelajaran

Mahasiswa menyelesaikan magang dengan proyek web/mobile fungsional.