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.
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.
- TypeScript — for type safety, early detection of bugs, and easier maintenance of components.
- 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.
