Web Application / SemPurnama
Signature projectCompleted (Phase 1)Moonlight
Moonlight is an all-in-one web platform built with Laravel + React, combining productivity modules (calendar, notes, contacts, mail, news, search, privacy settings) with an OAuth2 identity and SSO layer for connected apps.
Case Study
Project Overview
Year 2024
- Moonlight combines two core pillars in one codebase: a personal productivity workspace and an identity/SSO platform.
- The productivity side includes calendar, notes, contacts, mail, news, search, settings, and privacy controls.
- The identity side acts as an OAuth2 provider for external applications and clients.
- This is not just a dashboard, but a personal operating hub with a strong security foundation including 2FA, device verification, activity logs, and recovery options.
Moonlight is a personal OS + SSO provider in one codebase. It already has solid auth/security, OAuth client ecosystem support, and practical daily modules (calendar, notes, contacts, mail, and news). The product is feature-rich and usable, with a few API/security UX areas still needing hardening for full production maturity.
Moonlight was built as a hybrid product: one side for end-user productivity, and one side for cross-application identity integration through OAuth2. Architecturally, Laravel handles authentication, authorization, business modules, jobs, and APIs, while React + Inertia delivers an SPA-like experience without splitting repositories. The security design is strong for a project of this size: beyond basic login, it includes multi-method 2FA, trusted-device verification, recovery channels, activity tracking, and scope-based access for OAuth clients. On the product side, users can manage schedules (including ICS + holiday feeds), notes/folders, contacts/labels, internal mail workflows (compose/sent/labels/attachments), privacy/data export, and lightweight marketplace/wallet transactions. For the developer ecosystem, there are admin/dev flows for OAuth clients and scope approval requests, plus documentation pipelines (Markdown docs + API reference endpoint). Operationally, the project is structured for local development and Vercel serverless deployment, with dedicated handling for routing, environment configuration, and API error responses. Its main strengths are feature breadth and identity-security integration, while current weaknesses are that some endpoints/UX are still interim (mock/TODO) and automated tests do not yet cover all critical modules. Overall, this is already a real product-shaped codebase, not a small prototype, with clear room to improve consistency toward full production-grade maturity.
- Web authentication uses Laravel Fortify + Inertia with custom redirect flow and post-login device verification.
- Security modules include TOTP, email/SMS 2FA endpoints, recovery email/phone, backup codes, and passkey hooks (some still UI placeholders).
- OAuth2 is powered by Laravel Passport with custom scope model, custom authorize flow, admin/dev client management, and mobile SSO authorization endpoint.
- Active mobile API currently focuses on auth, account management, OAuth authorize, and news endpoints.
- Core web modules are working: calendar (including ICS + holidays), notes/folders, contacts/labels, mail/labels/attachments, marketplace + wallet, translate, search aggregator, and RSS news aggregator.
- Privacy module supports async data export (job + notification), linked-service revoke, and digital legacy/trustee flow.
- Deployment-ready pattern for Vercel serverless is prepared with routing rewrite to Laravel entrypoint and API error shaping.
- Test coverage exists for auth/settings/OAuth API, but larger modules like calendar/mail/marketplace/search still have low coverage.
- Some parts are still not fully hardened: reset/verify token logic in API auth is TODO, passkeys view remains mock, and wallet top-up still uses mock payment.
- PHP 8.2
- Laravel 12
- Inertia Laravel
- Fortify
- Passport
- Telescope
- Wayfinder
- React 19
- TypeScript
- Inertia React
- Vite 7
- Tailwind CSS v4
- Radix UI
- TipTap
- PostgreSQL (production-style)
- SQLite (testing/local)
- Modular Laravel migrations
- Resend (email)
- Twilio (SMS)
- Sabre VObject (ICS/calendar)
- Brave external search
- Mojeek external search
- Google Translate external calls
- PHPUnit
- Pest
- ESLint
- Prettier
- TypeScript typecheck
Stack
More Projects
Continue exploring case studies.
Full Stack Platform / SemPurnama
Hayya
Unified Hayya ecosystem combining web app, mobile app, and core API delivery into one full stack product journey.
Browser Extension / Personal
StopBy
Stopby is a minimalist productivity Chrome extension that enhances your new tab with essential daily tools. It features local weather, prayer times, a Pomodoro timer, and quick access to important information—all in a cl
Web App / Personal
Ukur Jahit
A progressive web application (PWA) using Vue.js, Supabase, and TailwindCSS, likely intended for managing or calculating tailoring measurements.