A task management application focused on reducing cognitive load by separating daily priorities, long-term tasks, and shopping lists, supported by visual progress tracking and subtle UX feedback. Initially built in Vanilla JavaScript to validate core functionality, the app was refactored into React.js with Redux to become production-ready, scalable, and maintainable
- Quick overview of today’s due tasks.
- Separate lists for shopping and long-term tasks.
- Progress indicators and subtle UX animations.
App Structure & Pages
/src
├─ lib
| ├─ config → Shared configuration, constants, helpers
| └─ useStorage → Reusable LocalStorage persistence hook
└ components
├─ app
│ ├─ store → Redux store configuration
│ └─ router → React Router setup
│
├─ layout
│ ├─ AppLayout → Main layout wrapper
│ ├─ ErrorBoundary → Global error handling
│ ├─ Header → App header
│ ├─ HeaderToday → Displays today's tasks
│ ├─ Navigation → Navigation bar
│ └─ ModalContent → Reusable modal UI
│
├─ pages
│ ├─ DoLater → Date-based tasks scheduling
│ ├─ doLaterSlice → Redux slice for date-based tasks
│ ├─ SavedTasks → Archived date-based tasks
│ ├─ TodaysTasks → Tasks due today
│ └─ todoAndShop/
│ └─ TodoShop → To-do & shopping list
│
└─ ui
├─ Button
├─ ButtonQuery
├─ ToggleList
├─ Confirm
├─ Spinner
├─ Percent
├─ NotFound
└─ NaviCons/ → Custom SVG iconsProject Versions
Key Features
- Date-based tasks: automatically surfaced in Today’s Header when due.
- Task type separation: Todos, Shop, Todays Tasks and Do Later lists to reduce clutter.
- ToggleList behavior: click to toggle between checkbox and delete state for quick management.
- Bulk delete: for completed tasks.
- Progress tracker: color-coded to motivate users visually.
- Onboarding modal: explains primary app flows for first-time users.
- Responsive design: mobile-first layout with subtle UI animations for a polished experience.
Architecture & Tech Decisions
- React.js — for a modular, component-driven architecture with clear separation of concerns.
- React Router — for declarative client-side routing and maintainable page structure.
- Redux Toolkit — for predictable global state management of date-based and derived data.
- Custom Hook for localStorage — to encapsulate persistence logic and keep components UI-focused.
- Tailwind CSS — for rapid, consistent, mobile-first styling.
- Framer Motion — for subtle, performant animations improving perceived responsiveness.
- Custom SVG icons — to reduce dependencies and ensure visual consistency.
- Vite - for fast development and optimized production builds.
- Deployment – via Vercel with automated builds and global delivery.
State Management
Date-based tasks are handled via global state (Redux Toolkit) and persisted in LocalStorage using store.subscribe(), making them available across multiple pages. Page-specific data such as Todoes and Shop items use local state with a custom useStorage hook for LocalStorage persistence. Derived state computes Today’s Header by filtering global tasks by the current date.
Challenges & Learnings
- Designing a balanced state architecture combining global and local state.
- Building reusable UI components to reduce duplication and improve consistency
- Migrating from Vanilla JS to React with Redux Toolkit highlighted the benefits of predictable state management and component-based architecture for scaling features and improving UX.
- Replacing external assets with custom SVG icons to solve technical and licensing issues
Comparison of JS vs React.js versions. Changes include updated design, custom SVG icons, and Trash button feature.
Reflection & Next Step
This project strengthened my understanding of frontend architecture, state management, and reusable component design. It reinforced the importance of balancing technical structure with user-focused design.
Planned enhancements include:
- Opening a GPS-based world map on the Shop page to explore the location of shops and link them to shop items.
- Allowing users to export lists (Notes/Tasks, Shop List, Today’s Tasks) as PDF or PNG for printing and offline use
