Your academic life, finally organized. A modern, kanban-driven operating system for students.

 

Live App: vector.prodhosh.me  |  API Docs: vector.prodhosh.me/api-docs

THE FULL STORY IS IN DOCUMENTATION.md

We have meticulously documented the entire architecture, UI flow, video walkthroughs, database schemas, and email templates in our DOCUMENTATION.md file. Please check it out for a comprehensive deep dive!

Table of Contents

• Why I Built This
• Features
• Future Plans
• Tech Stack
• Architecture
• API Documentation (Swagger)
• Running Locally

Why I Built This

As a student, I noticed a frustrating pattern when trying to organize my academic life. The current solutions on the market generally fall into two extremes:

1. They are too expensive: Any app that has genuinely useful integrations (like Google Calendar sync, AI features, or smart email reminders) hides them behind a pricey premium subscription that most students can't justify.
2. They are too complicated: Free tools (like Notion or Obsidian) are incredibly powerful, but they are completely blank canvases. We end up spending 5 hours setting up the "perfect" database with 50 custom properties, only to abandon it a week later because it requires too much daily maintenance.

I just wanted a free, smart tool to track my assignments effortlessly.

That's why I built Vector OS. It gives you the best of both worlds: a completely free, minimalist Kanban board that's stupid-simple to use, but supercharged under the hood with premium automations (like automatic calendar syncing and weekly email reports) that do the heavy lifting for you.

Features

Core Task Management

• Full CRUD Capabilities: Create, read, update, and delete tasks instantly.
• Secure Authentication & OAuth: Built-in email/password auth via Supabase so your data stays yours. We also support seamless OAuth login flows (like Google) to make signing up frictionless. (Our OAuth consent screen is officially branded and verified in Google Cloud Platform as "Vector").
• Simple Kanban Boards: Drag and drop your tasks between To Do, In Progress, and Done.
• Priority & Deadlines: Tag tasks as High, Medium, or Low, and set firm due dates.
• Beautiful, Fast UI: We use modern shadcn/ui components for a premium, accessible design. The dashboard updates instantly when you move things around, looking great on both desktop and mobile.

Premium User Experience

• Interactive Onboarding: Built-in interactive product tours (powered by driver.js) that automatically guide new users through setting up their workspace and learning the ropes.
• Global Command Menu: Hit Cmd + K (or Ctrl + K) from anywhere in the app to instantly search tasks or navigate between pages using a sleek command palette.
• Dark Mode Support: Full support for system-preference or manual toggling of light and dark themes so your eyes don't burn while pulling all-nighters.
• Smooth Animations: We use framer-motion for fluid page transitions, drag-and-drop mechanics, and beautiful micro-interactions.

Admin Capabilities

• Admin Dashboard: A dedicated, protected route (/admin) only accessible by users with the is_admin database flag.
• Data Visualization: We use Recharts to beautifully visualize user growth and task completion statistics directly in the admin panel.
• Broadcast Emails: Admins can write and broadcast update emails to all registered students directly from the dashboard, complete with full delivery logging.

Built for the Modern Web

• SEO & Social Ready: Fully configured with dynamic meta tags, descriptions, and OpenGraph (OG) images for beautiful social sharing.
• Indexed & Analyzed: Connected to Google Search Console for search visibility, and utilizing Vercel Analytics & Google Analytics for privacy-friendly usage tracking.
• AI-Optimized (llms.txt): We expose /llms.txt and /llms-full.txt at the root domain, making it incredibly easy for AI bots and search agents to read and index our documentation.

Automations That Actually Help

• Google Calendar Sync: Connect your Google account in settings. We use OAuth to securely pull your Google Calendar events straight into your task board and native calendar view, so you never double-book or miss a deadline.
• Daily Deadline Reminders: We send automated email alerts for tasks that are due within 24 hours or are overdue.
• Weekly Wrap-up Reports: Every Sunday, you get an email summarizing everything you accomplished that week, so you actually get credited for your hard work! It also lists what's on deck for next week.
• Homepage Helper: A simple AI chat assistant on the landing page to answer your questions and help you get started.

Why Vercel Cron Jobs instead of GitHub Actions?
We power all of our email automations using Vercel Cron. We chose this over GitHub Actions because it's natively integrated with our Next.js API routes. It requires zero external YAML configuration, avoids cross-platform secrets management, and keeps our entire backend logic in one single codebase.

