Skip to content

Lingz450/NoteLoft

BranchesTags

Repository files navigation

🎓 NOTELOFT - Student Workspace OS

Your complete academic companion. A modern, all-in-one workspace for university students that combines powerful note-taking, task management, course tracking, exam preparation, and AI-powered study assistance in one beautiful, intuitive interface.

Next.js TypeScript Tailwind CSS Prisma

📖 Table of Contents

🎯 Overview

NOTELOFT is a comprehensive student productivity platform inspired by Notion, but specifically designed for academic life. It helps you:

  • Organize your courses, tasks, and exams
  • Track your study time and progress
  • Plan your semester with smart scheduling
  • Study with focused sessions and AI assistance
  • Collaborate with classmates on shared workspaces
  • Succeed with data-driven insights and recommendations

Whether you're managing a single course or a full semester load, NOTELOFT adapts to your workflow and helps you stay on top of everything.

✨ Key Features

🏠 Smart Dashboard

Your command center for the semester:

  • Today Panel - See what you need to do right now
  • Focus Streak - Track consecutive study days
  • Time per Course - Visual breakdown of study time
  • Progress Cards - Weekly goals and achievements
  • Quick Actions - Start sessions, add tasks, create pages instantly

📝 Notion-Style Pages

Powerful note-taking with block-based editing:

  • Rich Text Editor - Powered by TipTap with full formatting
  • Slash Commands - Type / for quick block insertion
  • 17+ Block Types - Headings, lists, quotes, code, callouts, images, and more
  • Page Templates - Pre-built templates for common use cases
  • Version History - Track changes and restore previous versions
  • Public Sharing - Share pages with public links
  • Backlinks - See all pages that link to this one

✅ Task Management

Stay organized with flexible task views:

  • Table View - Sortable, filterable spreadsheet interface
  • Board View - Kanban board with drag-and-drop
  • Smart Filtering - By course, status, priority, due date
  • Quick Add - Natural language input (e.g., "math hw due Fri")
  • Context Menus - Right-click for quick actions
  • Relations - Link tasks to courses, exams, and pages

📚 Course Management

Complete course tracking:

  • Course Cards - Visual overview with color coding
  • Grade Calculator - Automatic GPA computation
  • Assessment Tracking - Track assignments, quizzes, exams
  • Study Time Analytics - Hours per course per week
  • Progress Indicators - Visual progress bars
  • Course Pages - Dedicated notes page per course

📅 Schedule & Calendar

Never miss a class or deadline:

  • Weekly Timetable - Interactive grid view
  • Calendar View - Month view for exams and tasks
  • Drag & Drop - Easy scheduling
  • Color-Coded - Course colors for quick identification
  • Calendar Sync - Import from Google Calendar (ready)
  • Study Block Suggestions - AI suggests optimal study times

🎯 Study Sessions

Track and optimize your study time:

  • Session Templates - Deep Work, Light Review, Exam Cram
  • Pomodoro Timer - Focused sessions with breaks
  • Course Association - Link sessions to courses/tasks
  • Session History - Complete activity log
  • Post-Session Summary - Review what you accomplished
  • Micro Journals - Quick reflections after each session

🤖 AI Assistant

Smart study assistance:

  • AI Study Agent - Context-aware study planning
  • Today's Focus - Personalized daily recommendations
  • Smart Suggestions - Based on deadlines and progress
  • Page Summarization - AI-powered note summaries
  • Flashcard Generation - Auto-generate study cards
  • Task Extraction - Extract tasks from notes

🎮 Gamification

Make studying fun and engaging:

  • Boss Fight Mode - Turn exams into boss battles
  • Study Runs - Structured semester-long study plans
  • Focus Rooms - Study with others (shared timers)
  • Study Debts - Track missed sessions
  • Streaks - Daily study streak tracking
  • Achievements - Unlock rewards for consistency

🔍 Search & Discovery

