A TikTok-style vertical feed where every swipe is a new song.
Built as a full-stack, cross-platform social audio product — from database schema to shipped APK — by a solo founder-engineer.
Moon is a social music discovery platform that replaces static playlists with an infinite, swipeable audio feed — think "Instagram Reels, but for music." Users scroll through full-screen song cards, like, comment, follow artists, and upload their own tracks.
I designed, architected, and shipped the entire product end-to-end as a solo developer — frontend, backend, database, auth, storage, CI templates, and a production Android APK — across 3 major iterations (React Native → Vite Web → Capacitor Android).
| Metric | Value |
|---|---|
| Lines of Code (frontend) | 3,000+ across 26 source files |
| Database Tables | 6 relational tables with full RLS policies |
| SQL Triggers & Functions | 6 (auto-create profile, auto-count likes/comments/follows) |
| RLS Policies | 14 row-level security policies (CRUD per table) |
| Performance Indexes | 7 optimized PostgreSQL indexes |
| Database Migrations | 2 versioned migrations (privacy, preferences, lyrics) |
| UI Components | 12 reusable React components |
| Pages / Screens | 5 full-page views (Feed, Auth, Onboarding, Upload, Profile) |
| Custom Hooks | 2 (useAudio, useSwipe) |
| Git Commits | 41 commits across project lifetime |
| Platform Builds | 1 production APK shipped (~8.4 MB) |
| Major Pivots | 3 (React Native → Vite Web → Capacitor Android) |
The_Moon/
├── index.html ← PWA-ready entry with mobile viewport meta
├── vite.config.js ← Vite 8 + React plugin
├── capacitor.config.json ← Capacitor bridge → native Android
├── package.json ← Dependency manifest
│
├── src/
│ ├── main.jsx ← React DOM entry point
│ ├── App.jsx ← Root: auth gating, routing, session mgmt
│ │
│ ├── pages/
│ │ ├── AuthPage.jsx ← Email/password auth with demo skip
│ │ ├── OnboardingPage.jsx ← Multi-step onboarding wizard
│ │ ├── FeedPage.jsx ← TikTok-style vertical swipe feed
│ │ ├── UploadPage.jsx ← Audio + cover upload to Supabase Storage
│ │ └── ProfilePage.jsx ← User profile with stats & settings
│ │
│ ├── components/
│ │ ├── VoiceCard.jsx ← Full-viewport song card (core content unit)
│ │ ├── AnimatedCover.jsx ← CSS breathing animation on cover art
│ │ ├── SocialSidebar.jsx ← Like / comment / share rail
│ │ ├── CommentSheet.jsx ← Bottom sheet with real-time comments
│ │ ├── LyricsSheet.jsx ← Synced lyrics overlay
│ │ ├── BottomNav.jsx ← Glassmorphic navigation bar
│ │ ├── TopBar.jsx ← Feed mode switcher (Home / Global)
│ │ ├── AudioProgress.jsx ← Playback progress indicator
│ │ ├── VolumeSlider.jsx ← Gradient volume control
│ │ ├── SearchOverlay.jsx ← Full-screen search with filtering
│ │ ├── CreateModal.jsx ← Upload / Karaoke modal
│ │ └── DemoBadge.jsx ← "SAMPLE TRACK" label for demo content
│ │
│ ├── hooks/
│ │ ├── useAudio.js ← HTML5 Audio playback controller
│ │ └── useSwipe.js ← Touch gesture detection engine
│ │
│ ├── lib/
│ │ ├── supabase.js ← Supabase client initialization
│ │ ├── audioEngine.js ← Singleton audio manager
│ │ └── demoData.js ← 5 sample tracks for offline demo
│ │
│ └── styles/
│ ├── globals.css ← Design tokens, dark theme, typography
│ └── animations.css ← Keyframe animations, transitions
│
├── supabase_schema.sql ← Full production DB schema (207 lines)
├── migrations/ ← Versioned schema migrations
├── android/ ← Capacitor-generated Android project
├── app-debug.apk ← Signed debug APK (~8.4 MB)
├── assets/
│ ├── logo.png
│ └── postcards/ ← AI-generated album art
└── .github/
├── FUNDING.yml ← Sponsorship config
└── ISSUE_TEMPLATE/ ← Standardized issue templates
| Technology | Purpose |
|---|---|
| React 18 | Component-based UI with hooks, context, and concurrent rendering |
| Vite 8 | Lightning-fast HMR dev server and optimized production builds |
| React Router DOM 6 | Client-side routing with declarative navigation |
| Vanilla CSS | Custom design system — glassmorphism, CSS variables, keyframe animations |
| Inter (Google Fonts) | Premium typography across all platforms |
| Technology | Purpose |
|---|---|
| Supabase | Auth, Realtime DB, REST API, and object storage (BaaS) |
| PostgreSQL 17 | Relational database with JSONB, arrays, triggers, and RLS |
| Row-Level Security | 14 fine-grained policies — zero backend middleware needed |
| Database Triggers | Auto-computed counts (likes, comments, followers) for O(1) reads |
| Supabase Storage | 3 public buckets (audio, covers, avatars) with auth-gated uploads |
| Technology | Purpose |
|---|---|
| Capacitor 8 | Web → native bridge; single codebase ships to Android |
| Android SDK | Production APK compiled via Gradle |
| PWA Meta Tags | apple-mobile-web-app-capable, theme color, viewport-fit for native feel |
| Technology | Purpose |
|---|---|
| Git & GitHub | Version control with 41 commits, issue templates, funding config |
| ESM Modules | Modern "type": "module" throughout the project |
| Environment Variables | .env / .env.example with VITE_ prefix for secure config |
| SQL Migrations | Versioned, incremental schema evolution |
- Full-screen song cards with snap-to-card scrolling behavior
- Dual feed modes: Home (chronological) and Global (trending)
- Custom
useSwipehook for native-feel touch gesture detection - Auto-plays audio on card entry; pauses on exit
- Email/password sign-up & login via Supabase Auth
- Auto-profile creation on signup (PostgreSQL trigger)
- Multi-step onboarding wizard (avatar, display name, preferences)
- Demo mode bypass for frictionless first experience
- Avatar upload to Supabase Storage
- Follower / following counts (trigger-computed)
- Privacy toggle (private accounts restrict post visibility via RLS)
- User preferences stored as JSONB
- Audio file upload with cover art selection
- Files stored in Supabase Storage buckets with auth-gated write policies
- Caption, tags, and category metadata per post
- Immediate feed visibility on successful upload
- Animated like button with real-time count updates
- Comment bottom sheet with threaded discussion
- Share functionality scaffold
- Follow / unfollow with bidirectional count sync (trigger-based)
- Glassmorphic blur effects on navigation and overlays
- CSS custom properties design system (colors, spacing, typography, shadows)
- Smooth keyframe animations and micro-interactions
- Mobile-first, viewport-aware responsive layout
Instagram launched with just square photos. Snapchat launched with just a disappearing photo. Spotify ran invite-only for over a year.
None of them launched broad. They launched small, real, and closed — then earned their way out.
Moon follows the same playbook:
- Ship the smallest real loop first — feed, like, comment. No algorithm yet.
- Launch into one scene, invite-only — starting with independent artists, not the whole internet.
- Let real usage decide what's next — retention over vibes, evidence over timelines.
- Earn the smart stuff — recommendations get built once there's real behavior to train them on.
- Product vision & market positioning
- Database schema design (6 tables, 14 RLS policies, 7 indexes)
- Supabase Auth integration with auto-profile creation
- Full-screen vertical music feed with swipe gestures
- Like, comment, and share social engagement loop
- Audio upload pipeline with cover art and metadata
- User profiles with follow graph and privacy controls
- Multi-step onboarding experience
- Dark glassmorphic UI with animations
- Capacitor Android build → production APK shipped
- Invite-only closed beta launch
- Social feed (friends & follows filter)
- Recommendation engine (collaborative filtering)
- Creator analytics dashboard
- iOS build via Capacitor
- Movies vertical — same account, follow-graph, and feed backbone; new content type
# Clone
git clone https://github.com/sunil22516/The_Moon.git
cd The_Moon
# Install dependencies
npm install
# Configure environment
cp .env.example .env
# Add your Supabase Project URL and Anon Key to .env
# Run Supabase schema
# Paste supabase_schema.sql into Supabase Dashboard → SQL Editor → Run
# Start dev server
npm run dev
# Opens at http://localhost:5173
# Build for production
npm run build
# Build Android APK
npx cap sync
cd android && ./gradlew assembleDebugSunil — Solo founder-engineer
Designed, architected, and shipped the entire product end-to-end:
frontend, backend, database, auth, storage, and native Android build.
Built with ❤️ for music lovers who deserve better discovery.