Skip to main content

​
Quick Start

This guide will walk you through creating an account, building your first study plan, starting an instance, and tracking your progress.
Time to complete: 10 minutes

​
Create Your Account

1

Navigate to Registration

Visit the Study Sync application and click the “Sign Up” button in the navigation bar.
2

Choose Authentication Method

You can register using either:
  • Email and Password: Enter your email, create a password, and provide a display name
  • Google OAuth: Click “Sign in with Google” for instant authentication
3

Complete Registration

After registration, you’ll be automatically signed in and redirected to your dashboard.
Study Sync uses Firebase Authentication for secure user management. Your credentials are never stored directly - only authentication tokens are used.

​
Understanding the Dashboard

Your dashboard displays:
  • Colorful Statistics: Active plans, overall progress, resources completed, plans created
  • Upcoming Deadlines: Nearest deadlines with color-coded urgency
  • Active Study Plans: Visual cards with gradient progress bars
  • Quick Actions: Browse plans, create plan, view my plans

​
Create Your First Study Plan

1

Click 'Create New Plan'

From your dashboard or navigation bar, click the “Create Plan” button.
2

Enter Basic Information

Fill in the required fields:
const newPlan = {
  title: "Introduction to React",
  shortDescription: "Master React fundamentals in 2 weeks",
  fullDescription: "A comprehensive guide covering components, hooks, state management, and best practices",
  courseCode: "CSE110",
  isPublic: true // Make it discoverable by others
};
3

Add Resources

Study Sync supports multiple resource types:
Paste a YouTube video URL and the system automatically fetches:
  • Video title
  • Duration (in minutes)
  • Thumbnail URL
// API automatically handles this via YouTube Data API v3
const videoResource = {
  type: "youtube-video",
  url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
  metadata: {
    duration: 45, // Minutes
    title: "React Hooks Explained",
    thumbnail: "https://i.ytimg.com/vi/..."
  }
};
4

Reorder Resources

Use drag-and-drop to arrange resources in your preferred learning order. The UI uses @dnd-kit for smooth, accessible reordering.
5

Configure Sharing

  • Toggle Public/Private visibility
  • Invite collaborators by email with Editor or Viewer roles
  • Public plans appear in the community browse page
6

Save Your Plan

Click “Create Study Plan” to save. The API will:
// POST /api/study-plans
const response = await fetch('/api/study-plans', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${idToken}`
  },
  body: JSON.stringify({
    title,
    shortDescription,
    fullDescription,
    courseCode,
    isPublic
  })
});
All fields marked with asterisks (*) are required. The system validates that title, short description, and course code are provided before creating the plan.

​
Start Your First Instance

Now that you have a study plan, create an instance to start tracking progress:
1

Browse Available Plans

Navigate to:
  • My Plans: Plans you created
  • Browse Plans: Public community plans
  • Shared With Me: Plans others have shared
2

Click 'Start This Plan'

On any plan card, click the “Start This Plan” button to create an instance.
3

Configure Your Instance

Set your learning parameters:
// POST /api/instances
const newInstance = {
  studyPlanId: "507f1f77bcf86cd799439011",
  startDate: new Date("2026-03-02"),
  endDate: new Date("2026-03-16"), // 2 weeks from now
  reminderTime: "09:00", // Daily reminder at 9 AM
  customReminders: [
    { type: "days", value: 1 }, // 1 day before deadline
    { type: "hours", value: 2 }  // 2 hours before deadline
  ],
  notes: "Focus on practical examples"
};
Resource Snapshot: The instance captures a snapshot of the plan’s resources at creation time. Future changes to the original plan won’t affect your instance.
4

Create Instance

Click “Start Instance” and you’ll be redirected to your instance detail page.

​
Track Your Progress

1

View Your Instance

Navigate to Dashboard → Active Study Plans or go to /instances to see all your instances.
2

Mark Resources Complete

As you complete each resource, click the checkbox next to it. The system updates progress in real-time:
// POST /api/user-progress
const toggleProgress = async (resourceId) => {
  const response = await fetch('/api/user-progress', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    },
    body: JSON.stringify({
      instanceId,
      resourceId,
      completed: true // Toggle between true/false
    })
  });
  
  // Progress updates instantly without page refresh
};
3

Monitor Progress Metrics

Watch your dual progress indicators update:
  • Resource Progress: 3/10 resources completed (30%)
  • Time Progress: 90/300 minutes completed (30%)
Progress bars use smooth gradient animations powered by Framer Motion.
4

Global Progress Tracking

Important: Progress is tracked globally per user per resource. If you mark a resource complete in one instance, it appears complete in ALL your instances containing that resource.
This prevents duplicate work and gives you a comprehensive view of what you’ve already learned.

​
Configure Notifications

1

Navigate to Profile Settings

Click your profile icon → Settings → Notifications
2

Enable Notification Types

// PUT /api/notifications/settings
const notificationSettings = {
  dailyReminders: true,      // Daily study reminders
  deadlineWarnings: true,     // Alerts before deadlines
  customReminders: true,      // User-defined deadline reminders
  weeklyDigest: false,        // Weekly summary email
  shareInvites: true          // Notifications when shared
};
3

Set Reminder Preferences

Configure when you want to receive notifications:
  • Daily reminder time (e.g., 9:00 AM)
  • Custom deadline alerts (1 day before, 2 hours before, etc.)
Email notifications use Nodemailer with Gmail SMTP. Make sure to configure your Gmail credentials in environment variables for notifications to work.

​
What’s Next?

Explore Advanced Features

Learn about collaborative editing, sharing permissions, and team study plans

API Integration

Build custom integrations using the Study Sync REST API

Understanding Instances

Deep dive into the instance system and resource snapshots

Configuration Guide

Configure environment variables and external services
You’re now ready to create effective study plans and track your learning progress!

Build docs developers (and LLMs) love

Get started for freeTalk to us