ClassMate

Inspiration

As a student, I constantly found myself juggling too many tools — Canvas for assignments, Google Calendar for scheduling, random apps for notes, and AI chatbots for help. Everything felt scattered and inefficient. I wanted one platform that could combine all of it: coursework, scheduling, a Notetaker, and AI assistance. That’s what inspired me to build ClassMate, an all-in-one academic companion designed to simplify student life.

What it does

ClassMate integrates directly with Canvas and Google Calendar to centralize everything a student needs:

Syncs courses and assignments using the Canvas Instructure API
Displays all coursework in clean dashboards, course pages, and an assignment manager
Provides a full calendar view with Google Calendar integration for event syncing
Generates personalized study plans using Google Gemini
Includes an AI-powered chat assistant to help with questions or explanations
Offers a built-in Notetaker for capturing lecture notes or study ideas
Allows students to manage settings, API keys, calendar permissions, and account data

ClassMate turns scattered academic data into a single, organized workflow.

How I built it

I built ClassMate using:

React + TypeScript for the frontend
Tailwind CSS + shadcn/ui for clean, modern UI components
Canvas Instructure API to authenticate users and pull in courses/assignments
Google OAuth & Google Calendar API for event syncing and calendar access
Google Gemini API for text generation, study plan creation, and chat assistance
Vite for fast development and bundling

The app uses fully custom components, modal systems, and state management to create a smooth and responsive experience.

Challenges I ran into

I faced several significant challenges:

Google OAuth security + verification errors, especially configuring test users and redirect URIs
Canvas API pagination and inconsistent data formats
Fixing CORS and CSP roadblocks when loading external scripts

Debugging the Google Identity migration errors and configuring OAuth correctly took the longest.

Accomplishments I’m proud of

I’m especially proud that I:

Built this entire app solo — design, code, API integration, and AI features
Successfully connected Canvas + Google Calendar + Gemini in one seamless experience
Designed a user interface that’s both functional and visually clean
Implemented multiple pages, workflows, and modals that all feel unified
Created a tool that I — and other students — would genuinely use every day

ClassMate is the most full-stack, fully featured project I’ve built so far.

What I learned

Throughout development, I learned:

How to integrate complex OAuth flows with Google APIs
How to structure a scalable React application with multiple interconnected pages
How to work with the Canvas Instructure API and handle rate limits, pagination, and authentication
How to design UX that simplifies academic data rather than overwhelming the user
How to use AI models effectively inside product workflows—not just as chatbots

This project dramatically improved both my frontend and API-integration skills.