DEV Community

Cover image for What creating a simple todo list taught me?
Aditya Dave
Aditya Dave

Posted on

2 2 1

What creating a simple todo list taught me?

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

State Management

Zustand โ€“ lightweight and scalable state management

Enter fullscreen mode Exit fullscreen mode

Session Management

Upstash Redis โ€“ for handling sessions securely and efficiently

Enter fullscreen mode Exit fullscreen mode

Backend

Node.js + TypeScript

Nodemailer โ€“ for sending verification or password reset emails

Crypto โ€“ for secure password handling
Enter fullscreen mode Exit fullscreen mode

Database

MongoDB (via Mongoose ORM)

Enter fullscreen mode Exit fullscreen mode

๐Ÿ” 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
Enter fullscreen mode Exit fullscreen mode

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!

Warp.dev image

The best coding agent. Backed by benchmarks.

Warp outperforms every other coding agent on the market, and gives you full control over which model you use. Get started now for free, or upgrade and unlock 2.5x AI credits on Warp's paid plans.

Download Warp

Top comments (0)

Dev Diairies image

User Feedback & The Pivot That Saved The Project

๐Ÿ”ฅ Check out Episode 3 of Dev Diairies, following a successful Hackathon project turned startup.

Watch full video ๐ŸŽฅ

๐Ÿ‘‹ Kindness is contagious

Dive into this thoughtful piece, beloved in the supportive DEV Community. Coders of every background are invited to share and elevate our collective know-how.

A sincere "thank you" can brighten someone's dayโ€”leave your appreciation below!

On DEV, sharing knowledge smooths our journey and tightens our community bonds. Enjoyed this? A quick thank you to the author is hugely appreciated.

Okay