CrowdBand - The Band That Never Was

Where Reddit writes songs together, one lyric at a time

Comment

🎵 CrowdBand Hackathon Submission - Updated Sections

🎸 Inspiration

I've always loved how Reddit communities create things that are greater than the sum of their parts—whether it's r/place, collaborative ARGs, or inside jokes that become subreddit traditions. But I noticed something missing: music.

Music creation felt gatekept. You needed talent, equipment, or music theory knowledge. But what if anyone could contribute to a song? What if your 2 AM shower thought could become part of your community's anthem?

CrowdBand was born from a simple question: "What if a community could write songs the way they write inside jokes—one brilliant line at a time?"

The weekly format solves the "blank canvas" problem. Nobody has to write a whole song. Just one line. One moment of inspiration. The community votes, and suddenly you're part of something bigger. Week 1's theme—"🌙 3 AM Thoughts" in Lofi Hip Hop—taps into that universal experience of late-night clarity we've all had.

This isn't about creating professional music. It's about creating community artifacts. Songs that live in your subreddit's archive forever, with every contributor's name attached. It's r/place, but instead of pixels, you're placing lyrics.

🛠️ How I Built It

Tech Stack

  • Frontend: React + TypeScript for type safety and component reusability
  • Backend: Express.js with Devvit Server APIs
  • Database: Redis (Devvit KVStore) for real-time voting and data persistence
  • Platform: Devvit Web with custom post rendering
  • Build Tool: Vite for fast hot-reload during development
  • Design: Custom CSS with mobile-first responsive design

Architecture Decisions

4-Tab Navigation System

  • Studio (submission + voting)
  • Archive (view completed songs)
  • Leaderboard (top contributors)
  • Profile (personal stats + badges)

This structure keeps engagement high—even after submitting, users return to vote, check rankings, and revisit past songs.

Song Assembly Algorithm When the week ends, the backend automatically:

  1. Fetches all submissions by type (verse/chorus/bridge)
  2. Sorts by vote count
  3. Selects top 3 verses, 3 choruses, 2 bridges
  4. Assembles into structured song with attribution
  5. Saves to permanent archive

Real-Time Features

  • Live countdown timer using setInterval
  • Instant vote updates with optimistic UI
  • Badge unlock notifications
  • Auto-assembly when timer hits zero

Development Workflow with Kiro

Kiro AI transformed my development process:

  1. Spec-Driven Development: Used .kiro/specs/ to define data models and API contracts upfront. This prevented scope creep and kept me focused.

  2. Automated Bug Detection: Kiro's analysis caught a critical issue where the song modal wasn't triggering the archive data load—would've been a showstopper during judging.

  3. Code Generation: Generated boilerplate for the badge system (5 badge tiers Ă— CRUD operations) in minutes instead of hours.

  4. Build Optimization: Kiro hooks automated the client/server build process, reducing deploy time from ~3 minutes to ~45 seconds.

Estimated Time Saved: 15-20 hours across the hackathon (30-35% reduction)

🚧 Challenges I Ran Into

1. The Song Modal That Wouldn't Open

Problem: Clicking completed songs in Archive did nothing. No errors in console.

Solution: The loadAssembledSongs() function wasn't being called when switching to Archive tab. Added a useEffect hook tied to currentTab === 'archive' that triggers data load. Kiro's state flow analysis helped identify the missing dependency.

Lesson: In React, data doesn't magically appear—you need explicit load triggers for each view.

2. Vote Counting Race Conditions

Problem: When two users voted simultaneously, sometimes votes wouldn't count or would double-count.

Solution: Implemented Redis atomic operations with INCR and used separate vote tracking keys (vote:${userId}:${submissionId}) to prevent duplicates. Added optimistic UI updates on frontend while backend confirms.

Lesson: Never trust client-side counting for community features. Server is source of truth.

3. Mobile Navigation Overlap

Problem: Bottom navigation was covering the last submission card on mobile. Users couldn't click the vote button.

Solution: Added padding-bottom: 80px to .tab-content and set bottom nav to position: fixed. Also added smooth scrolling to prevent jarring jumps.

Lesson: Fixed elements need companion padding on scrollable containers. Test on actual devices, not just browser DevTools.

4. Timer Precision Drift

Problem: Countdown timer would slowly drift out of sync with actual server time, showing wrong time remaining.

Solution: Instead of decrementing every second, recalculate from Date.now() each tick. This prevents cumulative error from JavaScript's imprecise setInterval.

Lesson: Time-based features should always use absolute timestamps, not relative counters.

5. Empty State Handling

Problem: Leaderboard and Profile showed "Loading..." forever if user had no data.

Solution: Added proper empty states with helpful messages ("No contributors yet. Be the first!"). Also added debug logging to identify when API calls were failing vs. returning empty arrays.