Find anything instantly:

  • Global Search - Search across pages, tasks, courses, exams
  • Command Palette - Press Ctrl+K / Cmd+K for quick actions
  • Quick Switcher - Jump to any page instantly
  • Backlinks - Discover page connections
  • Activity Feed - See all workspace activity

👥 Collaboration

Work together with classmates:

  • Shared Workspaces - Invite team members
  • Comments & Mentions - Threaded discussions
  • Page Sharing - Public or private sharing
  • Activity Log - See what everyone is working on
  • Role Management - Owner, Admin, Member, Viewer roles

🎨 Customization

Make it yours:

  • Light/Dark Mode - Beautiful themes
  • Sidebar Position - Left or right
  • Collapsible Sidebar - Icon-only mode
  • Keyboard Shortcuts - Full keyboard navigation
  • Custom Themes - Personalize colors (coming soon)

📋 Complete Feature List

Core Features

📊 Dashboard & Analytics

  • ✅ Semester Dashboard with overview cards
  • ✅ Today Panel with smart suggestions
  • ✅ Focus Streak tracking
  • ✅ Time per Course analytics
  • ✅ Weekly Progress tracking
  • ✅ GPA Calculator
  • ✅ Study Statistics
  • ✅ Activity Feed

📝 Pages & Notes

  • ✅ Block-based rich text editor (TipTap)
  • ✅ 17+ block types (headings, lists, quotes, code, callouts, etc.)
  • ✅ Slash commands (/) for quick insertion
  • ✅ Page templates (6+ templates)
  • ✅ Page properties (Notion-style)
  • ✅ Version history
  • ✅ Public page sharing
  • ✅ Backlinks system
  • ✅ Favorites system
  • ✅ Drag & drop page organization
  • ✅ Nested pages (hierarchical)

✅ Tasks & Projects

  • ✅ Task creation and management
  • ✅ Table view (sortable, filterable)
  • ✅ Board/Kanban view
  • ✅ Calendar view
  • ✅ Priority levels (High, Normal, Low)
  • ✅ Status tracking (Not Started, In Progress, Done)
  • ✅ Due date management
  • ✅ Course association
  • ✅ Task relations
  • ✅ Quick add with natural language
  • ✅ Context menus (right-click actions)

📚 Courses & Grades

  • ✅ Course management
  • ✅ Grade calculator
  • ✅ Assessment tracking
  • ✅ GPA projection
  • ✅ Course pages
  • ✅ Study time per course
  • ✅ Progress indicators
  • ✅ Color coding

📅 Schedule & Calendar

  • ✅ Weekly timetable
  • ✅ Calendar view
  • ✅ Drag & drop scheduling
  • ✅ Class management
  • ✅ Study block suggestions
  • ✅ Calendar sync (Google, Outlook ready)
  • ✅ Free time detection

🎯 Study Sessions

  • ✅ Session timer (Pomodoro-style)
  • ✅ Session templates (Deep Work, Light Review, Exam Cram)
  • ✅ Course/task association
  • ✅ Session history
  • ✅ Post-session summaries
  • ✅ Micro journals (mood, intent, outcome)
  • ✅ Session analytics

🤖 AI Features

  • ✅ AI Study Agent
  • ✅ Today's Focus recommendations
  • ✅ Smart session suggestions
  • ✅ Page summarization (stub)
  • ✅ Flashcard generation (stub)
  • ✅ Task extraction (stub)
  • ✅ Practice question generation (stub)

🎮 Advanced Features

  • ✅ Study Runs (semester plans)
  • ✅ Boss Fight Mode (gamified exam prep)
  • ✅ Focus Rooms (shared study sessions)
  • ✅ Knowledge Graph (Topics)
  • ✅ Study Debts tracker
  • ✅ Exam Storyboard
  • ✅ Smart Templates Store

🔍 Search & Navigation

  • ✅ Global search (Cmd/Ctrl+K)
  • ✅ Command Palette
  • ✅ Quick switcher
  • ✅ Backlinks
  • ✅ Activity feed
  • ✅ Sidebar search

