BrainBytes

Inspiration

We wanted a faster way to review EECS material during busy semesters. Traditional resources often feel heavy and time-consuming. BrainBytes turns UMich EECS content into short, focused lessons you can browse like social media, so you can learn on the go and review concepts in seconds.

What it does

BrainBytes is a bite-sized learning app for University of Michigan EECS courses. Students can choose from 34 EECS courses (EECS 183 through EECS 598), swipe through short lesson cards with key concepts, test understanding with at least 2 quizzes per course, track progress with XP and levels, get more lessons on demand via AI when the database runs low, the app covers core topics—from Python basics in EECS 183 to advanced machine learning, computer vision, and systems—in a quick, mobile-friendly format.

How we built it

How we built it Frontend: React + TypeScript with Vite, Tailwind CSS, Radix UI, and Motion for animations Backend: Node.js + Express with SQLite (better-sqlite3) for lessons and quiz data Content: 170 seeded lessons (5 per course) and 68 quizzes (2 per course), with optional AI-generated lessons via OpenRouter's AI when the seed data is exhausted Hosting: Frontend and backend deployed on Render as a static site and web service We structured the app around a swipeable feed, progress tracking, and a simple API that serves lessons by course.

Challenges we ran into

We ran into many challenges when coding this application. They include the following: Render deployment: The publish directory needed to be frontend/dist instead of dist for our monorepo setup. We also fixed a typo in the publish path. Database seeding: The database only seeded when empty, so adding new courses required updating the seed logic to run on startup and backfill new lessons. Static build paths: Asset paths broke in production until the publish directory was corrected and rebuilt.

Accomplishments that we're proud of

We are proud that we got information on 34 EECS courses with 170 lessons and 68 quizzes, we built a full-stack app running on Render with a clean, responsive UI, we made smooth lesson navigation and swipe interactions, and used AI fallback for extra content when users exhaust the seed lessons.

What we learned

We learned how to deploy a full-stack monorepo (React frontend + Node backend) on Render, how to keep a SQLite database in sync with seeded content, and how to balance static content with optional AI-generated lessons. We also improved our workflow for hosting and deployment configuration.

What's next for BrainBytes

BrainBytes should have more lessons and quizzes per course, support spaced repetition for better retention, add social features like sharing progress or streaks, include code sandboxes for hands-on practice, expand to other UMich departments beyond EECS

Built With

• express.js
• javascript
• motion
• node.js
• openrouter.ai
• radix
• react
• render
• sqlite
• tailwindcss
• vite