Student Life Hub

A single-page student dashboard for tracking classes, assignments, study plans, shared resources, group tasks, grades, and activity — all running locally in the browser with no backend or build tools.

Quick Start

1. Open index.html in your browser (double-click or drag into a browser window).
2. Optionally use a local dev server (e.g. VS Code Live Server) for a smoother experience.
3. All data persists in localStorage under the key studentLifeHub.

Features

Dashboard

• Weekly overview with prev/next/today week navigation
• Summary cards: assignments due, classes today, group tasks, overall grade average
• Mini timeline showing classes and deadlines for the selected week
• Recent activity feed (last 10 actions)

Classes

• CRUD for weekly recurring classes (name, day, time, room, instructor)
• Weekly grid view (Mon–Sun columns)

Assignments & Deadlines

• Full CRUD with title, course, due date, priority, and status
• Filter by week, course, and status
• Overdue and due-soon highlighting

Study Plan

• Weekly study blocks with optional assignment linking
• "Suggested focus" based on nearest upcoming deadlines
• Visual weekly grid

Resources

• Browse pre-seeded shared notes, slides, and links
• Share new resources (simulated upload)
• Download simulates access and logs activity
• Filter by course and uploader

Group Tasks

• Pre-seeded groups with mock members
• Add tasks, toggle completion, reassign members
• Group progress bar (% complete)

Grades

• Grade table with per-course averages
• Overall GPA calculation (4.0 scale)
• CSS-only grade trend sparkline

Activity Monitor

• Append-only activity log with auto-logging on create/update/delete/share/complete/grade/theme actions
• Filter by action type and date
• Reset button to restore seed data

Theme

• Default: Dark mode (data-theme="dark")
• Toggle: Sun/moon icon in the header switches to light mode
• Preference persists in localStorage

User Switcher

Switch between three mock students (Alex, Alice, Bob) in the header to see different perspectives on group tasks and shared resources.

Tech Stack

• HTML5, CSS3, vanilla JavaScript
• No frameworks, no npm, no build step
• localStorage for persistence
• Hash-based routing (#dashboard, #assignments, etc.)

File Structure

student-life-hub/
├── index.html
├── css/
│   ├── variables.css    # Design tokens
│   ├── base.css         # Reset & typography
│   ├── layout.css       # Grid, sidebar, responsive
│   ├── components.css   # Cards, buttons, forms, etc.
│   └── themes.css       # Light mode overrides
├── js/
│   ├── mock-data.js     # Seed data
│   ├── storage.js       # localStorage CRUD
│   ├── themes.js        # Theme toggle
│   ├── activity.js      # Activity feed
│   ├── dashboard.js     # Dashboard module
│   ├── classes.js       # Classes module
│   ├── assignments.js   # Assignments module
│   ├── study-plan.js    # Study plan module
│   ├── resources.js     # Resources module
│   ├── groups.js        # Group tasks module
│   ├── grades.js        # Grades module
│   └── app.js           # Router & init
└── README.md

Reset Data

Go to the Activity tab and click Reset All Data to restore the original seed values.

Browser Support

Works in all modern browsers that support ES6+, CSS custom properties, and localStorage.