1 : 1
Time Value Parity1 hour of design = 1 hour of physics across all courses
100%
Atomic GuaranteeZero partial writes or balance drift via prisma.$transaction
26
Curated DisciplinesDynamic courses across engineering, design, and science
<200ms
p95 API LatencyHigh-throughput Express 5 backend deployed on Railway
30 Min
Session SafeguardAutomated idle logout guarding active time balances
100%
Contract ParityShared Zod schemas across client forms and server parsers
The Operational Mandate
Context & High-Stakes Constraints
Traditional tutoring platforms impose significant financial barriers, restricting access to quality education. The vision for RuangTumbuh was to democratize knowledge exchange through the Time Banking philosophy: 1 hour of learning graphic design holds the exact same value as 1 hour of learning physics.
Engineering Mandate: Build a secure, cashless educational platform where users exchange skills using a decentralized Time Wallet, backed by atomic transaction safety, real-time messaging, and an engaging kinetic user experience.
02PRODUCTION INTERFACES
The RuangTumbuh Experience in Action
Explore the core interfaces of RuangTumbuh — from the interactive 2D physics landing canvas and cashless course catalog to real-time WebSocket communication and the Gemini AI copilot.
🔒ruang-tumbuh.vercel.app
01 / 05Official Brand Presentation
Official Project Showcase & Brand Flyer
Official capstone presentation flyer showcasing RuangTumbuh's time banking concept, modern dark aesthetic, and fullstack educational mentorship ecosystem.
◆ Time Banking Educational Paradigm◆ Next-Gen EdTech UI Design System◆ Bangkit Academy Capstone Winner Profile
03CAPABILITIES & WORKFLOW
Core Capabilities & Time Banking Workflow
Engineered to democratize peer education — combining transactional time banking, dynamic course syndication, unified calendar scheduling, and low-latency real-time collaboration.
Time Wallet Banking Engine
A cashless peer-to-peer knowledge exchange. Every new user receives 30 free minutes upon signup, trading learning hours instead of currency with atomic escrow and instant refunds.
Interactive 2D Physics & Kinetic UX
Hero canvas powered by Matter.js rigid-body physics, Lenis smooth inertia scrolling, and Framer Motion spring micro-interactions creating a playful, engaging feel.
Real-time Messaging & Community Hub
JWT-authenticated WebSocket pipeline via Socket.io, supporting low-latency 1-on-1 private mentoring chat and 5 topic-focused public community groups.
Google Gemini AI Copilot
Embedded AI assistant leveraging gemini-flash-latest with custom system instructions to guide students, recommend mentors, and resolve time wallet queries.
8 Mission-Critical Modules
Each module is engineered with robust transactional boundaries, modular isolation, and comprehensive audit trails.
MODULE // 01 OF 08Core Architecture
Time Wallet & Atomic Banking Engine
Central time banking ledger governing cashless balance transactions between students and mentors with strict ACID compliance.
- Initial Balance: Every newly registered account automatically receives 30 minutes of free learning credit (timeBalance: 30).
- Atomic Escrow Deductions: Booking requests execute inside prisma.$transaction to verify timeBalance >= durationMinutes and lock funds atomically.
- Automatic Mentor Remuneration: When a mentor accepts, the system issues a 6-character token and immediately credits the mentor's time wallet.
- Instant Automated Refunds: Rejected or cancelled requests trigger immediate balance rollbacks, returning time credits to the student with zero delay.
- Cryptographic Token Completion: Mentorship sessions are finalized by entering the 6-character verification token provided by the student to mark the session as COMPLETED.
- Session Review & Ratings: Students provide written feedback and a 1-to-5 star rating upon completing each verified session.
Atomic Time Banking & Booking Lifecycle
All time-wallet deductions and transfers execute inside isolated Prisma transactions to guarantee complete financial integrity without conventional currency.
Stage 01Student Action
Course Booking & Escrow Hold
Student selects a course slot. The system verifies timeBalance >= durationMinutes and executes an atomic escrow deduction.
prisma.$transaction Balance Deduction
Stage 02Mentor Review
Application Acceptance & Token Issuance
Mentor reviews the request. Upon approval, status transitions to ACCEPTED, a 6-character token is issued, and mentor wallet increments.
Wallet Credit & Token Generation
Stage 03Session Completion
Token Validation & Star Review
Following the session, the student inputs the 6-character token to mark the session COMPLETED, unlocking qualitative reviews and ratings.
Final Status Lock & Review Feedback
Atomic Rollback & Instant Refund Guarantee
All wallet deductions are protected by Prisma transactions. If a mentor rejects the booking or the student cancels prior to acceptance, the system automatically rolls back the escrow, refunding the exact durationMinutes back to the student's balance instantly with zero race conditions.
04SYSTEM ANATOMY & ARCHITECTURE
Decoupled Monorepo & Modular Service Architecture
Organized as a pnpm workspace monorepo separating shared validation contracts, Express 5 backend services, and a React 19 frontend SPA with strict boundary isolation.
Pattern: pnpm Workspaces Monorepo
Protocol: RESTful JSON API + WebSocket (WSS)
Frontend SPA
React 19 + Vite 7Modern Single Page Application powered by TanStack React Query v5 caching, Matter.js 2D physics canvas, Framer Motion spring animations, and Lenis smooth scrolling.
Shared Contracts (@rutu/shared)
Zod Schema LibraryMonorepo shared package ensuring 100% data contract parity between React Hook Form client validation and Express request body middleware without code duplication.
Gateway & Security
Express 5 + HelmetLayered security perimeter featuring dual-tier rate limiting (15 req/15min auth, 300 req/5min global), Helmet HTTP header hardening, CORS whitelisting, and JWT middleware.
Core Business Services
Express 5 + Socket.ioModular service architecture dividing domain logic: BookingService (atomic wallet), CourseService (infinite catalog), ScheduleService (WIB aggregator), and Socket.io server.
Storage & AI Cloud
PostgreSQL + Gemini AIPostgreSQL database managed by Prisma ORM with connection pooling, coupled with Google Generative AI API (gemini-flash-latest) and Multer local disk storage.
Curated Technology Stack
A modern engineering stack combining high-throughput user interfaces, modular backend architecture, and resilient data layers.
Frontend Application
React 19Core UI Library
Vite 7High-speed Build Tool & Dev Server
TanStack React Query v5Server State & Auto Cache Invalidation
React Router v6Client-side Routing
Matter.js2D Physics Rigid-Body Canvas
Framer Motion 12Spring Motion & Slide-in Drawers
Lenis ScrollSmooth Inertia Momentum Scrolling
Bootstrap 5 & React-BootstrapGrid System & Responsive Layout
React Hook Form + ZodType-safe Form State & Validation
Backend & Gateway
Node.js 22 LTSHigh-performance Server Runtime
Express 5Modular RESTful Web Engine
Socket.io 4Authenticated Real-time WebSocket Protocol
Prisma 7 ORMType-safe ORM & Automated Migrations
PostgreSQLRelational ACID-Compliant Database
@google/generative-aiGemini AI Copilot Integration
Passport / JWT & BcryptjsStateless Auth & Password Hashing (10 rounds)
Express Rate Limit & HelmetBrute-force Mitigation & HTTP Headers
Winston & Daily Rotate FileStructured Logging (14-day retention)
MulterMultipart Avatar Upload Storage
DevOps, Container & Testing
pnpm WorkspacesMonorepo Workspace Orchestration
Docker & Docker ComposeMulti-container Orchestration (DB, API, Frontend)
Multi-Stage Nginx AlpineUltra-lightweight Production Frontend Image
Vitest & React Testing LibraryClient-side Unit & Component Testing
Jest & SupertestBackend API Integration Testing
Husky & Lint-stagedAutomated Pre-commit Code Verification
GitHub ActionsCI/CD Automated Build & Verification Pipeline
Codebase Structure & Data Models
Clear boundary separation between system components, paired with modular schemas and structured repositories.
📁 rutu-backend/ (Express 5 + Prisma ORM)
├──src/controllers/ — Auth, user, booking, course, schedule, chat, and chatbot controllers
├──src/services/ — BookingService ($transaction), CourseService, ScheduleService, Gemini AI
├──src/middleware/ — Rate limiter (auth/global), Helmet, CORS whitelist, JWT verification, Multer
├──src/sockets/ — Socket.io real-time chat gateway with JWT handshake authorization
├──prisma/ — PostgreSQL schema definitions, migrations, and community seed scripts
Database Entities & Schema Models
User & UserSkill
User credentials, bcrypt password, timeBalance (Time Wallet integer), location, bio, passions JSON, and linked tutoring skills.
Course & CourseBooking
Course catalog entries with hierarchical JSON curriculum modules, linked to student bookings, 6-character verification tokens, and ratings.
Booking & Review
1-on-1 mentoring requests, scheduled times, duration in minutes, meeting links, status enums, and qualitative post-session feedback.
ChatRoom, Message & Participant
Direct 1-on-1 and topic-based community chat rooms, persistent message history, and user channel participation.
Notification
In-app activity notifications dispatching alerts for booking updates, session verification tokens, and chat mentions.
05SECURITY, API & PRODUCTION IMPACT
Hardened Perimeter & Security Safeguards
Multi-layered defense architecture protecting time-wallet balances, mitigating automated abuse, and enforcing strict data isolation.
API Endpoints & Routing Architecture
Authentication (/api/auth)
POST/api/auth/registerUser registration with shared Zod validation & 30-min balance bonus
POST/api/auth/loginAuthenticate credentials and issue stateless JWT Bearer token
User & Dashboard (/api/users)
GET/api/users/searchQuery users by name or email for collaboration
GET/api/users/:idRetrieve user profile, passions, and learning velocity
GET/api/users/:id/dashboardFetch learning dashboard metrics, active balance, and upcoming sessions
PUT/api/users/:idUpdate profile metadata and upload avatar image (Multer + JWT)
Course Management (/api/courses)
GET/api/coursesPaginated course catalog with category filter and debounced search
POST/api/coursesCreate new course with hierarchical syllabus modules (JWT Required)
GET/api/courses/:idRetrieve comprehensive course curriculum and mentor profile
PUT/api/courses/:idEdit course details, syllabus modules, or requirements (JWT Required)
DELETE/api/courses/:idDeprecate or remove course from active catalog (JWT Required)
Time Banking & Booking (/api/bookings)
POST/api/bookingsRequest course booking with atomic time wallet escrow deduction (JWT Required)
GET/api/bookings/studentRetrieve student's sent booking requests and session statuses (JWT Required)
GET/api/bookings/tutorRetrieve mentor's incoming student booking requests (JWT Required)
PATCH/api/bookings/:id/statusAccept, reject, or cancel booking with automated refund (JWT Required)
POST/api/bookings/:id/completeFinalize session via 6-character student verification token (JWT Required)
POST/api/bookings/:id/feedbackSubmit post-session 1-to-5 star rating and review (JWT Required)
Schedule & Calendar (/api/schedules)
GET/api/schedules/:idAggregated calendar combining course bookings and self-mentoring slots (JWT Required)
POST/api/schedulesCreate custom self-mentoring availability slot (JWT Required)
PUT/api/schedules/:idUpdate schedule timing and session duration (JWT Required)
DELETE/api/schedules/:idRemove schedule entry from calendar (JWT Required)
Real-time Chat & AI (/api/chats & /api/chatbot)
GET/api/chats/roomsList user's active private and community conversation channels (JWT Required)
GET/api/chats/:roomId/messagesFetch historical message stream for specified chat room (JWT Required)
POST/api/chats/privateInitialize or fetch private 1-on-1 mentorship chat room (JWT Required)
GET/api/chats/search-groupsSearch public community discussion channels (JWT Required)
POST/api/chatbotQuery Google Gemini AI assistant for guidance and mentor recommendations
Enterprise Security & Governance Standards
Tiered Rate Limiting Protection
Auth limiter restricts login/registration to 15 requests per 15 minutes to thwart brute-force attacks; global limiter restricts general traffic to 300 requests per 5 minutes.
Prisma ACID Transactions ($transaction)
All Time Wallet debits and credits execute inside isolated atomic transactions to prevent race conditions, double-spending, and partial ledger write corruption.
WebSocket JWT Handshake Authorization
Socket.io middleware validates JWT credentials before establishing the WSS connection, blocking unauthenticated socket connections at the transport layer.
Inactivity Session Safeguard
Client-side activity listener triggers automatic session revocation after 30 minutes of idle time to safeguard open time wallets on public or shared terminals.
Engineering Challenges & Production Results
How critical technical bottlenecks were overcome and verified under real production conditions.
Challenge // 01
Preventing double-spending and race conditions during concurrent booking requests. Solved by wrapping all wallet debits and escrow holds within isolated PostgreSQL transactions via prisma.$transaction, guaranteeing ACID compliance.
Challenge // 02
Synchronizing WebSocket real-time chat with persistent database storage while ensuring connection security. Built an authenticated Socket.io gateway requiring JWT verification during the initial WSS handshake (io.use).
Challenge // 03
Designing an interactive 2D physics hero experience that runs smoothly without degrading mobile performance. Leveraged Matter.js with constrained canvas boundaries and Lenis smooth momentum scrolling.