Back to projects

PRODUCT / MAKE LIFE EASIER

Study planner

Create a focused planner that turns a deadline into small tasks and tracks progress.

Beginner1 week

Recommended deadline

7 days from your start date

Project brief

Create a planner that turns a deadline into manageable tasks, then makes progress visible without adding stress.

TASK DASHBOARD

Make progress one task at a time.

0% complete

Tech stack & setup

ReactTypeScriptTailwind CSSLocal Storage
  • ●Create a React TypeScript app
  • ●Add Tailwind CSS
  • ●Choose a sample school schedule
  • ●Use browser storage for persistence

GitHub setup

  • ●Create a repository named study-planner
  • ●Add a project board with To do, Doing, and Done
  • ●Commit after each milestone
  • ●Document the data model

Project architecture

Task model

Task title, subject, due date, and completion status.

Planner state

Task list, active subject, and progress calculations.

Views

Task form, grouped list, and progress summary.

Timeline

  1. 01Day 1: data model and wireframe
  2. 02Days 2–3: task creation and list
  3. 03Days 4–5: filtering and persistence
  4. 04Days 6–7: progress view and polish

Milestones

Plan existsDay 3

Tasks can be created and completed.

Plan persistsDay 5

Tasks remain after a refresh.

Progress is clearDay 7

Subjects show useful progress summaries.

Build guide

STEP 1

Features to build

Make planning feel lighter than the work itself.

  • ●Create tasks with a due date
  • ●Group tasks by subject
  • ●Mark tasks complete
  • ●Show progress for each subject

STEP 2

Core functions

Use predictable state updates.

  • ●addTask(task)
  • ●toggleTask(taskId)
  • ●getTasksForSubject(subject)
  • ●calculateProgress(tasks)
  • ●sortByDueDate(tasks)

STEP 3

Build it in steps

Build the list first, then add progress.

  • ●Design the task model
  • ●Create task and subject components
  • ●Add completion state
  • ●Calculate and display progress