CodePath WEB103 Final Project

Designed and developed by: Htet Htwe & David Salas Carrascal

🔗 Link to deployed app: TaskMate AI

TaskMate AI is a smart productivity and scheduling web app that helps students stay on top of classes, emails, and personal tasks, all in one place. The app connects to Canvas, Gmail, and Google Calendar via Composio to automatically gather assignments and events, then uses AI to organize and prioritize them.

It’s designed for students juggling academics, part-time jobs, and extracurriculars, offering an intelligent dashboard that learns from user habits and adapts over time.

As a full-time student, balancing deadlines from multiple classes and keeping track of meetings or counselor appointments can be overwhelming. I wanted to build an app that eliminates the mental load of remembering every due date or email reminder.

Frontend: React + Next.js, TypeScript, Tailwind

Backend: Express, PostgreSQL, Render, Composio

Analyzes all imported tasks and deadlines using AI to suggest what to focus on next — helping students stay productive without feeling overwhelmed.

Displays all assignments and events in a clean, color-coded weekly view that updates in real time whenever new data is synced.

Scans the user's Gmail inbox for important messages (like from professors) and displays brief, AI-generated summaries directly in the dashboard, highlighting key action items.

Allows users to filter the task list and calendar view by category (e.g., "School," "Personal") or by source (e.g., "Canvas," "Gmail") to focus on one area at a time.

Connect the application to third-party tools and APIs using the Composio platform.

Show pop-up notifications (toasts) to provide brief feedback to the user (e.g., "Task saved successfully!").

Prevent users from accidentally submitting a form or action multiple times by disabling the button after the first click.

Display a loading spinner or indicator to show the user that data is being fetched or an action is processing.

Allow users to log in or authenticate with the application using their existing GitHub account.

Implement a robust system on the server to catch, manage, and send clear, helpful error messages to the client instead of crashing.

Develop the core user interface interactions, such as clicking buttons, filling forms, and having the page update dynamically without a full reload.

Automatically navigate the user to a different page after a specific action (e.g., redirecting to the dashboard after a successful login).

Create a special backend function or endpoint to clear and reset the database to a default state, which is useful for testing.

Configure and deploy the entire full-stack application (both frontend and backend) to the Render hosting platform to make it live on the web.

Set up client-side routing to handle dynamic URLs, such as viewing a specific item by its ID (e.g., /tasks/123).