Web Applicationβ€’2024Completed (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.

Visit siteSource code
Laravel 12React 19TypeScriptPostgreSQLLaravel Passport
moonlight.sempurnama.my
Moonlight Interface Preview

Moonlight

Personal Operating System + Secure Identity Platform

Moonlight is an all-in-one web platform that combines everyday productivity tools with secure digital identity and Single Sign-On capabilities.

Built with Laravel 12, React 19, and TypeScript, the platform brings calendar, notes, contacts, mail, search, privacy controls, and authentication into one connected ecosystem. It also acts as an OAuth2 identity provider, allowing other applications to authenticate users through Moonlight.


Moonlight β€” Main Interface

Suggested image: Main dashboard or a clean overview of the Moonlight interface.


The Idea

Most digital workflows are fragmented across different servicesβ€”one app for notes, another for schedules, another for email, and another identity system for authentication.

Moonlight was designed around a simpler idea:

One account. One workspace. One identity across connected applications.

Instead of treating productivity tools and identity infrastructure as separate systems, Moonlight combines both within a single platform.


Core Experience

Moonlight provides a collection of integrated tools designed for everyday use:

  • Calendar β€” Events, scheduling, ICS support, and holiday feeds
  • Notes β€” Notes, folders, and structured personal information
  • Contacts β€” Contact management with labels
  • Mail β€” Compose, sent mail, labels, and attachments
  • News & Search β€” Built-in information and external search access
  • Privacy β€” Account controls and personal data export
  • Activity β€” Authentication and account activity tracking

Beyond productivity, Moonlight also includes lightweight marketplace and wallet-related workflows.


Moonlight β€” Productivity Modules

Suggested image: A collage showing Calendar, Notes, Mail, Contacts, and Settings.


Identity & Single Sign-On

Moonlight also functions as an identity layer for connected applications.

Using OAuth2 and Laravel Passport, external applications can authenticate users through Moonlight while requesting only the permissions they need.

Key capabilities include:

  • OAuth2 authentication
  • Single Sign-On
  • OAuth client registration
  • Scope-based permissions
  • Authorization approval flows
  • Developer client management
  • Secure API access

This allows Moonlight to operate not only as a standalone application, but as the authentication foundation for a broader application ecosystem.

Security

Security is treated as a core part of the product architecture.

Moonlight includes:

  • Multi-method Two-Factor Authentication
  • Trusted-device verification
  • Recovery channels
  • Authentication activity tracking
  • Scope-based OAuth access
  • Application authorization controls

These mechanisms help protect both user accounts and applications connected to the Moonlight identity layer.


Moonlight β€” Authentication

Suggested image: 2FA, trusted device, login activity, or OAuth authorization screen.


Architecture

Moonlight uses a unified full-stack architecture.

Backend

The backend is powered by Laravel 12, responsible for:

  • Authentication and authorization
  • Business logic
  • APIs
  • OAuth2
  • Jobs
  • Productivity modules
  • Developer integrations

Frontend

The interface is built with React 19, TypeScript, and Inertia React.

This provides an SPA-like experience while keeping the application within a unified Laravel codebase instead of maintaining completely separate frontend and backend repositories.


Technology Stack

Area Technologies
Backend PHP 8.2, Laravel 12, Inertia Laravel, Fortify, Passport, Telescope, Wayfinder
Frontend React 19, TypeScript, Inertia React, Vite 7, Tailwind CSS v4, Radix UI, TipTap
Database PostgreSQL, SQLite
Email & SMS Resend, Twilio
Calendar Sabre VObject
Search Brave Search, Mojeek
Translation Google Translate
Quality PHPUnit, Pest, ESLint, Prettier, TypeScript typecheck

Developer Ecosystem

Moonlight is designed to support applications built around its identity infrastructure.

Developers can manage OAuth clients, define application scopes, request scope approvals, access API endpoints, and work with dedicated developer documentation.

This makes Moonlight extensible beyond its own interface and allows new services to integrate with the same identity system rather than creating separate user accounts for every application.


Moonlight β€” Developer Platform

Suggested image: OAuth clients dashboard, scopes, API documentation, or connected apps.


Current State

Status: Completed β€” Phase 1

Moonlight has already grown beyond a simple prototype.

Phase 1 establishes the main foundation:

  • Authentication and account security
  • Productivity modules
  • OAuth2 and SSO
  • Privacy controls
  • External integrations
  • Developer tooling

The project is already product-shaped and usable, although some API, security UX, interim flows, and automated test coverage still require further hardening before full production maturity.


Why Moonlight

Moonlight is not defined by a single feature.

Its main value comes from combining two traditionally separate systems:

personal productivity and digital identity.

The same platform can serve as a user's daily workspace while simultaneously acting as the identity provider behind other applications.

That creates a foundation for something larger than an individual web app:

A connected ecosystem built around one workspace and one identity.


Project Links


Moonlight

Your workspace. Your identity. One connected ecosystem.