🚀 Building Mada TodoList with Next.js 15, Redux Toolkit & Tailwind CSS

Jayash — Wed, 18 Jun 2025 11:45:58 +0000

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:
- todoSlice for task management
- themeSlice for dark/light mode
Integrated with useAppDispatch and useAppSelector custom 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 localStorage access.

📌 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 🙏

DEV Community: Jayash