Aortastan STAN Course Website

Aortastan STAN Course Website

Project Overview: Aortastan STAN Course Website

  • Project Name: Aortastan Web Platform

  • Client / Company: Aortastan

  • Project Type: Project-Based Freelance

  • Role: Frontend Engineer

📌 Project Description

Aortastan is a dedicated Learning Management System (LMS) and specialized e-commerce course shop built for students preparing for the official PKN STAN (State Accountancy Academy) entrance exams, CPNS/PPPK, and Ministry of Finance (Kemenkeu) competency tests. The platform provides an end-to-end educational ecosystem—ranging from interactive tryouts to premium live class catalogs—helping prospective civil servants master their preparatory materials.

💻 Tech Stack

  • Framework: Next.js (React)

  • State Management: Zustand

  • Form Handling & Validation: React Hook Form + Zod

  • API Integration: RESTful API

🛠️ Key Contributions & Responsibilities

As the Frontend Engineer, I owned the client-side implementation of the web store, user onboarding journeys, and administrative system integrations, ensuring a smooth digital learning experience:

1. Dynamic Course Catalog & Shop Engine

  • Multi-Tiered Filtering System: Developed an intuitive, client-side filtering system allowing users to seamlessly sort through premium bundles (Paket Aortastan) by core categories (e.g., Kedinasan, CPNS/PPPK, UPKP Kemenkeu) and deep sub-categories (PKN STAN Reguler, Tugas Belajar, STIS).

  • E-Commerce Checkout Funnel: Built highly interactive course cards detailing promotions, buy-one-get-one deals, and live class features, integrated directly with a local state-driven shopping cart experience.

  • Specialized Exam Modules: Designed navigation structures supporting complex preparation components such as online Tryouts and interactive psychological evaluation modules (Pauli Test).

2. Interactive User Experience & LMS Integration

  • Guided User Onboarding: Implemented an interactive step-by-step feature tour modal across the landing pages to guide first-time users smoothly through high-priority actions, such as direct WhatsApp customer support lines.

  • Secure Authentication Gateways: Created responsive, performance-optimized access flows for student registration (Daftar) and secure login portals (Masuk).

  • Admin Panel Syncing: Developed components that dynamically populate real-time course availability, dynamic pricing flags, and promotional updates directly managed through backend administrative configurations.

🚀 Key Highlights & Architectural Impact

  • Atomic State & Onboarding Flows: Leveraged Zustand to handle complex user UI states effortlessly, maintaining clean client states for interactive feature tours and step-by-step configurations without unnecessary component re-renders.

  • Form Schema Validation: Used React Hook Form and Zod to strictly enforce client-side data validation schemas during checkout and authentication processes, guaranteeing seamless payload structures before interacting with the RESTful endpoints.

  • Next.js Performance & SEO: Utilized Next.js to provide quick initial page loads for a extensive product catalog, maximizing screen responsiveness and providing a highly intuitive interface for mobile and desktop students alike.