Welcome to GAS Native!

Description

Build a fast, responsive, and secure e‑commerce frontend for browsing, cart, checkout, Midtrans payments, and order dashboard, tightly integrated with an existing Laravel backend.

Focus on mobile‑first UX, reliable payment flow, and protecting sensitive routes (checkout/dashboard) with clear session management.

Tech Stack

• React 18 + Vite, React Router DOM v7
• React Context API for global state (auth/cart/notifications)
• Tailwind CSS for efficient responsive styling
• Fetch API with a small wrapper for headers/auth/errors
• Midtrans Snap for secure client-token payment flow

Challenges & Solutions

1) Midtrans Snap Integration in SPA

• Dynamic script loading with cleanup to avoid multiple injections.
• Transaction token created on server; frontend only calls window.snap.pay(token).
• Structured callbacks to update backend, show toasts, clear cart, and redirect.
• Idempotency: unique order reference and disabled double-click via “processing” state.

2) Route Protection, Session Management, Auto-Logout

• PrivateRoute/GuestRoute based on AppContext.
• Validate token exp on mount/navigation; clear state and redirect when invalid.
• Measured persistence (minimal token + cart) and resync post-login.
• Safe UX: loading during session verification, disabled actions when invalid.

Results

• Fast, consistent mobile experience.
• Reliable Midtrans payment flow with clean callbacks.
• Protected navigation with automatic session handling.

Description

Build a fast, responsive e‑commerce admin dashboard to manage products, categories, orders, shipping, payments, users, and admins. The core problem is centralizing operations in a secure, admin‑friendly interface integrated with a Laravel + Sanctum backend for authentication and data management.

Scope: dashboard metrics, product/category CRUD (image upload, rich text), order/shipping management, payment monitoring, user/admin management, admin profile, and PDF sales reports.

Tech Stack

• React 18 + Vite, React Router DOM v7
• React Router DOM — client-side routing with protected routes for admin area.
• Tailwind CSS — utility-first, consistent and responsive styling.
• react-data-table-component — customizable tables (sorting/pagination).
• ESLint + React/Tailwind plugins + PostCSS/Autoprefixer — quality and compatibility.

Challenges & Solutions

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

Problem:

• Proper credentials/CSRF/CORS setup with Laravel Sanctum.
• Expired tokens made the UI “look” logged in while server returned 401.

Approach & Solution:

• Centralized config: baseURL, default headers, withCredentials.
• Interceptors: request (inject token/headers), response (catch 401/419 → auto-logout and redirect).
• Protected routes: wrapper checks auth state (token/role) before rendering.

Impact:

• Reliable and secure login/logout flow.
• Eliminated “stale UI sessions”; fewer operational errors and better UX.

Results

• Admin panel fully functional with real data.
• Secure and efficient admin operations.

Description

Provide a church portal for easy access to devotionals, service schedules, bulletins (PDF), liturgy (PDF), and church information, with an efficient admin panel as data grows.

Special needs: accessibility (Text‑to‑Speech, voice navigation) and real‑time chat between members and admins with distinct guest vs logged‑in experiences.

Tech Stack

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

Challenges & Solutions

1) Real-time Chat (Guest vs Logged-in)

• Laravel Broadcasting + Pusher (MessageSent, MessagesMarkedAsRead).
• Channel authorization per guard; private channels for logged-in users.
• Laravel Echo subscriptions; differentiated persistence (guest not persisted).
• Idempotent “read” status updates.

2) Admin Table Performance at Scale

• Server-side processing (Yajra) + parameter validation.
• Eager loading; DB indexes on frequent filter/sort columns.
• Responsive UX with loading/feedback.

Results

• Improved accessibility (TTS, voice nav).
• Efficient admin operations; fewer input errors.
• Real-time chat without heavy infra.

Description

Digitalize school library processes for catalog, reservations, loans/returns, and fines—reducing manual errors and speeding up operations.

Goals: clear visibility for students (availability, active loans, overdue, fines) and a full admin panel with structured reports, Excel export, and reminder notifications.

Tech Stack

• Laravel 12 with secure auth, multi-roles, and relational ORM.
• Blade + Bootstrap 5 + Icons; Tailwind CSS 4 for granular styling.
• jQuery + Axios; Vite + laravel-vite-plugin.
• FCM (kreait/laravel-firebase) for push; Excel export (maatwebsite/excel).
• Tooling: PHPUnit, Faker, Pint, Sail, Pail.

Challenges & Solutions

1) Multi-form validation for book copies

• Named Error Bags per action/form; dynamic keys (e.g., updateCopy_{id}).
• Clear UX; changes are atomic per copy.

2) Date-range filtering + Excel export

• Server validation for start_date ≤ end_date; efficient queries with whereBetween.
• Excel via maatwebsite/excel; consistent columns and date formatting.

3) Push notifications (FCM)

• Initialize Firebase, request permission, get token, store to user.fcm-token.store.
• Associate token to user; refresh handling; send via Kreait on server.

Results

• Proactive communication to students without polling.
• Increased engagement and on-time returns.