Frontend / React
To-Do List Web Application
A dynamic to-do application for managing daily tasks. Built in React with no backend, as a deliberate exercise in component structure, state management and controlled inputs.
What it is.
Not a complicated project, and it is listed here honestly as what it is: the exercise where React's mental model finally clicked.
Controlled inputs, lifting state up, and keeping components small are all things I now do reflexively, and this is where they were learned.
02 — The problem
Learning a framework from tutorials gives you syntax, not judgement about where state belongs.
03 — The approach
Build the smallest complete CRUD app possible and make every state decision deliberately rather than copying a structure.
What it actually does.
Add, edit, complete, delete
The full task lifecycle.
Filtered views
Switch between all, active and completed tasks.
Controlled inputs
Form state driven entirely by React state.
How the pieces fit together.
App state
Task list held at the top level and passed down.
Components
Input, list and item split by responsibility.
The stack.
Chosen for the problem, not for the resume.
- ReactJavaScriptCSS
The part that stuck.
Student portfolio, so this section is the point — here is what this build actually taught me.
Where state lives determines how painful everything else is. Lifting it too late meant rewriting components twice.
Keys matter. Using array indices as keys produced bugs that only appeared after deleting an item mid-list.
LearnForge
An adaptive AI tutoring platform that turns a student's own course material into explanations, quizzes and flashcards.
Have a project idea?
I'm open to freelance projects, collaborations, internships, and opportunities where I can contribute while continuing to grow.
Usually replies within a day · Lahore, Pakistan · PKT (UTC+5)