Lesson: Empty states are just as important as content states. They set user expectations and guide behavior.

🏆 Accomplishments That I'm Proud Of

✅ Complete Feature Set: Built Studio, Archive, Leaderboard, and Profile—four distinct, polished views in 2 weeks

âś… Auto-Assembly Magic: The moment when the timer hits zero and the song builds itself feels like actual magic

âś… Beautiful Song Viewer: The modal that displays completed songs with each line attributed to its author is the crown jewel of the UI

✅ Mobile-First Success: 70% of Reddit users are on mobile—navigation works flawlessly on phones

✅ Sustainable Engagement Loop: Submit → Vote → Check Leaderboard → View Archive → Repeat next week

✅ Zero Database Migrations: Designed the schema right the first time—no painful data restructuring

âś… Kiro Workflow: Automated build pipeline reduced iteration time, letting me focus on features instead of config

đź“š What I Learned

Technical

  • Devvit Web's Power: The platform makes community-scale apps accessible. No server management, built-in auth, instant deploy.
  • Redis is Fast: Sub-millisecond reads made real-time voting smooth even with concurrent users.
  • TypeScript Saves Time: Caught 80% of bugs at compile time instead of runtime. Worth the initial setup.

Design

  • Empty States Matter: They're not an afterthought—they're your first impression for new users.
  • Mobile Constraints Improve Desktop: Designing for small screens forces simplicity that benefits everyone.
  • Visual Hierarchy is King: Users should know where to look without thinking.

Community Psychology

  • People Want to Contribute: Given a clear prompt and low barrier to entry, users will participate.
  • Democracy Motivates: Voting feels powerful. It transforms lurkers into active community members.
  • Attribution is Addictive: Seeing your username on a community-created song drives repeat engagement.

AI-Assisted Development

  • Kiro's Sweet Spot: Best for boilerplate generation, architecture decisions, and automated workflows. Not a replacement for creative problem-solving.
  • Specs Prevent Drift: Writing specs in .kiro/ forced clarity and prevented feature creep.
  • Time Multiplier: With good specs, Kiro generated ~40% of the codebase, letting me focus on the interesting problems.

🚀 What's Next for CrowdBand

Immediate Post-Hackathon (Week 1-2)

  • Production Deploy: Move to a real community (targeting r/LofiHipHop or r/IndieMusicFeedback)
  • Week 2 Launch: "🌧️ Rainy Day Vibes" - Acoustic/Singer-Songwriter
  • Feedback Loop: Survey users on what worked and what didn't

Short-Term (Month 1-3)

  • AI Music Generation: Use text-to-music AI to create actual audio from the lyrics
  • Album Art: AI-generated cover art for each week based on theme + genre
  • Export System: Let users download songs as PDFs or images to share on other platforms
  • Remix Feature: Let communities "remix" old songs by re-voting with new participants

Medium-Term (Month 4-6)

  • Multi-Subreddit Mode: Multiple communities collaborate on one mega-song
  • User Profiles: Personal pages showing contribution history across all 36 weeks
  • Genre Voting: Community votes on next week's genre instead of preset calendar
  • Advanced Badges: Dynamic badge system based on voting patterns and submission quality

Long-Term Vision

  • CrowdBand Network: Federated network of subreddits all running their own CrowdBand instances
  • Annual Compilations: Best-of albums voted by the entire CrowdBand community
  • Live Events: Synchronized writing sessions where communities compete in real-time
  • Reddit Developer Funds: Apply once we hit consistent engagement metrics
  • Open API: Let other developers build extensions (Spotify playlists, Discord bots, etc.)

Dream Feature

CrowdBand Live: A yearly event where communities gather in a voice chat, perform their songs with live musicians, and Reddit streams it. Like Eurovision, but for Reddit communities.

🎯 Why CrowdBand Fits Reddit

  1. Community-First: Every song is a collaborative effort. No individual stars—just the community.

  2. Inclusive by Design: You don't need musical talent. Just an idea. Just a moment.

  3. Creates Identity: Each community's song archive becomes part of their culture, like r/AskOuija's greatest hits.

  4. Encourages Return Visits: Weekly themes create habits. Users check back to vote, submit, and see results.

  5. Scales Naturally: Works with 10 users or 10,000. More participants = more diverse songs.

  6. Embraces Weirdness: Some lines will be brilliant. Some will be weird. All will be authentically Reddit.

đź’ˇ Key Insight

The best community games aren't about winning—they're about creating something together that none of you could create alone.

CrowdBand doesn't have winners and losers. It has contributors and creations. And every week, the community gets to say: "We made this. Together."

Built with ❤️ for the Reddit + Kiro: Community Games Challenge

Share this project:

Updates