👥 Collaboration

  • ✅ Shared workspaces
  • ✅ Comments system
  • ✅ @Mentions
  • ✅ Page sharing (public/private)
  • ✅ Workspace members
  • ✅ Role management

🎨 UI/UX Features

  • ✅ Onboarding wizard
  • ✅ Quick Add (Q key)
  • ✅ Keyboard shortcuts
  • ✅ Focus Mode
  • ✅ Responsive design (mobile-friendly)
  • ✅ Undo system
  • ✅ Auto-save indicators
  • ✅ Context menus
  • ✅ Empty states with helpful content

🔧 Integrations

  • ✅ Calendar sync (ready)
  • ✅ File attachments (Resources)
  • ✅ Web clipper (Resources API)
  • ✅ RESTful API
  • ✅ Export/Import (ready)

🚀 Getting Started

Prerequisites

  • Node.js 18+ (LTS recommended)
  • pnpm (or npm/yarn)
  • Git

Installation

  1. Clone the repository:
git clone https://github.com/Lingz450/NoteLoft.git
cd NoteLoft
  1. Install dependencies:
pnpm install
# or
npm install
  1. Set up environment variables:

Create a .env.local file in the root directory:

DATABASE_URL="file:./dev.db"

For production, use PostgreSQL:

DATABASE_URL="postgresql://user:password@localhost:5432/noteloft"
  1. Initialize the database:
# Run Prisma migrations
pnpm prisma migrate dev

# Generate Prisma client
pnpm prisma generate

# (Optional) Seed with demo data
pnpm prisma db seed
  1. Start the development server:
pnpm dev
# or
npm run dev
  1. Open your browser:

Navigate to http://localhost:3000

You'll be redirected to /workspace/demo to get started! 🎉

📖 How to Use

First Time Setup

When you first open NOTELOFT, you'll see an onboarding wizard:

  1. Set Semester Dates - Choose your semester start and end dates
  2. Add Courses - Add your courses with codes and names
  3. Add First Exam/Assignment - Optionally add your first important item

After onboarding, you'll land on your dashboard!

Dashboard Overview

The Semester Dashboard is your home base:

  • Today Panel (top) - Shows overdue tasks, today's tasks, next exam, and suggested study session
  • Progress Card - Weekly study time and streak counter
  • Focus Cards - Focus streak, time per course, today's focus
  • Courses Section - All your courses with grades and progress
  • Upcoming Tasks - Tasks due this week
  • Upcoming Exams - Exams coming up

Creating Tasks

Method 1: Quick Add (Recommended)

  1. Press Q key anywhere (or click the floating + button)
  2. Type natural language: "math hw due Fri" or "CS exam next week"
  3. Preview and create!

Method 2: Tasks Page

  1. Go to Study Tasks in the sidebar
  2. Click "+ Add task"
  3. Fill in the form and save

Method 3: From Course

  1. Open a course page
  2. Click "Add Task" button
  3. Task is automatically linked to that course

Managing Courses

  1. Go to Courses in the sidebar
  2. Click "+ Add course"
  3. Enter:
    • Course code (e.g., "CS 201")
    • Course name (e.g., "Data Structures")
    • Credits
    • Color (for visual organization)
  4. Add assessment items to track grades

Creating Pages

Method 1: From Sidebar

  1. Click "+ New" in the Pages section
  2. Choose a template or start blank
  3. Start typing!

Method 2: Command Palette

  1. Press Ctrl+K / Cmd+K
  2. Type "Create new page"
  3. Press Enter

Method 3: Templates

  1. Go to Templates page
  2. Browse available templates
  3. Click "Use Template"

Using the Editor

The page editor supports:

  • Slash Commands - Type / to see all available blocks
  • Keyboard Shortcuts:
    • Ctrl+B / Cmd+B - Bold
    • Ctrl+I / Cmd+I - Italic
    • Ctrl+Shift+F / Cmd+Shift+F - Focus Mode
  • Block Types:
    • Headings (H1, H2, H3)
    • Lists (Bullet, Numbered, Todo)
    • Quote
    • Code block
    • Callout (Info, Warning, Error, Success, Tip)
    • Divider
    • Image
    • Link

