moveYSplash: Social Platform Prototype System Design

Back to Portfolio

Full-Stack Product Engineering

Designed and built a social media platform prototype with search and content workflows using modern web tooling.

Search Performance Improved by 90%

Live DemoSource RepositoryRead Production Upgrade Log

Why This Project Matters

Demonstrates end-to-end product delivery, responsive UX, and measurable query optimization in a live academic project.

Tech + Architecture Summary

  • Tech: Next.js, TypeScript, Tailwind CSS, Supabase, PostgreSQL
  • Architecture: Next.js UI + app APIs -> Supabase Auth/Postgres -> feed composer + indexed search pipeline.

Impact Metrics

  • Search latency improved by ~90% after SQL query and indexing optimization.
  • Maintained responsive interaction across mobile and desktop breakpoints.
  • Published a live deployment for external technical walk-throughs.

Core Problem

Create a responsive social feed and search experience while keeping query latency low as content volume grows.

Build Notes

What I Owned

This project is my end-to-end product proof: I had to make the UI usable while also improving the backend search path enough that the app felt responsive.

Hard Lesson

The search work taught me that product latency often comes from query shape and indexing decisions, not only frontend rendering.

Next Enhancement

Next I would add a small measurement page showing before/after query plans, indexed columns, and mobile interaction screenshots.

High-Level Architecture

mermaid
graph LR
  UI[Next.js UI]-->API[App APIs]
  API-->DB[(Supabase Postgres)]
  API-->Search[Search Pipeline]
  DB-->Feed[Feed Composer]

Production-Grade Capabilities

  • Responsive multi-device UX with authenticated user workflows.
  • SQL-backed persistence with query optimization and indexing strategy.
  • Live deployment availability for external technical validation.

Engineering Decisions

  • Richer feed queries improved relevance but increased SQL complexity, so I introduced indexing and query simplification for faster reads.
  • Client-side interactivity boosts UX, but can increase bundle size; I split heavier views and reused shared components.

Behavioral + Impact Signals

  • Translated academic scope into a production-style deployed artifact.
  • Balanced UX richness with performance constraints using component splitting.
  • Wrote design documentation to communicate architecture and tuning choices.

Quality Guarantees

  • Authenticated users can only modify their own content.
  • Search responses remain consistent with stored content state.
  • Core feed actions remain usable on mobile and desktop breakpoints.

Recent Upgrades

  • Published a live deployment link to make academic project outcomes directly reviewable.
  • Added a dedicated system design doc page to explain architecture and performance decisions.
  • Linked the project into the production upgrade log as the product-facing example: Supabase auth, indexed search, and responsive UX.

Outcome Highlights

  • Improved search performance by 90% through query and indexing optimization.
  • Built a responsive UI across desktop and mobile experiences.
  • Used Supabase with SQL-backed storage for reliable content persistence.