StudyMax

Members: Boris Lukyanovich, Ahmed Abdelsalam, Dennes Lopez, Leroy Engmann

Overview

StudyMax is a web application designed for students to manage the workload of all their classes. Built with the purpose of improving productivity through the ability to create custom timetables, organize & prioritize tasks, and ensure you never miss a deadline.

Anyone can run it: by default StudyMax works entirely in the browser, with no account, server or configuration. A Supabase backend for accounts and cloud storage is optional.

Quick start

You need Node.js 20.19+ or 22.12+ (required by Vite 7) and npm.

npm install && npm run dev

Open http://localhost:5173 and click Get Started. There is nothing to set up: StudyMax starts in local mode and keeps your data in this browser. On an empty planner, Load sample data fills in a week of classes and tasks so you can explore right away.

Features

Classes

• Weekly schedule (days and start time), description and a colour that carries through the calendar and task list.
• Class materials: upload, open, download and delete files such as PDFs, Office documents, text files, images and archives, up to 10 MB each.

Tasks

• Deadline, workload (Light, Moderate, Heavy or Very Heavy), notes and file attachments.
• Automatic priority. Each workload has a weight (1 to 4) and the score is that weight divided by the days left before the deadline. A score of 1 or more is High, 0.4 or more is Medium and anything lower is Low, so a Heavy task due in three days ranks with a Light task due tomorrow. Past-due tasks are marked Overdue and completed tasks Done.
• Sort by priority or due date, and filter by status and class.

Calendar

• Monday to Sunday week view with previous, next and today navigation.
• Class sessions in start-time order and each day's tasks ranked by priority, with badges and workload.

Your data in local mode

• A banner makes clear that data is stored in this browser.
• Export data downloads a JSON backup of classes and tasks, optionally with the uploaded files.
• Import data restores a backup, replacing what is stored in the browser. Invalid files are rejected without changing anything.
• Load sample data and Clear all data for a quick demo or a fresh start.

Accounts in Supabase mode

• Email and password sign up and log in.
• Data is stored in Postgres with row level security, so each user only sees their own rows.
• Files are stored in a private bucket and opened through signed URLs that expire after one hour.

The layout adapts from desktop down to phone screens.

How the two modes work

	Local mode (default)	Supabase mode (optional)
Used when	VITE_SUPABASE_URL or VITE_SUPABASE_ANON_KEY is missing or empty	Both variables are set
Accounts	None; one local profile per browser	Supabase Auth, email and password
Classes and tasks	IndexedDB database studymax-local	Postgres tables with row level security
Files	Blobs in IndexedDB, opened through object URLs	Private documents bucket, opened through signed URLs
Backup	Export and import JSON from the Data tab	Managed by your Supabase project

Components only import from src/data/index.js. That facade loads the local adapter or the Supabase adapter, which export the same functions, so the UI does not depend on the backend. Vite reads the variables when the dev server starts or the app is built, so restart or rebuild after changing them.

Local data belongs to one browser profile on one device. A different browser, a private window or clearing site data starts empty, so export a backup from time to time.

Optional: use Supabase

1. Create a project at supabase.com.
2. In the dashboard, open the SQL Editor and run supabase/schema.sql. It creates the classes, tasks, documents and task_files tables with row level security policies (auth.uid() = user_id), a private documents storage bucket, and storage policies that limit each user to a folder named after their user id. The script is safe to run again.
3. Copy .env.example to .env.local and fill in the project URL and the anon public key (called the publishable key in newer projects) from the project's API settings. .env.local is ignored by git; never commit real keys.
4. Sign up needs either email confirmation turned off for the Email provider, or the Site URL in the Authentication URL settings set to http://localhost:5173 so that confirmation links open the app. With confirmation on, StudyMax asks new users to confirm their email before logging in.
5. Restart npm run dev. The landing page now offers Sign Up and Log In, and the local mode banner and Data tab are hidden.

The anon key is meant to be public. Row level security and the storage policies are what keep each user's data private, so run the schema before you sign up.

Scripts

Command	What it does
npm run dev	Starts the development server on http://localhost:5173
npm run build	Builds the production bundle into dist/
npm run preview	Serves the production build locally
npm run lint	Runs ESLint

Tech stack

• Frontend: React 19, React Router 7, Vite 7, plain CSS
• Local mode: IndexedDB, with Blobs and object URLs for files
• Optional backend: Supabase (Postgres, Auth and Storage) through supabase-js 2
• Quality: ESLint 9 and a GitHub Actions workflow that installs, lints and builds every push and pull request

Project structure

StudyMax/
├── .github/workflows/ci.yml   # Install, lint and build on push and pull request
├── docs/screenshots/          # Images used in this README
├── public/                    # Static files served as-is
├── src/
│   ├── components/            # Pages, modals and views: Welcome, Dashboard, CalendarView,
│   │                          # TaskList, TaskDetail, ClassList, ClassDetail, DataPanel, ...
│   ├── context/               # AuthProvider and useAuth: local profile or Supabase session
│   ├── data/                  # Data layer used by every component
│   │   ├── index.js           # Facade that picks the local or Supabase adapter
│   │   ├── backend.js         # Mode detection from the VITE_SUPABASE_* variables
│   │   ├── localAdapter.js    # Local mode: classes, tasks and files in IndexedDB
│   │   ├── localDb.js         # IndexedDB schema and helpers
│   │   ├── localBackup.js     # Export, import, clear and storage summary
│   │   ├── sampleData.js      # Sample classes, tasks and files
│   │   ├── supabaseAdapter.js # Supabase mode: Postgres, Auth and Storage
│   │   ├── supabaseClient.js  # Supabase client created from the environment
│   │   └── ...                # Error messages, downloads and object URL helpers
│   ├── utils/                 # Priority scoring and file validation
│   ├── App.jsx                # Routes
│   └── main.jsx               # Entry point
├── supabase/schema.sql        # Tables, row level security and storage policies
├── .env.example               # Template for the optional Supabase settings
└── vite.config.js

Data model

Every table has id, user_id and created_at columns. Local mode keeps the same shape in IndexedDB.

Table	Main columns
classes	course_title, course_description, color, days, time
tasks	task_title, class (class name), deadline, workload, notes, completed
documents	document_title, document_type, class, file_path, file_size
task_files	task_id, file_name, file_path, file_type, file_size

Screenshots

Landing page	Tasks ranked by priority

Classes	Data tab in local mode