Starting Study Sessions

Method 1: Today Panel

  1. Look at the Today Panel on dashboard
  2. Click "Start My Next Session" (smart suggestion)
  3. Or click a suggested session card

Method 2: Study Mode

  1. Go to Study Mode in sidebar
  2. Choose a template (Deep Work, Light Review, Exam Cram)
  3. Select course and duration
  4. Click "Start"

Method 3: From Task

  1. Open a task
  2. Click "Start Session" button
  3. Session is pre-filled with task info

Using Advanced Features

Study Runs

  1. Go to Study Runs in sidebar (Advanced section)
  2. Click "Create Study Run"
  3. Select course, goal type, dates
  4. System generates weekly plan
  5. Track progress as you complete sessions

Boss Fight Mode

  1. Go to Boss Fights in sidebar
  2. Each exam becomes a "boss"
  3. Study sessions "damage" the boss
  4. Defeat the boss before exam date!

Focus Rooms

  1. Go to Focus Rooms in sidebar
  2. Join an existing room or create new
  3. Study together with shared timer
  4. Send reactions (checkmark, coffee, etc.)

Knowledge Graph

  1. Go to Topics in sidebar
  2. Create topics and link them to tasks/exams
  3. View connections in graph view
  4. Track topic completion

Search & Navigation

Command Palette (Ctrl+K / Cmd+K):

  • Search pages, tasks, courses, exams
  • Quick actions (Create page, Add task, etc.)
  • Navigate without mouse

Global Search:

  • Searches across all content
  • Filters by type
  • Shows recent items

Backlinks:

  • Open any page
  • See "Backlinks" panel
  • View all pages that link to this one

⌨️ Keyboard Shortcuts

Global Shortcuts

Shortcut Action
Ctrl+K / Cmd+K Open command palette
Q Quick add
Ctrl+Shift+? / Cmd+Shift+? Show keyboard shortcuts
Esc Close modal/menu

Editor Shortcuts

Shortcut Action
Ctrl+B / Cmd+B Bold
Ctrl+I / Cmd+I Italic
Ctrl+Shift+F / Cmd+Shift+F Toggle Focus Mode
/ Open slash commands
Ctrl+Enter / Cmd+Enter Submit comment
Esc Close slash menu

Navigation

  • Arrow Keys - Navigate in command palette
  • Enter - Select item
  • Tab - Navigate between fields

💡 Tip: Press Ctrl+Shift+? (or Cmd+Shift+? on Mac) to see all shortcuts in a modal!

🛠️ Tech Stack

Category Technology
Framework Next.js 14 (App Router)
Language TypeScript 5.9
Styling Tailwind CSS 3.4
Database SQLite (dev) / PostgreSQL (prod)
ORM Prisma
Rich Text Editor TipTap
UI Components Custom + Radix UI primitives
State Management React Hooks + TanStack Query
Drag & Drop @hello-pangea/dnd
Icons Lucide React
Validation Zod
Animations Tailwind CSS transitions

📁 Project Structure

