GenBI UPI Organization Platform
A high-performance CMS and interactive landing page built for the Generasi Baru Indonesia community at UPI.
Streamlining organization management and public communication with a custom-built digital ecosystem.
This project is a comprehensive digital solution for GenBI UPI, combining a modern, SEO-optimized landing page with a robust administrative CMS. It serves as the central hub for managing scholarship awardees, organization news, events, and departmental data.
Core Value
The platform replaces manual content updates with an automated, user-friendly management system, allowing organization leads to publish rich-text news, manage event schedules, and maintain a digital directory of awardees with ease.
What Makes It Stand Out
The technical highlight is a type-safe CMS workflow integrating Draft.js for rich text editing with TanStack Query for seamless data synchronization, balancing editorial freedom with architectural consistency.
Rich Text CMS
Integrated Draft.js-based editor allowing administrators to publish formatted content directly from the browser.
Dynamic Data Management
Comprehensive CRUD systems for awardees, departments, and events with automated server-side synchronization.
Responsive Design
A mobile-first frontend optimized for diverse devices, ensuring a premium experience for students and the public.
Robust Form Handling
Type-safe forms utilizing React Hook Form and Zod, with support for complex multi-part data and file uploads.
Landing Page
Interactive community showcase with dynamic data points.
Admin Dashboard
Centralized control for organization management.
News Management
Rich text editing interface for content creators.
Modular Architecture
Clean separation of concerns with dedicated feature modules for CMS and Landing Page logic.
Advanced Data Fetching
Implementation of TanStack Query for efficient caching, pagination, and optimistic UI updates.
Type-Safe CMS Workflow
End-to-end type safety from form validation to API integration, reducing runtime errors.
Optimized Media Delivery
Leveraging Next.js Image and Video components for high-performance asset loading.
Rich Text Integration
Synchronizing Draft.js editor state with React Hook Form while maintaining clean HTML output for the public site.
Complex State Management
Balancing global UI state via Recoil and server-side data state via TanStack Query across a multi-module admin panel.
CMS Architecture
Building scalable CMS architectures with the Next.js App Router.
File Upload Workflows
Implementing professional file upload workflows with automated form data conversion.
Multi-role Authentication
Managing multi-role authentication and protected routes using NextAuth.js.
Project Info
Highlights
- Full-featured custom CMS dashboard
- Integrated Rich Text Editor (WYSIWYG)
- Responsive mobile-first Landing Page
- Type-safe form and state management
