Mosaic

• 

  Members

• 

  Events

• 

  Home about section

• 

  Home

• 

  Organizer page

• 

  List View

• 

  Demo Wall

• 

  Example export

Inspiration

Mosaic was inspired by the way shared experiences. Clubs, events, or friend groups often get lost across group chats and social media. I wanted to create a unified space where everyone can contribute memories and revisit them later in a more visual, collaborative format.

What it does

Mosaic lets users create and contribute to shared "walls" of images, videos, and notes. Each wall is tied to an event (events which entertain) or group, with a unique link that others can join. Users can react to events, and explore uploaded content in a dynamic mosaic layout. The mosaic is downloadable and can be preserved or shared as a snapshot of the experience.

How I built it

I used:

• Next.js for building the frontend and routing logic
• Supabase for authentication, file storage, database, and real-time updates.
• Tailwind CSS for styling

Media is uploaded to Supabase Storage, metadata is managed via relational tables, and each wall tracks members, content, and events through Supabase’s Postgres backend.

Challenges I ran into

• Making the wall of images/videos/text arrange nicely.
• Figuring out the database policies

Accomplishments that I'm proud of

• A working full-stack platform with account creation, wall creation, sharing, and content upload
• Downloadable mosaic export and wall sharing functionality with some real-time functionality

What I learned

• Using Supabase as a full backend solution for auth, storage, and data
• Database policies

What's next

• Add different permission levels, different view types (public, private, moderated)
• Add support for messaging and per-tile comments
• A rewind feature to view what the wall looked like in the past

Built With

• nextjs
• supabase
• tailwindcss
• typescript