DoomScroll

Inspiration

The rise of social media and their additive feeds make our attention span decrease, but how could we merge doomscrolling with productivity, hence forth the idea of DoomScroll was born.

What it does

DoomScroll is a Short-form video content host that makes learning programming feel fun and scrolling through shorts productive.

Users have the option to:

Explore Difficulty of Topics to Choose from.
Scroll Through Content
Watch Dual Videos (Educational/Productive Content + Entertaining Addicting Video)
Take Interactive Quizzes

How we built it

Tech Stack

Frontend: React 18 + TypeScript + Tailwind CSS + Vite + Node.js
Backend: Strapi + SQLite (built-in database in Strapi)

Development Process

Rapid Prototyping: Started with core scrolling mechanics and explore page
Iterative Design: Built MVP features first, polished UX second
Cross-Platform Testing: Ensured compatibility across devices
Performance Optimization: Efficient video loading and state management

Challenges we ran

Video Synchronization Complexity: Managing two videos playing simultaneously with proper state synchronization which proved to be challenging
CORS and API Communication: Setting up proper CORS headers and ensuring seamless communication between the React frontend (port 5173) and Strapi backend (port 1337) required careful configuration
Frontend Integration with Backend JSON: Strapi sometimes nests fields, sometimes not, so normalizing data for React was tricky
Scroll + Video Sync UX: Getting TikTok‑style swiping with autoplay/pause videos and quiz transitions was a major challenge

Accomplishments that we're proud of

Connected Strapi CMS backend to React frontend for dynamic video + quiz content
Designed a 3‑level content structure (Levels → Topics → Collections), flexible for future expansion
Delivered a functional MVP with live backend data instead of static hardcoded content

What we learned
How to Ship Fast and Quick: Focus on MVP first, polish later with features so we could deliver a working prototype under 34 hours
System Design: How to model hierarchical data in Strapi using relations (Levels, Topics, Collections) instead of “nested collections”
Postman Tool (API Testing and Development): Tested & validated Strapi endpoints quickly, catching schema/API issues before integrating with the frontend
console.log() Debugging: Classic debugging with logs saved us when figuring out why Strapi returned fields at different nesting levels
Hackathon Workflow: The importance of scoping to MVP, then layering polish (UI, data flow, documentation, demo video)

What's next for DoomScroll

Deployment + Scalability: Move from local dev (SQLite) to cloud deployment (Postgres/Mongo + Vercel/Render/Heroku)
Polished Product: Improve UI/UX, compress media assets, and create smoother scrolling/quiz flows.
Mobile App: Build a React Native version for iOS/Android to replicate the vertical swipe experience.
Community Content: Allow users to upload their own explainer videos + quizzes to grow the platform organically.
Progress Tracking: Add dashboards, streaks, and adaptive learning paths for long‑term engagement.