This is a submission for the DEV Weekend Challenge: Community
The Community
In today's world, we are drowning in information but starving for wisdom. Every morning, I wake up to the same cycle: 20 unread emails, a 10-item to-do list that only exists as a fog in my head, and a dozen "must-read" tabs I'll never actually open.
Then comes the commute . Every day, I lose close to three hours to the road. If you saw me on the bus, you'd see someone sleeping, listening to music, or staring aimlessly out the window.
When I get to my workplace, I hear the buzz: colleagues discussing the latest Al breakthroughs, current affairs, and new tech shifts. I want to be part of that conversation. I have a burning desire to upskill and stay informed, but on a 3-hour commute, productivity feels impossible. If I try to read, the constant bumping and sudden brakes make me motion-sick. If I try to type,the vibrating screen gives me a headache. It's physically draining to stare down at a small screen when the world is moving outside.
Even when I do manage to skim a thread or listen to a podcast, I'm fighting "Commuter Brain"- a state of mind that makes it nearly impossible to focus and 80% of the time i end up forgetting what i learned just a couple mins ago.
TransitFlow is a one stop solution that turns your commute time into guilt-free, productive, enjoyable experience of growth and learning.
What I Built
App Link
https://ai.studio/apps/affd8a5e-31a7-44d2-bb4e-3ad72e4493fa
TransitFlow is an AI powered productivity suite designed to be your Cognitive Co-pilot.
Core Features
🧠 AI Microlearning: Master any topic in 5-20 minute interactive sessions. The AI doesn't just lecture; it summarizes, asks checking questions, and ends with a quiz to ensure you stay on your toes and actually learn something.
📰 Bite-Sized News: No clickbait, no infinite scrolling, and no distracting YouTube links. Just the top 7 global or tech stories, summarized by AI and ready to be read or listened to.
📧 Inbox - Unread: Connect your Gmail and get a high-level audio summary of your unread emails. Instead of reading 20 threads, you listen to one 60-second brief.
🎙️ Multi-Note Task Maker: Speak your scattered thoughts, and Gemini turns them into organized, actionable project briefs. I implemented a "Sticky Note" system where you can store up to 5 voice-generated notes, with the ability to manually edit or delete them.
🏆 Productivity Gamification: To encourage a balanced workflow, users earn points for every session. Using all four tools in a single day unlocks a "Productivity Bonus," rewarding you for being well-rounded.
App Demo Images
The Workflow:
Home: Greeted by a clean, minimalist interface and an inspiring quote.
Dashboard: The "Productivity Hub" where you track your points and access the four core tools.
Interaction: Whether it's learning about Quantum Physics or summarizing your morning emails, the experience is driven by high-quality AI speech and clean, brutalist-inspired UI.
Code
The project is built as a full-stack application with a React frontend and an Express backend to handle secure OAuth flows.
Key Technical Highlights:
Gemini 3.0 Flash: Powers the reasoning behind the microlearning sessions and the task summarization.
Gemini 2.5 Flash TTS: Provides the "Zephyr" voice that narrates your news and email summaries.
Google OAuth 2.0: A secure backend implementation using google apis and cookie-session to manage Gmail access without exposing tokens to the client.
How I Built It
The Stack
- Frontend: React 18, Vite, Tailwind CSS (v4), and Framer Motion for those smooth "app-like" transitions.
- Backend: Express.js running on Node.js, serving as a proxy for the Gmail API and handling the OAuth callback.
- AI Engine: @google/genai SDK. I used a mix of models: gemini-3-flash-preview for speed and reasoning, and gemini-2.5-flash-preview-tts for high-fidelity speech generation.
- Icons: lucide-react for a consistent, professional aesthetic.
The "Aha!" Moment: The Task Maker Logic
One of the most satisfying parts was building the voice-to-brief pipeline. I used the Web Speech API for real-time transcription, then piped that raw text into a Gemini prompt that specifically looks for "actionable items."
code
TypeScript
// The prompt that turns "rambling" into "results"
const prompt = Organize the following spoken thoughts into a clean, ;
actionable project brief with bullet points. ONLY include information
from the transcript. Transcript: "${transcript}"
Challenges Overcome
The biggest hurdle was the Gmail OAuth flow within an iframe-based preview environment. Standard redirects don't work well in sandboxed frames. I implemented a popup-based flow with window.postMessage communication, ensuring that once the user grants access in the popup, the main app instantly refreshes its state to show the unread summaries.
Why TransitFlow?
We don't need more apps that steal our attention. We need apps that give us our time back. TransitFlow is my attempt at building a "quiet" tool—one that helps you process the world, learn something new, and get back to what matters.
App link
https://ai.studio/apps/affd8a5e-31a7-44d2-bb4e-3ad72e4493fa
Built with ❤️ for the DEV Community Weekend Challenge.
Submitted By:
Email: bhavna18182003@gmail.com
BBCoder
Top comments (0)