Coda

Finally, everything in one place. For real this time.

Comment

Inspiration

Whenever we are studying or just doing assignments, we always have these main tabs open:

  • Spotify
  • Pomodoro Timer
  • My Todolist app
  • AI Helper
  • Canvas

And that's just to name a few. These are already 5 tabs open, not including the ones with assignments or documents! It can get overwhelming and annoying flipping through so many tabs, and sometimes these are even spread across different devices (like a laptop and iPad, etc.) just to study.

So as a solution, we created this study buddy web application, Coda, simplifying at least 5 tabs into 1. It accesses your Spotify and Canvas while providing a Pomodoro timer, task list, and AI Helper. Let's stop this tab fatigue and get to work!

What it does

Coda is a personalized study buddy designed to rescue you from "tab overload" by condensing your entire academic ecosystem into a single, high-aesthetic dashboard. Instead of flipping between a dozen windows, Coda integrates your Spotify playlists, Canvas assignments, and a smart Pomodoro timer into one seamless, distraction-free interface. It’s not just a tool; it's a "command center" built to keep you in the flow.

✨ Key Features

Fully Manipulatable Bento Grid: Your dashboard, your rules. Every widget—from the task list to the AI Helper—is fully resizable and draggable, allowing you to build a layout that fits your specific brain flow for the day.

Deep Personalization: Tailor your display with custom themes and "Glassmorphism" aesthetics that match your vibe, ensuring your workspace is as inspiring as it is functional.

Smart Focus Logic: Our Pomodoro timer doesn't just count down; it automates your flow by auto-switching to breaks with custom audio alerts and syncing your Spotify focus tracks to your current state.

Accessibility First: Designed with simplicity and high-contrast visuals, Coda ensures that managing your tasks and assignments is intuitive and low-stress, regardless of your device or setup.

How we built it

Tech Stack

Frontend

Technology Purpose
React + TypeScript UI framework and type safety
Tailwind Utility-first styling with custom design tokens

Backend

Technology Purpose
Express (Node.js) REST API server
TypeScript Type-safe server code with hot reload
Supabase (PostgreSQL) Database for users, todos, sessions, and Spotify tokens
Google OAuth User authentication
Spotify Web API Music playback and track info

Deployment

Technology Purpose
Vercel Frontend hosting
Render Backend hosting
Supabase Database hosting
GitHub Version control

Challenges we ran into

Bianca's Challenges:

  • first hackathon
  • first time tackling fullstack
  • first time doing real UI UX
  • API integration
  • figuring out hosting services
  • learning about secrets and cross-origin rules

Anthony's Challenges:

  • implementing new APIs
  • managing secrets and cross-origin rules
  • implementing AI chatbot

Accomplishments that we're proud of

  • Utilizing the Spotify API
  • Flexible customization and accessibility options
  • Deploying a fullstack app spread across several cloud services
  • Creating a product we will actually use!
  • Everything :)

What we learned

What Bianca Learned:

  • Fullstack
  • In-depth UX/UI
  • APIs and their application/integration
  • Secrets and cross-origin rules
  • Cloud services
  • GitHub reinforcement

What Anthony Learned:

  • New tech: Express.js, unique APIs, Supabase, and cross-origin communication

What's next for Coda

We will eventually find more study pains and slowly integrate new features as we discover them, along with fun personal customizations!

Built With

Share this project:

Updates