🚀 From Idea to v13: Building a Positive Youth "Hub" in 48 Hours with AI

#ai #devchallenge #showdev #webdev

What happens when you combine the energy of a digital community center with the power of generative AI? You get Iyk Hub—a safe space for youth to play, create, and find real-world opportunities.

I recently entered the Build with MeDo Hackathon, and it completely changed my perspective on rapid prototyping. Here is how I took a complex community vision and turned it into a full-stack reality using MeDo.

🎯 The Vision: A "Kasi" Community Center
In many communities, young creators (artists, coders, musicians) lack a safe space to showcase their work without the toxicity and pressure of traditional social media. I wanted to build a platform that focused on three "vibes":

Stress Relief: Simple, competitive mini-games.

Empowerment: A bridge to gigs and sponsored challenges.

Showcase: A "Creativity Wall" where the only interaction is positive emoji reactions. No chat = No negativity.

🛠️ The Tech Stack Evolution
I started with a traditional Next.js and Firebase plan, but for this hackathon, I pivoted to MeDo.

Frontend: React + Tailwind CSS (Mobile-First)

Backend/DB: Supabase with Row Level Security (RLS)

Auth: Secure Email-based authentication

🏗️ The Build: Iteration is the Key to Quality
The most interesting part of this experience was moving through 13 versions of the app. AI isn't a "one-click and done" magic wand; it’s a collaborator.

Phase 1: The Core Foundation
I started by defining the database schema via a Master Prompt. Within minutes, MeDo had generated tables for profiles, posts, and leaderboards.

Phase 2: Solving the "Play Zone" Logic
Building three different games (Tic-Tac-Toe, Memory Match, and Rock-Paper-Scissors) that all report to a single cumulative leaderboard was the first big challenge. I had to prompt the AI to ensure that regardless of the game played, the user's total_score was updated in the profiles table.

Phase 3: The v13 Refactor
This was my "Aha!" moment. I ran into API 400 errors because my initial schema was referencing a deprecated users table instead of the new profiles table. I used the AI to:

Refactor every single query across the Dashboard, Admin Panel, and Profile pages.

Switch the entire auth flow from username-based to a secure email system.

Implement a real-time notification bell for reactions and rank milestones.

💎 Features I'm Proud Of
The Sponsor Portal: Institutions can post "Sponsored Challenges" with prize pools. I even implemented a mock payment confirmation flow to simulate a real business environment.

The Creativity Wall: It supports full media uploads to Supabase Storage, allowing users to share real art from their devices.

Admin Dashboard: A high-level view of platform analytics—total engagement, post moderation, and bulk approval for job opportunities.

💡 Lessons Learned
If you are building with generative AI tools like MeDo, my biggest tip is: Don't just prompt for UI.
Use the AI to handle the "boring" but critical parts—like database RLS policies, error handling, and data normalization. That is where the real power lies.

🚀 Check it out!
I'm proud to have submitted Iyk Hub to the #BuildWithMeDo Hackathon.

Live Demo: https://app-bf30s4clnoch.appmedo.com/