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:
-
The ability to add tasks with:
- Course name
- Assignment title
- Due date
- Estimated study hours
- Category (Assignment, Exam, Tuition, Scholarship)
Mark tasks as completed, displayed with a strike-through effect
Delete tasks
Filter tasks by category
Urgency-based color coding, where tasks due soon are highlighted
-
Weekly summary showing:
- Upcoming deadlines within 7 days
- Total study hours required
Dark mode toggle for improved user experience
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)