Franky Rifdul Mannan

• Built and shipped multiple core SaaS modules from scratch, including Analytics Dashboard, Room Rate Management, Night Audit, Guest Management, and User Management.
• Engineered the AI Pricing Manager page, implementing complex UI logic to handle dynamic pricing rules, drag-select date range interactions, and subscription-based modal rendering.
• Integrated Channel Manager with the Channex API, implementing timeline pagination and Jotai atom-based caching for performant reservation data handling.
• Implemented a real-time WebSocket notification system for tentative booking alerts, including pub-sub room joining patterns and dynamic action-based notification rendering.
• Built PDF and Excel export workflows with jsPDF and ExcelJS, including group invoices, dynamic property branding, and a custom canvas renderer supporting Arabic RTL, CJK, and Cyrillic text.
• Modernized the analytics reporting suite by rebuilding legacy reports around shared report controls, and shipped 13 production reports behind independent feature flags for granular rollbacks.
• Led frontend discovery for an RBAC migration by auditing 186 role conditionals across 55 files and 8 modules, producing a permission-rule catalog and uncovering 8 authorization gaps for backend redesign.

Full-Stack Developer · AI teaching assistant for teachers

Stack: Nuxt 4, Vue, TypeScript, Tailwind CSS, Neon PostgreSQL, Drizzle ORM, Google OAuth, Gemini AI, Groq, Vercel.

• Built and deployed a multi-teacher classroom web app where teachers draft lesson material from a topic or an uploaded PDF/photo, generate exams, check student answers with AI, run quizzes, and track a leaderboard, with Google sign-in scoping every teacher's data across devices.
• Integrated Gemini for generation and answer checking with an automatic Groq fallback on rate limits, plus a Gemini-vision pipeline that reads a scanned multi-topic PDF and splits it into separate saved materials.
• Modeled per-teacher data (materials, question bank, vocabulary, leaderboard) in Neon PostgreSQL via Drizzle ORM behind Google OAuth sessions.

Full-Stack Developer · AI TikTok content assistant

Stack: Next.js 15, React, TypeScript, Gemini API (video), Groq API, Zod, Vercel.

• Built an AI content studio that reviews draft TikTok videos with Gemini video understanding, returning timestamped edit notes, alternative hooks, a voice-over script, and an honest separation of what is seen versus what is claimed.
• Generated captions, hashtag groups, and shootable video ideas via Groq, with guardrails against fake engagement and against promising virality.

Full-Stack Developer · Industrial maintenance management system (CMMS)

Stack: Next.js 15, React 19, TypeScript, Tailwind CSS 4, Prisma, PostgreSQL (Neon), Vercel.

• Built and deployed a full-stack maintenance management demo on Vercel with Neon PostgreSQL, connecting QR-based issue reporting, supervisor triage, technician repairs, and verification across mobile and desktop interfaces.
• Implemented role-based workflow rules and state transitions: technicians submit repairs for verification, on-hold work requires a reason, and supervisors can verify or reopen work orders, with audit history and downtime tracking.
• Built preventive maintenance work-order generation and URL-driven search, filters, sorting, and tabs. The portfolio demo uses seeded factory data and a demo user switcher.

Full-Stack Developer · RFID school attendance system

Stack: Next.js, React 19, TypeScript, Tailwind CSS, Express 5, Prisma 7, PostgreSQL.

• Built a full-stack RFID school attendance system (57 REST endpoints, 87 passing tests) with per-class-period scanning, a teacher RFID kiosk, and a 10-screen admin panel for students, schedules, permits, and audit logs.
• Enforced data integrity at the database layer: composite unique constraints to block duplicate scans, restricted deletes on referenced records, and per-academic-year student placement so historical recaps stay correct after class promotion.
• Wrote a zero-dependency .xlsx schedule importer (manual ZIP inflate), validated cell-by-cell against a reference parser (441 cells, zero diffs), and implemented offline-first scanning with client-timestamped events queued in IndexedDB.
• Completed the MVP, which is now in pilot testing at the target school.

Full-Stack Developer · AI-powered sales page generator

Stack: Next.js, TypeScript, Tailwind CSS, Laravel 11, PHP 8.3, Laravel Sanctum, MySQL, Groq API (Llama 3.3 70B), Gemini API.

• Built an AI-powered sales-page generator using Next.js and Laravel, integrating Groq (Llama 3.3 70B) with Gemini as an automatic fallback when Groq is unavailable.
• Developed a Laravel Sanctum REST API with generation-history CRUD, search, and pagination.
• Rendered structured AI output across three configurable Next.js templates: Modern, Minimal, and Bold.

Full-Stack Developer · Real-time solar telemetry dashboard (PoC)

Stack: Laravel 13, Inertia.js, React 19, TypeScript, Tailwind CSS.

• Built a real-time monitoring dashboard for solar/battery telemetry with edge-detected alerting (sustained conditions do not re-fire) and polling that pauses on hidden tabs.
• Rendered every chart (SVG battery gauge, area/line history with Catmull-Rom smoothing) in pure SVG/CSS with zero charting dependencies.
• Modeled sensor readings and alerts with typed PHP enums and API Resources, verified end-to-end in Postman.

Front-End Developer · Animated bilingual case-study site

Stack: Next.js 16, React 19, TypeScript, Tailwind 4, GSAP (ScrollTrigger, SplitText, Flip), Lenis.

• Built an animated, bilingual (ID/EN) portfolio from scratch with a canvas-rendered 3D hero, pinned scroll-driven sections, and static-generated case-study pages, with no animation dependencies beyond GSAP and Lenis.
• Built a headless-Chrome visual-validation workflow using the DevTools Protocol to automatically capture screenshots and verify UI changes across iterations.

Full-Stack Developer · Household finance mobile app and serverless API

Stack: React Native, Expo, TanStack Query, ElysiaJS, Drizzle ORM, Neon PostgreSQL, Vercel, EAS Build.

• Designed, built, and deployed a household finance app with expense and income tracking, multi-account balances, budgets, savings goals, recurring bills, spending forecasts, and lending with repayment tracking. Shipped the Android APK through EAS Build and the serverless API on Vercel with Neon PostgreSQL.
• Implemented a repository pattern with automatic in-memory/API switching, an integer-rupiah money model, and a server-side balance engine.
• Built spending analytics, self-serve account and category management, and the Neo Ledger interface with full light/dark theming. The deployed app is private to one household, with no authentication yet or public demo.

Bachelor of Informatics, GPA 3.69/4.00 (Cum Laude)

Full-Stack Developer Bootcamp

English Language Training