š Building Mada TodoList with Next.js 15, Redux Toolkit & Tailwind CSS
A simple and modern Todo List app built with performance and UX in mind. Don’t get confused. MADA means ADAM in reverse.
šÆ What is Mada TodoList?
Mada TodoList is a sleek, fast, and responsive task management web application. I built it to sharpen my frontend skills and explore the capabilities of Next.js 15 with the App Router, Redux Toolkit, and Tailwind CSS.
Despite being simple on the surface, the project packs a full set of practical features ā perfect for learning and iterating.
āØ Features
- ā Add, edit, and delete tasks
- š Toggle task completion
- š Filter by All | Active | Completed
- š Light/Dark theme toggle with persistent storage
- š¾ Save tasks in
localStorage - š± Fully responsive layout
- ā” Client-side only with hydration-safe logic
š Tech Stack
š§© Next.js 15 (App Router)
- Using client components and App Router, the app is structured around interactive UI and modular design.
āļø Redux Toolkit
-
State managed via Redux slices:
-
todoSlicefor task management -
themeSlicefor dark/light mode
-
-
Integrated with
useAppDispatchanduseAppSelectorcustom hooks.
šØ Tailwind CSS
- Used utility classes for styling and layout.
- Supported dark mode via class strategy, triggered by a Redux-controlled theme.
š” localStorage (With SSR-safe Access)
- Tasks and theme preference are persisted via
localStorage. - Avoided SSR errors by wrapping reads/writes in
useEffect.
š Folder Structure
mada-todolist/
āāā app/
ā āāā layout.tsx # App entry
āāā components/
ā āāā Input.tsx
ā āāā List.tsx
ā āāā ...
āāā store/
ā āāā hooks.ts
ā āāā todo/
ā ā āāā todoSlice.ts
ā āāā theme/
ā āāā themeSlice.ts
āāā styles/
ā āāā globals.css
āāā utils/
āāā storage.ts
ā ļø Challenges Faced
1. localStorage is not defined
Accessing localStorage during SSR crashed the app.
Fix: Moved all localStorage logic into useEffect, and avoided preloading data in initial Redux state.
2. Flash of wrong theme on reload
On reload, light theme showed for a split second before switching to dark.
Fix: Injected inline script in <head> to apply saved theme before React hydration.
3. Redux with hydration
Redux state and localStorage needed synchronization post-mount.
Fix: Used an initializeTheme action and conditionally updated state after mount.
š What I Learned
- Clean separation of concerns using slices in Redux Toolkit.
- Dark mode theming using Tailwind + persisted state.
- Next.js 15 App Router with full client-side hydration management.
- Best practices for SSR-safe
localStorageaccess.
š What’s Next?
Some possible extensions:
- Add drag-and-drop reordering
- Sync tasks with a backend (e.g. Supabase or Firebase)
- Add login/authentication
- Convert into a PWA
š Try it out
GitHub: https://github.com/jayash101/MADA-Todo-App
Live Preview: Click here
Feel free to explore, fork, or contribute!
š Final Thoughts
Small apps like this are great for diving deep into real-world challenges with state management, SSR compatibility, and responsive design. Iād love to hear your thoughts or feedback!
Thanks for reading š
