Welcome back to our series on building applications with Next.js! In Part 1, we set up the basic project with TypeScript, Tailwind CSS, and Shadcn/UI. Now, in Part 2, we're focusing on building the foundation of a simple app: a Todo List. We'll create the component structure, a clean UI, and local state management first, without diving into complex features like databases or APIs. Think of this as building a house: start with the foundation, then add the roof later.

This article is designed for our tutorial landing page, which will later be divided into two main sections: The first part focuses on setup and UI (what we're covering now), and the second part will add advanced features like data persistence. Let's get started!

1. Introduction: What Are We Building?

In this part, we'll build a simple Todo List app that can add tasks, delete tasks, and mark them as complete. Imagine this as your daily notes app on your phone, but built with Next.js to make it scalable and easy to expand later. The app will have a form to add todos, a list of items that can be checked off, and delete buttons all interactive on the client side.

Prerequisites: We assume you've followed Part 1, so your project already has TypeScript, Tailwind CSS, Shadcn/UI installed, and the cn() utility in lib/utils.ts. If not, go back to Part 1 first!

Why is this simple app important? It's the best way to learn Next.js basics without overwhelming yourself: reusable components, local state management, and responsive styling. Many beginner developers get stuck jumping straight into complex features, so we're starting here. The end result? An app running at localhost:3000/todos, ready for further development.

Pro Tip: The Todo List app is a classic for learning React/Next.js. It's like gym warm-ups: basic, but it builds your strength for bigger projects!

2. Setting Up Basic Components

First, let's extend the folder structure from Part 1. Ensure src/ already has app/ and components/. We'll add a subfolder for todos and specific components.

Here's a visualization of the folder tree (building on the previous setup):

src/
├── app/
│ ├── todos/
│ │ └── page.tsx # Main page for Todo List
│ └── layout.tsx # Global layout from Part 1
├── components/
│ ├── TodoItem.tsx # Component for a single todo item
│ └── TodoForm.tsx # Form for adding todos
└── lib/
    └── utils.ts # cn() utility from Part 1, add other helpers if needed

Create these folders and files in your project. Next, install or use Shadcn/UI components. If not already done, run the command from Part 1: npx shadcn-ui@latest add button input checkbox (for Button, Input, and Checkbox).

Pro Tip: Use Shadcn/UI because its components are customizable via Tailwind. Copy-paste code from their docs, then tweak the className to match your app's theme.

3. Building the UI with Tailwind & Client Components

Now, let's build the UI. Focus on client components since we need interactivity (like onClick). Start with TodoForm.tsx: a simple form with an input and button.

First, add 'use client' at the top of the file to mark it as client-side.

src/components/TodoForm.tsx

'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button'; // From Shadcn/UI
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils'; // Utility from Part 1

interface TodoFormProps {
  onAdd: (text: string) => void;
}

export default function TodoForm({ onAdd }: TodoFormProps) {
  const [text, setText] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (text.trim()) {
      onAdd(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
      <Input
        type="text"
        placeholder="Add a new todo..."
        value={text}
        onChange={(e) => setText(e.target.value)}
        className={cn('border-2 border-gray-300 rounded-md p-2')}
      />
      <Button type="submit" className="bg-blue-500 hover:bg-blue-600">
        Add
      </Button>
    </form>
  );
}

Next, TodoItem.tsx: this is for a single item, with a checkbox to mark complete and a delete button.

src/components/TodoItem.tsx

'use client';

import { Checkbox } from '@/components/ui/checkbox'; // From Shadcn/UI
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface TodoItemProps {
  id: number;
  text: string;
  completed: boolean;
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

export default function TodoItem({ id, text, completed, onToggle, onDelete }: TodoItemProps) {
  return (
    <div className={cn('flex items-center justify-between p-4 border-b border-gray-200', completed && 'line-through text-gray-500')}>
      <div className="flex items-center gap-2">
        <Checkbox checked={completed} onCheckedChange={() => onToggle(id)} />
        <span>{text}</span>
      </div>
      <Button variant="destructive" onClick={() => onDelete(id)}>
        Delete
      </Button>
    </div>
  );
}

Before/After Comparison: Without Tailwind, the UI would be plain and hard to make responsive (e.g., manual flex via regular CSS). With Tailwind + cn(), styling is quick: add classes like 'flex gap-4' and it's instantly neat on mobile/desktop. Integrating cn() makes conditional styling easy, like line-through when completed.

The resulting UI looks something like this (example visualization):

Pro Tip: Don't forget 'use client' if the component needs state or event handlers! Otherwise, Next.js will throw hydration errors.

4. Basic State Management (Local State)

Now, tie it all together on the main page: src/app/todos/page.tsx. We'll use useState to manage the todos array. Add 'use client' here too since we're using local state.

src/app/todos/page.tsx

'use client';

import { useState } from 'react';
import TodoForm from '@/components/TodoForm';
import TodoItem from '@/components/TodoItem';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

export default function TodosPage() {
  const [todos, setTodos] = useState<Todo[]>([]);

  const addTodo = (text: string) => {
    setTodos([...todos, { id: Date.now(), text, completed: false }]);
  };

  const toggleTodo = (id: number) => {
    setTodos(todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo));
  };

  const deleteTodo = (id: number) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div className="max-w-md mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Todo List</h1>
      <TodoForm onAdd={addTodo} />
      <div className="mt-4">
        {todos.map(todo => (
          <TodoItem
            key={todo.id}
            id={todo.id}
            text={todo.text}
            completed={todo.completed}
            onToggle={toggleTodo}
            onDelete={deleteTodo}
          />
        ))}
      </div>
    </div>
  );
}

This mixes server-client: The page is client-side due to 'use client', but later in the next part, we can separate for optimization. The add, toggle, and delete functions use simple setState no need for libraries like Redux yet.

Run npm run dev and check it at http://localhost:3000/todos. Your app should now allow adding, deleting, and marking todos!

Pro Tip: Use Date.now() for temporary IDs. Switch to UUIDs later for scalability.

5. Wrapping Up This Part & Teaser for the Next

Awesome, congrats! We've built the foundation of the Todo List: folder structure, UI components with Tailwind and Shadcn, plus local state management. The app is simple but solid you can add tasks, check them off, and delete without page refreshes.

Checklist:

Is your app running at localhost:3000/todos?
Add a few todos, mark them complete, and delete everything smooth?
Is the UI responsive on mobile? (Thanks to Tailwind!)

In the next part, we'll add data persistence with a database (like Supabase or local storage) and API routes to fetch/store todos. So your app doesn't lose data on refresh! Stay tuned, and if you have questions, comment below.

Thanks for following this tutorial. Happy coding! 🚀

read to part 1 : https://tujuhsembilan.com/article/detail/nextjs-setup-guideline-dont-start-coding-before-setting-this

#NextJS #TodoListApp #ReactTutorial #TailwindCSS #ShadcnUI #WebDevelopment #FrontendDevelopment #JavaScript #CodingTutorial #BeginnerFriendly #AppBuilding #StateManagement #UIComponents #TechTutorial #DeveloperTools

Reference Links

Here are some key reference links for the tutorial on building a Todo List app with Next.js, Tailwind CSS, and Shadcn/UI: