Selamat datang di GAS Native!

Deskripsi

Membangun frontend e-commerce yang cepat, responsif, dan aman agar pelanggan dapat menjelajah katalog, mengelola keranjang, checkout, membayar via Midtrans, serta memantau pesanan melalui dasbor. Solusi harus terintegrasi mulus dengan backend Laravel.

Fokus pada UX mobile-first, alur pembayaran yang andal, dan proteksi halaman sensitif (checkout/dasbor) dengan manajemen sesi yang jelas.

Tumpukan Teknologi

• React 18 + Vite — SPA komponen, HMR cepat, build efisien.
• React Router DOM v7 — routing katalog/detail/keranjang/checkout/dashboard.
• React Context API — state global (auth/keranjang/notifikasi) tanpa kompleksitas Redux.
• Tailwind CSS — styling responsif dan efisien.
• Fetch API — wrapper sederhana untuk header/auth/error handling.
• Midtrans Snap — alur client-token aman, integrasi mudah.

Tantangan & Solusi

1) Integrasi Midtrans Snap di SPA React

• Dynamic script loading dengan cleanup untuk mencegah multiple injection.
• Token transaksi dibuat di server; frontend hanya memanggil window.snap.pay(token).
• Callback success/pending/error memperbarui status ke backend, menampilkan toast, mengosongkan keranjang, dan redirect.
• Idempotensi: order reference unik; cegah double-click via state “processing”.

2) Proteksi Rute, Manajemen Sesi, Auto-Logout

• PrivateRoute/GuestRoute berdasarkan AppContext.
• Validasi exp token pada mount/navigasi; auto-logout terarah bila invalid.
• Persistensi terukur (token minimal & keranjang) + sinkronisasi pasca login.
• UX aman: loading saat verifikasi sesi, tombol aksi dinonaktifkan saat sesi tidak valid.

Hasil

• Pengalaman belanja cepat dan konsisten di mobile.
• Pembayaran Midtrans andal; callback tertangani rapi.
• Sesi terproteksi otomatis; kepercayaan pengguna meningkat.

Deskripsi

Membangun dashboard admin e-commerce yang cepat, responsif, dan mudah dioperasikan untuk mengelola produk, kategori, pesanan, pengiriman, pembayaran, pengguna, dan admin. Masalah utama yang dipecahkan adalah sentralisasi operasional toko dalam satu antarmuka yang aman dan efisien, terintegrasi mulus dengan backend Laravel + Sanctum untuk autentikasi dan manajemen data.

Cakupan: ringkasan metrik, CRUD produk/kategori (unggah gambar, rich text), kelola pesanan & pengiriman, monitoring pembayaran, manajemen pengguna/admin, profil admin, serta ekspor laporan penjualan ke PDF.

Tumpukan Teknologi

• React 18 + Vite — SPA komponen, HMR cepat, build efisien.
• React Router DOM — routing sisi-klien, protected routes untuk area admin.
• Tailwind CSS — utility-first, konsisten dan responsif.
• react-data-table-component — tabel siap pakai (sorting/pagination) yang fleksibel.
• ESLint + plugin React/Tailwind + PostCSS/Autoprefixer — kualitas kode dan kompatibilitas.

Tantangan & Solusi

1) Autentikasi Admin + Protected Routes (Sanctum, CSRF, Expired Token)

Masalah:

• Integrasi React (Vite) dengan Laravel Sanctum butuh kredensial, CSRF, CORS yang benar.
• Token kedaluwarsa membuat sesi “terlihat” aktif di UI, tetapi server menolak (401).

Pendekatan & Solusi:

• Konfigurasi terpusat: baseURL, header default, withCredentials (cookie/CSRF).
• Interceptors: request (suntik token/header), response (tangkap 401/419 untuk auto-logout dan redirect).
• Protected routes: wrapper memeriksa state auth (token/role) sebelum render.

Hasil

• Alur login/logout lebih andal dan aman.
• Hilangnya “sesi palsu” di UI; error operasional turun, UX meningkat.

Deskripsi

Menyediakan portal gereja yang memudahkan jemaat mengakses renungan, jadwal ibadah, warta (PDF), tata ibadah (PDF), dan informasi gereja, sekaligus panel admin yang efisien saat data bertambah.

Kebutuhan khusus: aksesibilitas (Text‑to‑Speech, navigasi suara) dan chat real-time jemaat–admin dengan pembedaan alur guest vs login yang aman.

Tumpukan Teknologi

• Laravel 12, Eloquent ORM, Multi-Guard, Storage (public), Broadcasting (Pusher), MySQL.
• Blade, Bootstrap 5.3, jQuery + DataTables, Summernote, SweetAlert2, Web Speech API, Vite, Laravel Echo + Pusher.

Tantangan & Solusi

1) Chat Real-time (Guest vs Jemaat Login)

• Broadcasting Laravel + Pusher (MessageSent, MessagesMarkedAsRead).
• Channel authorization per guard; guest akses terbatas, jemaat di private channel.
• Laravel Echo subscribe channel; update UI on-event; penyimpanan dibedakan (guest tidak persist).
• Idempoten untuk penandaan “terbaca”.

2) Performa Tabel Admin saat Skala Data

• Server-side processing (Yajra DataTables) + validasi parameter.
• Eager loading untuk hindari N+1; indeks DB untuk kolom sering difilter.
• UX responsif dengan loading/feedback.

Hasil

• Aksesibilitas meningkat (TTS, voice nav).
• Panel admin efisien; error input berkurang.
• Chat real-time meningkatkan kedekatan tanpa overhead besar.

Deskripsi

Digitalisasi proses perpustakaan sekolah untuk katalog, booking, peminjaman/pengembalian, dan denda—mengurangi error pencatatan manual serta mempercepat operasional.

Tujuan: visibilitas status buku bagi siswa (ketersediaan, peminjaman aktif, lewat tempo, denda) dan panel admin lengkap dengan laporan terstruktur serta ekspor Excel dan notifikasi pengingat.

Tumpukan Teknologi

• Laravel 12 (guard multi-peran, keamanan, ORM relasional).
• Blade + Bootstrap 5 + Icons; Tailwind CSS 4 untuk styling granular.
• jQuery + Axios; Vite + laravel-vite-plugin.
• FCM (kreait/laravel-firebase) untuk push notification; Ekspor Excel (maatwebsite/excel).
• Tooling: PHPUnit, Faker, Pint, Sail, Pail.

Tantangan & Solusi

1) Validasi multi-form eksemplar buku

• Named Error Bags per aksi/form; key dinamis (mis. updateCopy_{id}).
• UX jelas; perubahan satu eksemplar tidak mengganggu lainnya.

2) Filter rentang tanggal + ekspor Excel

• Validasi start_date ≤ end_date; query whereBetween + eager loading.
• Ekspor via maatwebsite/excel; kolom dan format konsisten.

3) Integrasi push notification (FCM)

• Inisialisasi Firebase, izin, ambil token, simpan ke route user.fcm-token.store.
• Token terkait user; mekanisme refresh; kirim via Kreait server-side.

Hasil

• Komunikasi proaktif ke siswa tanpa polling.
• Peningkatan keterlibatan dan kepatuhan pengembalian buku.