noteloft/
├── app/                              # Next.js 14 App Router
│   ├── workspace/[workspaceId]/      # Workspace pages
│   │   ├── page.tsx                  # Dashboard
│   │   ├── tasks/                    # Task management
│   │   ├── courses/                  # Course management
│   │   ├── exams/                    # Exam tracking
│   │   ├── schedule/                 # Weekly timetable
│   │   ├── sessions/                 # Study sessions
│   │   ├── stats/                    # Analytics
│   │   ├── pages/                    # Note pages
│   │   ├── study-runs/               # Study Runs
│   │   ├── boss-fights/              # Boss Fight Mode
│   │   ├── focus-rooms/              # Focus Rooms
│   │   ├── topics/                   # Knowledge Graph
│   │   ├── study-debts/              # Study Debts
│   │   ├── templates/                # Template gallery
│   │   ├── activity/                 # Activity feed
│   │   └── onboarding/               # Onboarding wizard
│   ├── ai/                           # AI Assistant
│   ├── profile/                      # User profile
│   ├── settings/                     # App settings
│   ├── templates/                    # Global templates
│   ├── p/[slug]/                     # Public pages
│   └── api/                          # API routes
├── components/
│   ├── layout/                       # Sidebar, TopBar, Shell
│   ├── dashboard/                    # Dashboard widgets
│   ├── tasks/                        # Task components
│   ├── courses/                      # Course components
│   ├── pages/                        # Page components
│   ├── editor/                       # Editor components
│   ├── sessions/                     # Session components
│   ├── ai/                           # AI components
│   ├── common/                       # Shared components
│   ├── database-views/               # Database view components
│   ├── comments/                     # Comments system
│   ├── resources/                    # Resources/attachments
│   ├── onboarding/                   # Onboarding wizard
│   └── workspace/                    # Workspace components
├── lib/
│   ├── db.ts                         # Prisma client
│   ├── utils.ts                      # Utility functions
│   ├── hooks/                        # Custom React hooks
│   ├── services/                     # Business logic
│   ├── validation/                   # Zod schemas
│   ├── actions/                      # Server actions
│   └── tiptap-extensions/            # TipTap extensions
├── prisma/
│   ├── schema.prisma                 # Database schema
│   ├── migrations/                   # Database migrations
│   └── seed.ts                       # Seed data
├── docs/                             # Documentation
└── public/                           # Static assets

🚀 Deployment

Deploy to Vercel (Recommended)

  1. Push to GitHub:

    git push origin main

  2. Import to Vercel:

    • Go to vercel.com
    • Click "New Project"
    • Import your GitHub repository

  3. Set Environment Variables:

    • DATABASE_URL - Your PostgreSQL connection string
    • (Optional) NEXTAUTH_SECRET - For authentication
    • (Optional) NEXTAUTH_URL - Your deployment URL

  4. Deploy!

    • Vercel will automatically build and deploy
    • Your app will be live at your-project.vercel.app

Database Options

For Production:

  • Neon - Serverless PostgreSQL (recommended)
  • Supabase - Open-source Firebase alternative
  • Railway - Simple database hosting
  • PlanetScale - MySQL-compatible

Setup:

  1. Create a database on your chosen platform
  2. Copy the connection string
  3. Add to Vercel environment variables as DATABASE_URL
  4. Run migrations: pnpm prisma migrate deploy

🎯 Feature Deep Dives

Pages & Block Editor

NOTELOFT uses a block-based editor similar to Notion:

  • 17+ Block Types: Paragraph, Headings (H1-H3), Bullet List, Numbered List, Todo List, Quote, Callout, Code Block, Divider, Image, Link
  • Slash Commands: Type / to see all available blocks
  • Keyboard Shortcuts: Bold, Italic, and more
  • Autosave: Changes save automatically every second
  • Version History: View and restore previous versions
  • Properties: Add custom properties to pages (Status, Tags, Dates, etc.)

Task Management

Table View:

  • Sort by any column
  • Filter by course, status, priority
  • Inline editing
  • Bulk actions

Board View:

  • Kanban-style columns (Not Started, In Progress, Done)
  • Drag & drop between columns
  • Visual progress tracking
  • Quick task creation

Smart Features:

  • Natural language parsing in Quick Add
  • Automatic course detection
  • Due date parsing
  • Priority suggestions

Study Sessions

Session Templates:

  • Deep Work: 50 min focus, 10 min break
  • Light Review: 25 min, 5 min break
  • Exam Cram: 90 min, 15 min break

Features:

  • Timer with visual countdown
  • Task completion tracking
  • Session notes
  • Mood tracking (Very Bad → Great)
  • Post-session summary
  • Next session suggestions

AI Study Agent

