Raion Community Website
Official website for Raion Community with CMS and Form Management System
Overview
Raion Web is the official website for Raion Community, a student organization at the Faculty of Computer Science, Brawijaya University. Built as a comprehensive full-stack platform, it serves as the community's digital face — managing events, forms, product catalog (Raion Craft), and administrative operations. The platform provides a Content Management System (CMS) for events and activities, a dynamic Form Management System (FMS) for registrations and surveys, an Order Raion Craft System for software house service bookings, and an integrated Administration System for internal member management.
Problems
No centralized digital presence for community operations
Raion Community previously relied on scattered tools — Google Forms for registrations, Instagram for announcements, and manual spreadsheets for member management. There was no single platform unifying the community's brand, events, and administrative workflows.
Manual form and registration management is error-prone
Managing event registrations, member recruitment forms, and survey responses manually led to data entry errors, missed responses, and difficulty tracking submission history across multiple form instances.
Software house service ordering lacked a structured workflow
Raion Craft, the community's software house, received project inquiries through informal channels. There was no standardized ordering system, project tracking, or client communication workflow.
Role-based access for public vs. administrative content
The platform needed to serve both public-facing content (events, products, member profiles) and internal administrative functions (member management, form submissions, content moderation) with appropriate access controls.
Solutions
Unified platform with CMS, FMS, and admin system
Architected a comprehensive platform integrating four major subsystems: CMS for events/products/testimonials, FMS for dynamic form definitions and submissions, Order Raion Craft for software house bookings, and Administration System for member and operational management.
Dynamic form builder with submission tracking and export
Built a flexible Form Management System supporting customizable form fields, submission tracking, and CSV/XLSX data export. Each form instance maintains its own schema and response data, enabling multiple concurrent form campaigns.
Structured service ordering with booking workflow
Designed Raion Craft order system with a structured booking workflow — from service selection and project requirements gathering to status tracking and handoff. Provides both client and admin views of the project pipeline.
Clean Architecture with four-layer feature modules
Adopted a modular clean architecture pattern with four distinct layers per feature: Repository (database queries), Service (business logic), Storage (file operations), and Schema (Zod validation). Route handlers import from module barrels, keeping HTTP concerns separate from business logic.
Contributions
Developed the entire frontend application using Next.js 16 App Router with route groups for public ((main)), admin ((admin)), auth ((auth)), and form ((forms)) sections
Built the Content Management System frontend with CRUD interfaces for events, activities, products, and testimonials, including media upload and rich text editing
Created the dynamic Form Management System frontend with customizable form field rendering, submission display, pagination, and CSV/XLSX export UI
Implemented the Raion Craft ordering system frontend with step-by-step booking flow, service catalog browsing, and order status tracking
Designed and built all public-facing pages — Home, About, Events, Products, Members, and Activity showcase with responsive design and dynamic SEO metadata
Integrated with Supabase backend for authentication, data fetching via SWR and TanStack React Query, and real-time updates
Developed reusable UI components following the project's design system — cards, modals, forms, tables, navigation, and layout components
Implemented Framer Motion animations and transitions across page routes and interactive elements for a polished user experience
Features
Content Management System
Full CRUD management for events, activities, products, and testimonials with media upload, rich text, and SEO metadata
Form Management System
Dynamic form builder with customizable fields, submission tracking, pagination, and CSV/XLSX data export
Raion Craft Orders
Software house service ordering system with structured booking workflow, project tracking, and client communication
Administration System
Admin dashboard with member management, role-based access control, and operational tools for community management
Public Pages
Home, About, Events, Products, Members, and Activity showcase with responsive design and dynamic SEO metadata
Authentication & Authorization
Secure login with role-based access (admin, member) via Supabase/Better Auth with session management
Tech Stack
- Next.js
- TypeScript
- Supabase
- Drizzle
- Tailwind CSS
- PostgreSQL
- Tanstack
Gallery
1 / 10
Results
Complete Digital Platform
Delivered a comprehensive full-stack platform unifying brand presence, event management, form handling, and administrative operations
Clean Architecture
Four-layer feature modules (Repository, Service, Storage, Schema) ensure maintainability, testability, and clear code ownership
Modern Tech Stack
Next.js 16, React 19, TypeScript, Tailwind CSS v4, Drizzle ORM, and Supabase delivering performant and scalable architecture
Data Export Capabilities
Form submissions and event data exportable to CSV and XLSX formats for offline analysis and reporting