What creating a simple todo list taught me?

Aditya Dave — Sun, 20 Apr 2025 06:38:50 +0000

How do you learn? That's a very subjective question. Depends on what you are learning , but as far as the tech field is concerned you learn the most by practicing what you learnt in theory. The theory contains concepts required to get started but once you build it clarifies the concepts and the hiccups faced during building those stuff in turn makes you learn a lot of concepts which did not come up during theoretical studying.

Here's a synopsis of one of those projects.

A full stack todo list application

✨ Introduction
In the modern world of web development, creating a performant, full-stack application that handles both frontend fluidity and backend robustness is more achievable than ever. This project is a shining example — a full-stack todo app built using Next.js, MongoDB, and Redis.

Whether you're learning full-stack development or exploring state management and authentication workflows, this app is a great starting point.

🛠️ Getting Started
To get this project running locally:


npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Once the dev server is running, open your browser and go to:
👉 http://localhost:3000

You can begin editing the app by modifying the app/page.tsx file. The page will auto-update on save — no refresh required!

📚 About the Project

This todo app is more than just a list of tasks. It’s a multi-user platform where:

Users can sign up, log in, and change passwords.

Each user can only view and manage their own todos.

The app is responsive, animated, and built for performance and maintainability.

⚙️ Tech Stack
Here's what powers the app under the hood:

Frontend

Next.js (App Router)

React.js

Tailwind CSS + DaisyUI for rapid and beautiful styling

Framer Motion for animations

State Management

Zustand – lightweight and scalable state management

Session Management

Upstash Redis – for handling sessions securely and efficiently

Backend

Node.js + TypeScript

Nodemailer – for sending verification or password reset emails

Crypto – for secure password handling

Database

MongoDB (via Mongoose ORM)

🔐 Environment Variables
Set the following environment variables in your .env.local file:


MONGODB_URI=your-mongodb-url
MONGODB_NAME=name-of-database
UPSTASH_REDIS_REST_URL=upstash-redis-rest-url
UPSTASH_REDIS_REST_TOKEN=upstash-redis-token
SESSION_EXPIRATION=2400 # 60 * 40
HOST_URL=http://localhost:3000
LOGGER_ENABLED=true
SENDER_EMAIL=your-email-id
GOOGLE_MAIL_PASSWORD=your-google-app-password

Authentication
Authentication has been done using redis-session management and password hashing using crypto and salt generation using the same. The passwords generated using passwordActions.ts are being used in signup and session management is taken care of in the sessionActions.ts The session expiration has been set after 40 mins. To ensure that the password can be changed on forgetting the same can be done using creation of a verification token sending the same on the mail and adding it to redis to be read in future for verification. For more details explore the github repo listed below.

🔮 Planned Enhancements
Here’s how this app could evolve in future versions:

Analytics & Stats

Track todos completed over time (monthly/yearly).
Requires schema updates and new routes.
A cron job to email users their incomplete tasks periodically.
Connection Pooling
Improve performance by reusing DB connections.

📘 Learn More
Want to dive deeper into Next.js and its capabilities?

📚 Next.js Documentation

🧠 Learn Next.js

🔧 Next.js GitHub

Github Repo
Repo URL : https://github.com/Adi-Dave-cs/NextJS/tree/main/NextJs/nexttodolist

🚀 Deploy on Vercel
The app is deployed using Vercel, the official hosting platform for Next.js. You can deploy your own version in seconds:

👉 Deploy your app on Vercel
Check it here : NextTodoApp ==> https://next-js-omega-brown-38.vercel.app
🎉 Final Thoughts
This full-stack todo app is a robust starter for anyone diving into modern web development. It shows how to build a secure, animated, and full-featured app using some of the most powerful tools in today’s ecosystem.

Feel free to fork, extend, and deploy it — and don’t forget to try the Live Demo!

DEV Community: Aditya Dave

What creating a simple todo list taught me?

A full stack todo list application