30 Days Web Challenge — Community-Driven Daily Build Experiment

The Problem

Most coding challenges follow a rigid structure — predefined tasks, predetermined outcomes, zero surprise. You know exactly what you’re building before you start. That’s great for learning, but it misses something: the chaos and creativity of building under real constraints with real input from real people.

What if the internet decided what you build? Every single day. For 30 days straight.

That’s the experiment.

The Solution

30 Days Web Challenge is a community-driven web app where strangers vote on what features get built each day. Anyone can submit feature suggestions, the community votes, and the top-voted feature ships by end of day. It’s part coding challenge, part social experiment, part live portfolio piece.

The site runs live at 30days.abduarrahman.com — visit it below or open it full screen to follow along.

Architecture

The app follows a static-first architecture with Next.js App Router, keeping things fast and deployable with zero backend infrastructure.

30 Days Web Challenge
├── Frontend (Next.js 16 App Router)
│   ├── App Router with RSC
│   ├── Client-side voting & interactions
│   └── Responsive mobile-first layout
├── Styling & Animation
│   ├── Tailwind CSS 4 (utility-first)
│   ├── Framer Motion (page & component transitions)
│   └── GSAP (complex scroll-driven animations)
├── Content Layer
│   └── MDX-based daily challenge entries
└── Deployment
    └── Vercel (edge-optimized, auto-deploy from main)

Why Community-Driven?

The whole point is that I don’t decide — the community does. Feature submissions are open, voting is transparent, and the results are public. This creates genuine constraints that force creative problem-solving, not the artificial kind you get from tutorial challenges.

Why Animation-Heavy?

The challenge is a visual showcase as much as a technical one. Framer Motion handles component-level animations (modals, transitions, hover states) while GSAP powers the complex, scroll-driven sequences that make each day’s reveal feel like an event.

Key Features

Community Voting System

• Open feature submissions — Anyone can suggest what gets built next
• Transparent voting — Vote counts are public, results are real-time
• Daily ship cycle — Top-voted feature gets built and deployed same day

Visual Showcase

• Animated daily reveals — Each day’s feature is presented with custom GSAP animations
• Scroll-driven storytelling — Progress through 30 days with immersive transitions
• Responsive design — Looks great on mobile, tablet, and desktop

Developer Experience

• Type-safe throughout — TypeScript from data layer to UI components
• Tailwind CSS 4 — Modern utility-first styling with zero custom CSS
• App Router — Leveraging React Server Components for performance

What I Learned

Building in public with community input taught me things solo side projects never could:

• Constraints breed creativity — When you can’t choose what to build, you get forced into unfamiliar territory. That’s where the real learning happens.
• Animation is storytelling — A well-timed GSAP sequence makes a feature reveal feel like an event, not just a deploy. The difference between “shipped” and “shipped with flair” is everything.
• Community engagement is a feature — The voting system isn’t just a gimmick; it creates genuine investment from strangers who want to see their suggestion come to life.
• Daily deploys build discipline — There’s no “I’ll finish it tomorrow” when the internet is watching. Ship or explain why you didn’t.