The AI Study Agent provides:

  • Today's Focus: Personalized daily recommendations
  • Weekly Goals: Suggested study targets
  • Smart Suggestions: Based on deadlines and progress
  • Context Awareness: Considers all your courses, tasks, and exams
  • Action Items: Clear next steps

Boss Fight Mode

Turn exam prep into a game:

  • Each exam = a "Boss" with HP
  • Study sessions = damage to the boss
  • Skipped sessions = boss heals
  • Goal: Defeat boss (reach 0 HP) before exam date
  • Difficulty levels: Easy, Normal, Hard, Nightmare

Study Runs

Create structured semester plans:

  • Set goal (A grade, Pass, Catch Up, Custom)
  • System generates weekly session templates
  • Track progress week by week
  • Adapts when you skip or add sessions
  • Visual progress indicators

Focus Rooms

Study together (even if remote):

  • Join shared study rooms
  • Synchronized timer
  • Presence indicators
  • Reactions (checkmark, coffee, sleepy)
  • No chat (distraction-free)

Knowledge Graph

Build connections between topics:

  • Create topics and link to tasks/exams
  • Visual graph view of relationships
  • Track topic completion
  • Identify knowledge gaps
  • AI-powered topic extraction (ready)

🎨 Customization

Themes

NOTELOFT supports:

  • Light Mode - Clean, bright interface
  • Dark Mode - Easy on the eyes
  • System Preference - Auto-switch based on OS

Change in Settings → Appearance → Theme

Sidebar

  • Position: Left or Right
  • Collapse: Icon-only mode
  • Sections: Expand/collapse Advanced, Favorites, Pages
  • Search: Search pages within sidebar

Keyboard Shortcuts

All shortcuts are customizable (coming soon). For now, see the shortcuts modal (Ctrl+Shift+?).

🔒 Privacy & Security

  • Local-First: Data stored in your database
  • No Tracking: We don't track your usage
  • Private by Default: All pages are private unless you share them
  • Secure: Passwords hashed with bcrypt
  • Export: Export your data anytime

🐛 Troubleshooting

Database Issues

# Reset database
pnpm prisma migrate reset

# Regenerate Prisma client
pnpm prisma generate

# Check database connection
pnpm prisma studio

Build Errors

# Clear Next.js cache
rm -rf .next

# Reinstall dependencies
rm -rf node_modules
pnpm install

Port Already in Use

# Kill process on port 3000
# Windows:
netstat -ano | findstr :3000
taskkill /PID <PID> /F

# Mac/Linux:
lsof -ti:3000 | xargs kill

📊 Performance

  • Lighthouse Score: 95+ (Performance, Accessibility, Best Practices)
  • First Load: < 100KB JavaScript
  • Code Splitting: Automatic route-based splitting
  • Image Optimization: Next.js Image component
  • Lazy Loading: Components load on demand

🤝 Contributing

We welcome contributions! Here's how:

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/AmazingFeature
  3. Make your changes
  4. Commit: git commit -m 'Add some AmazingFeature'
  5. Push: git push origin feature/AmazingFeature
  6. Open a Pull Request

Development Guidelines

  • Follow TypeScript best practices
  • Use Tailwind CSS for styling
  • Write descriptive commit messages
  • Add comments for complex logic
  • Test your changes locally

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Lingz450

🙏 Acknowledgments

📞 Support & Resources

  • Documentation: See /docs folder for detailed guides
  • Issues: GitHub Issues
  • Feature Requests: Open an issue with the enhancement label

🎉 What's Next?

NOTELOFT is constantly evolving! Upcoming features:

  • 🔜 Real-time collaboration
  • 🔜 Mobile app (React Native)
  • 🔜 Advanced AI features (OpenAI integration)
  • 🔜 More templates
  • 🔜 Custom themes
  • 🔜 Export to PDF/Markdown
  • 🔜 Browser extension

Ready to ace your semester? Start using NOTELOFT today! 📚✨

Made with ❤️ for students everywhere.

Last Updated: December 2024

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages