DEV Community

Cover image for UoPeople Smart Academic Planner
Osazuwa John
Osazuwa John

Posted on

UoPeople Smart Academic Planner

Project Presentation Script

Good day everyone,

Today I will be presenting my project titled “UoPeople Smart Academic Planner.”

This is a web-based academic task management application built using React and Vite. The goal of this project is to help students effectively manage coursework, track deadlines, estimate study hours, and organize academic responsibilities in one centralized system.


Problem Statement

Many students struggle with:

  • Managing multiple courses
  • Tracking assignment deadlines
  • Preparing for exams
  • Organizing tuition or scholarship deadlines
  • Estimating weekly study workload

Most students rely on scattered notes, spreadsheets, or memory, which increases stress and reduces productivity.

This project addresses that challenge by providing a simple, interactive academic planner.


Technologies Used

This project was built using:

  • React (Functional Components and Hooks)
  • Vite (for fast development and build tooling)
  • JavaScript (ES6)
  • LocalStorage for data persistence

This version does not include a backend or database, making it a frontend-focused Minimum Viable Product (MVP).


Key Features

The application includes:

  1. The ability to add tasks with:

    • Course name
    • Assignment title
    • Due date
    • Estimated study hours
    • Category (Assignment, Exam, Tuition, Scholarship)
  2. Mark tasks as completed, displayed with a strike-through effect

  3. Delete tasks

  4. Filter tasks by category

  5. Urgency-based color coding, where tasks due soon are highlighted

  6. Weekly summary showing:

    • Upcoming deadlines within 7 days
    • Total study hours required
  7. Dark mode toggle for improved user experience

  8. Data persistence using LocalStorage, ensuring tasks remain saved even after refreshing the page


How It Works

  • Tasks are stored in React state.
  • Whenever a task is added, deleted, or updated, the data is automatically saved to LocalStorage.
  • Tasks are sorted by due date.
  • The weekly summary dynamically calculates workload using JavaScript logic.

Each user has independent browser-based storage, meaning data is not shared across devices.


Learning Outcomes

Through this project, I demonstrated:

  • State management using React Hooks
  • Conditional rendering
  • Event handling
  • Dynamic filtering and sorting
  • UI enhancements such as dark mode and urgency indicators
  • Local data persistence without a backend

Future Improvements

In a production-level version, I would:

  • Add user authentication
  • Integrate a backend database such as Firebase or Node.js
  • Enable cloud synchronization
  • Add notifications and reminders
  • Improve mobile responsiveness

Conclusion

In conclusion, the UoPeople Smart Academic Planner is a functional and scalable frontend application that addresses a real student productivity challenge.

It demonstrates strong React fundamentals and provides a foundation that can evolve into a full SaaS academic planning platform.

Thank you.

GitHub: https://github.com/oboh12/uopeople-smart-planner.git

Email: saziblow@gmail.com

Top comments (0)