Future Plans

Because our architecture is built to support scalable OAuth integrations, we are looking to expand our ecosystem soon while preserving our minimalist core interface:

• Notion Integration: Sync rows from your Notion databases directly into your Vector OS task list.
• Canvas LMS: Automatically pull in assignments and quizzes as soon as your professor posts them.
• Google Cloud API Dashboard: Leverage a GCP Service Account to pull live API usage stats and display them securely in our Admin Dashboard.
• GitHub: For CS students, sync assigned Issues and PR reviews.
• Spotify & Pomodoro: Native widgets for focus modes with your favorite study playlists.

Tech Stack

We chose a modern, edge-ready stack optimized for speed and developer experience.

Next.js 14 & React	TypeScript	Tailwind & shadcn/ui	Supabase & PostgreSQL
Vercel Crons	Git & GitHub	Zustand	Resend API

Architecture

We use a hybrid data fetching approach. Server Actions handle heavy mutations and secure API calls (like Google Calendar sync), while the Supabase Client fetches data directly from the client side, protected by strict Row Level Security (RLS) policies. Background notifications are handled natively via Vercel Crons.

graph TD
    Client[Next.js Client Components] -->|State Management| Zustand[Zustand Store]
    
    subgraph Backend
        ServerActions[Next.js Server Actions]
        Auth[Supabase Auth]
        Cron[Vercel Cron Jobs]
    end
    
    subgraph External
        Google[Google Calendar API]
        Email[Resend API]
        AI[OpenAI / LLM API]
    end
    
    Client -->|Direct Fetch + RLS| SupabaseDB[(Supabase Postgres)]
    Client -->|Mutations| ServerActions
    
    ServerActions --> Auth
    ServerActions --> SupabaseDB
    ServerActions --> Google
    Cron --> Email
    ServerActions --> AI

Loading

Database Schema

Our PostgreSQL database uses Row Level Security (RLS) to ensure data is strictly isolated per user.

erDiagram
    PROFILES ||--o{ TASKS : "creates"
    PROFILES ||--o{ USER_INTEGRATIONS : "authorizes"
    PROFILES ||--o{ ADMIN_EMAIL_LOGS : "sends"
    
    PROFILES {
        uuid id PK "Matches auth.users(id)"
        text email
        text full_name
        text avatar_url
        boolean is_admin
        timestamp updated_at
    }
    
    TASKS {
        uuid id PK
        uuid user_id FK
        text title
        text description
        enum status "todo, in_progress, done"
        enum priority "low, medium, high"
        timestamp due_date
        timestamp created_at
        timestamp updated_at
        timestamp reminder_sent_at
        timestamp overdue_notified_at
        text external_source
        text external_id
    }
    
    USER_INTEGRATIONS {
        uuid id PK
        uuid user_id FK
        text provider "e.g., 'google'"
        text access_token
        text refresh_token
        timestamp expires_at
        timestamp created_at
        timestamp updated_at
    }
    
    ADMIN_EMAIL_LOGS {
        uuid id PK
        uuid admin_id FK
        text to_email
        text subject
        text status "success, failed"
        text error_message
        timestamp created_at
    }

Loading

Running Locally

1. Clone the repository

git clone https://github.com/yourusername/student-task-management.git
cd student-task-management

2. Install dependencies

npm install

3. Set up Supabase Create a new Supabase project and run the provided SQL queries in supabase/schema.sql to set up your tables.

4. Set up Environment Variables Copy .env.local.example to .env.local and fill in your Supabase URL and Anon Key.

cp .env.local.example .env.local

5. Run the development server

npm run dev

Visit http://localhost:3000 to see the app running.

API & Database Documentation

We fully document our backend using OpenAPI (Swagger). All database schemas, endpoint parameters, and response types are clearly defined.

You can view the interactive Swagger UI by visiting vector.prodhosh.me/api-docs in the browser. The raw OpenAPI specification file is located at docs/openapi.yaml.

Want to see our raw database structure? You can view the complete PostgreSQL schema in the supabase/schema.sql file.

Submission Details

This project was built as a full-stack student task management assignment. It fulfills all core requirements (CRUD, task organization, responsive UI) and all optional bonus features (Auth, Search, Due Dates, TypeScript, Error Handling).