Task Manager App — React JS

Task Manager App — React JS

Build a complete task manager application with login/register UI, protected routes, CRUD operations, filters, search, priorities, and localStorage persistence. This is Project 2 in the Toolliyo Learning Projects React series — ideal after the Portfolio project.

What you get

• Complete working source code (todo-app/) — Auth UI, Dashboard, Task CRUD, filters, stats
• TODO_APP_REACT_JS.md step-by-step guide inside GUIDELINES/
• Professional structure: context/, hooks/, components/, pages/, utils/
• Demo account: demo@toolliyo.com / demo123

Technologies

• React JS · Vite · Bootstrap 5 · Bootstrap Icons · React Router · localStorage · CSS

What students will learn

• Context API for auth and tasks (AuthContext, TaskContext)
• Protected routes with React Router
• Custom useLocalStorage hook
• Form validation, controlled inputs, conditional rendering
• Filter + search with useMemo
• CRUD: create, read, update, delete, toggle complete
• Professional folder structure ready for Node.js API upgrade

Features built

Login · Register · Logout · Dashboard · Add task · Edit · Delete · Mark complete · Priority badges · Search · Filter All/Active/Completed · Stats cards · Per-user data in localStorage

How to use the ZIP

1. Extract the ZIP
2. Read GUIDELINES/TODO_APP_REACT_JS.md
3. Run npm install and npm run dev inside todo-app/
4. Customize and deploy with npm run build