Timeframe
- Present
Github
Objective
A modern habit tracking & journal application demonstrating advanced Redux patterns with Next.js and shadcn/ui.
Technologies
00
Daily, weekly, and monthly habit tracking interfaces
01
Add, edit, and delete habits with CRUD operations centralized via Redux slices
02
Journal entry creation with dedicated UI integration
03
Sort and filter habits using Redux selectors and UI controls
04
RTK Query powered mock API with data fetching, caching, and optimistic updates
05
Persistent UI preferences (light/dark theme) using redux-persist
06
Toasts and notification system centralized with Redux slice and RTK Query integration
Frontend
Built using Next.js’s App Router for routing and server/client boundaries, the frontend leverages Redux Toolkit as the core state manager. Entity adapters handle normalized state for habit and journal collections, while RTK Query encapsulates data fetching and synchronization with a mock backend (json-server). State slices are cleanly separated into theme, filter, habit, journal, and toast logic.
Hosting
00
Managing normalized state effectively for both habits and journals
Used Redux Toolkit entity adapters to normalize collections, enabling fast lookups and consistent updates without duplication. Custom selectors (`selectAll`, `selectById`) abstracted access patterns for UI components.
Used Redux Toolkit entity adapters to normalize collections, enabling fast lookups and consistent updates without duplication. Custom selectors (`selectAll`, `selectById`) abstracted access patterns for UI components.
01
Integrating asynchronous API logic while keeping Redux state clean
Adopted RTK Query’s abstraction for defining endpoints. This decoupled API logic from reducers and enabled automatic cache invalidation, background refetching, and built-in request statuses.
Adopted RTK Query’s abstraction for defining endpoints. This decoupled API logic from reducers and enabled automatic cache invalidation, background refetching, and built-in request statuses.
02
Ensuring user preferences survive reloads
Configured redux-persist to automatically save theme and other selected slices to local storage, seamlessly restoring them on reload without manual logic.
Configured redux-persist to automatically save theme and other selected slices to local storage, seamlessly restoring them on reload without manual logic.
00
Using Redux Toolkit’s entity adapter for normalized global state management
01
Practical application of RTK Query for structured data fetching and cache control
02
Pattern separation between domain slices (habits/journal) and UI slices (theme/toasts)
03
Implementing redux-persist for reliable preference persistence
04
Architecting a scalable Redux + Next.js app with clean separation of concerns
00
Initial design tried storing deeply nested state which became hard to update — switched to normalized entities.
01
Early persistence logic attempted to save entire store, but caused performance issues, leading to selective persistence with redux-persist.
00
Replace mock API with a real backend and cloud sync
01
Add user authentication and multi-device support
02
Implement analytics and habit streak visualizations
03
Add notifications and reminders
Next Project