Serverless Todo List

A lightweight, serverless todo list application built with Next.js and deployed on Vercel. Features a sleek UI with DaisyUI and a fully serverless backend.

Serverless Todo List: Task Management Made Simple

The Serverless Todo List is a modern web application I built to streamline task management with a clean, user-friendly interface. Powered by Next.js and deployed on Vercel, it leverages serverless architecture for scalability and simplicity, with a polished design courtesy of DaisyUI.

Project Highlights

  • Frontend: Crafted with Next.js and DaisyUI for a responsive, visually appealing UI that adapts to light, dark, and winter themes.
  • Backend: Fully serverless, using Vercel’s API routes to handle CRUD operations (create, read, update, delete) for todos.
  • Deployment: Hosted on Vercel, ensuring zero server management and seamless scaling.
The app supports multiple themes, including light and dark modes, powered by DaisyUI.

Key Features

Todo Management

  • Add, delete, and view todos with real-time updates.
  • Built-in loading states and error handling for a smooth user experience.

Serverless Backend

  • API Routes: Vercel handles all backend logic with endpoints like /api/todos (GET), /api/todos/post (POST), and /api/todos/delete (DELETE).
  • No Database: Uses in-memory storage for simplicity (easily extensible to a database like Vercel Postgres).

Design & Usability

  • DaisyUI Integration: Styled with Tailwind CSS and DaisyUI components (e.g., btn, input-bordered) for a cohesive look.
  • Responsive Layout: Works seamlessly across desktop and mobile devices.
Adding a todo with a clean, intuitive interface.

Technical Breakdown

  • Tech Stack:
    • Next.js: For client-side rendering and API routes.
    • TypeScript: Ensures type safety across the app.
    • Vercel: Hosts the app and provides serverless functions.
    • DaisyUI/Tailwind: Powers the styling and theming.
  • Code Structure:
    • Modularized logic into reusable functions (fetchTodos, addTodo, removeTodo) stored in lib/utils/.
    • API routes in app/api/todos/ handle all backend operations.
  • Deployment:
    • Pushed to GitHub and auto-deployed via Vercel’s CI/CD pipeline.
    • Accessible at a custom domain or Vercel’s default URL.
Deployed effortlessly on Vercel with automatic scaling.

Why Serverless?

This project showcases the power of serverless architecture:

  • Scalability: Handles traffic spikes without manual server setup.
  • Cost-Effective: Pay only for what’s used, with Vercel’s generous free tier.
  • Simplicity: No server maintenance, letting me focus on building features.

Check out the live demo here or explore the source code on GitHub!