Todo App with Neon Postgres
This tutorial demonstrates how to build Todo app
using Drizzle ORM with Neon database and Next.js.
Backend
Install Drizzle Kit and Drizzle ORM
The first step is to install Drizzle Kit and Drizzle ORM in your project.
npm i drizzle-orm @neondatabase/serverless
npm i -D drizzle-kit
Here, we’re installing the necessary packages: drizzle-orm
for database interactions and @neondatabase/serverless
for working with the Neon database. The drizzle-kit
package is used as a dev-dependency for handling configuration and migrations.
Connect Drizzle ORM to the Neon database
import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';
const sql = neon(process.env.NEON_DATABASE_URL!);
const db = drizzle(sql);
export default db;
In this snippet, we import functionality from @neondatabase/serverless
and drizzle-orm
, establish a connection to the Neon database, and initialize Drizzle.
Setup Drizzle config file
Then, set up the Drizzle configuration. Drizzle config is a configuration file used by Drizzle Kit. It contains all the information about your database connection, migration folder, and schema files.
import "dotenv/config";
import { defineConfig } from "drizzle-kit";
export default defineConfig({
schema: "./db/schema.ts",
out: "./drizzle",
dialect: "postgresql",
dbCredentials: {
url: process.env.NEON_DATABASE_URL!,
},
});
This configuration file specifies the database schema location, path for generating migrations, and database connection through the connection string.
Declare todos schema
import { integer, text, boolean, pgTable } from "drizzle-orm/pg-core";
export const todo = pgTable("todo", {
id: integer("id").primaryKey(),
text: text("text").notNull(),
done: boolean("done").default(false).notNull(),
});
Here we define the todo
table with fields id
, text
, and done
, using data types from Drizzle ORM.
Push your schema changes directly to the database without generating any migrations files using drizzle-kit push
command:
npx drizzle-kit push
Now, we’re ready to write queries using Drizzle ORM.
Functions
Add todo
: TheaddTodo
function inserts a new record into thetodo
table.Get todos
: Here, we fetch all todos, sorted by their identifier.Edit todo
: TheeditTodo
function updates the text of a todo by its identifier.Toggle todo
: This method toggles the status of a todo to its opposite state.Delete todo
: ThedeleteTodo
function removes a todo by its identifier.
import db from "@/db/drizzle";
import { todo } from "@/db/schema";
export const addTodo = async (id: number, text: string) => {
await db.insert(todo).values({
id: id,
text: text,
});
};
import db from "@/db/drizzle";
import { todo } from "@/db/schema";
import { asc } from 'drizzle-orm';
export const getData = async () => {
const data = await db.select().from(todo).orderBy(asc(todo.id));
return data;
};
import db from "@/db/drizzle";
import { todo } from "@/db/schema";
import { eq } from 'drizzle-orm';
export const editTodo = async (id: number, text: string) => {
await db
.update(todo)
.set({
text: text,
})
.where(eq(todo.id, id));
};
import db from "@/db/drizzle";
import { todo } from "@/db/schema";
import { eq, not } from 'drizzle-orm';
export const toggleTodo = async (id: number) => {
await db
.update(todo)
.set({
done: not(todo.done),
})
.where(eq(todo.id, id));
};
import db from "@/db/drizzle";
import { todo } from "@/db/schema";
import { eq } from 'drizzle-orm';
export const deleteTodo = async (id: number) => {
await db.delete(todo).where(eq(todo.id, id));
};
Frontend
Initiate Next.js app with Tailwind CSS
Initiate a new Next.js application with Tailwind CSS support using the npx create-next-app@latest
command. Name your project when prompted, navigate to the project directory, and start the development server with npm run dev
. Your Next.js app is now set up for customization and styling with Tailwind CSS.
npx create-next-app@latest
Define a TypeScript type
Define a TypeScript type for a todo item with three properties: id
of type number
, text
of type string
, and done
of type boolean
. This type, named todoType
, represents the structure of a typical todo item within your application.
export type todoType = {
id: number;
text: string;
done: boolean;
};
Create a home page for a to-do application
import {getData} from "@/actions/todoActions";
import AddTodo from "@/components/AddTodo";
import Todo from "@/components/Todo";
export default async function Home() {
const data = await getData();
return <Todos todos={data} />;
}
Todos.tsx
: Create Todos components that represents the main interface of a Todo app. It manages the state of todo items, provides functions for creating, editing, toggling, and deleting todos, and renders the individual todo items using theTodo
component.Todo.tsx
: Create aTodo
component that represents a single todo item. It includes features for displaying and editing the todo text, marking it as done with a checkbox, and providing actions for editing, saving, canceling, and deleting the todo.AddTodo
: TheAddTodo
component provides a simple form for adding new todo items to the Todo app. It includes an input field for entering the todo text and a button for triggering the addition of the new todo.
"use client";
import { FC, useState } from "react";
import { todoType } from "@/types/todoType";
import Todo from "./Todo";
import AddTodo from "./AddTodo";
import { addTodo, deleteTodo, editTodo, toggleTodo } from "@/actions/todoActions";
interface Props {
todos: todoType[];
}
const Todos: FC<Props> = ({ todos }) => {
// State to manage the list of todo items
const [todoItems, setTodoItems] = useState<todoType[]>(todos);
// Function to create a new todo item
const createTodo = (text: string) => {
const id = (todoItems.at(-1)?.id || 0) + 1;
addTodo(id, text);
setTodoItems((prev) => [...prev, { id: id, text, done: false }]);
};
// Function to change the text of a todo item
const changeTodoText = (id: number, text: string) => {
setTodoItems((prev) =>
prev.map((todo) => (todo.id === id ? { ...todo, text } : todo))
);
editTodo(id, text);
};
// Function to toggle the "done" status of a todo item
const toggleIsTodoDone = (id: number) => {
setTodoItems((prev) =>
prev.map((todo) => (todo.id === id ? { ...todo, done: !todo.done } : todo))
);
toggleTodo(id);
};
// Function to delete a todo item
const deleteTodoItem = (id: number) => {
setTodoItems((prev) => prev.filter((todo) => todo.id !== id));
deleteTodo(id);
};
// Rendering the Todo List component
return (
<main className="flex mx-auto max-w-xl w-full min-h-screen flex-col items-center p-16">
<div className="text-5xl font-medium">To-do app</div>
<div className="w-full flex flex-col mt-8 gap-2">
{/* Mapping through todoItems and rendering Todo component for each */}
{todoItems.map((todo) => (
<Todo
key={todo.id}
todo={todo}
changeTodoText={changeTodoText}
toggleIsTodoDone={toggleIsTodoDone}
deleteTodoItem={deleteTodoItem}
/>
))}
</div>
{/* Adding Todo component for creating new todos */}
<AddTodo createTodo={createTodo} />
</main>
);
};
export default Todos;
"use client";
import { ChangeEvent, FC, useState } from "react";
import { todoType } from "@/types/todoType";
interface Props {
todo: todoType;
changeTodoText: (id: number, text: string) => void;
toggleIsTodoDone: (id: number, done: boolean) => void;
deleteTodoItem: (id: number) => void;
}
const Todo: FC<Props> = ({
todo,
changeTodoText,
toggleIsTodoDone,
deleteTodoItem,
}) => {
// State for handling editing mode
const [editing, setEditing] = useState(false);
// State for handling text input
const [text, setText] = useState(todo.text);
// State for handling "done" status
const [isDone, setIsDone] = useState(todo.done);
// Event handler for text input change
const handleTextChange = (e: ChangeEvent<HTMLInputElement>) => {
setText(e.target.value);
};
// Event handler for toggling "done" status
const handleIsDone = async () => {
toggleIsTodoDone(todo.id, !isDone);
setIsDone((prev) => !prev);
};
// Event handler for initiating the edit mode
const handleEdit = () => {
setEditing(true);
};
// Event handler for saving the edited text
const handleSave = async () => {
changeTodoText(todo.id, text);
setEditing(false);
};
// Event handler for canceling the edit mode
const handleCancel = () => {
setEditing(false);
setText(todo.text);
};
// Event handler for deleting a todo item
const handleDelete = () => {
if (confirm("Are you sure you want to delete this todo?")) {
deleteTodoItem(todo.id);
}
};
// Rendering the Todo component
return (
<div className="flex items-center gap-2 p-4 border-gray-200 border-solid border rounded-lg">
{/* Checkbox for marking the todo as done */}
<input
type="checkbox"
className="text-blue-200 rounded-sm h-4 w-4"
checked={isDone}
onChange={handleIsDone}
/>
{/* Input field for todo text */}
<input
type="text"
value={text}
onChange={handleTextChange}
readOnly={!editing}
className={`${
todo.done ? "line-through" : ""
} outline-none read-only:border-transparent focus:border border-gray-200 rounded px-2 py-1 w-full`}
/>
{/* Action buttons for editing, saving, canceling, and deleting */}
<div className="flex gap-1 ml-auto">
{editing ? (
<button
onClick={handleSave}
className="bg-green-600 text-green-50 rounded px-2 w-14 py-1"
>
Save
</button>
) : (
<button
onClick={handleEdit}
className="bg-blue-400 text-blue-50 rounded w-14 px-2 py-1"
>
Edit
</button>
)}
{editing ? (
<button
onClick={handleCancel}
className="bg-red-400 w-16 text-red-50 rounded px-2 py-1"
>
Close
</button>
) : (
<button
onClick={handleDelete}
className="bg-red-400 w-16 text-red-50 rounded px-2 py-1"
>
Delete
</button>
)}
</div>
</div>
);
};
export default Todo;
"use client";
import { ChangeEvent, FC, useState } from "react";
interface Props {
createTodo: (value: string) => void;
}
const AddTodo: FC<Props> = ({ createTodo }) => {
// State for handling input value
const [input, setInput] = useState("");
// Event handler for input change
const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
setInput(e.target.value);
};
// Event handler for adding a new todo
const handleAdd = async () => {
createTodo(input);
setInput("");
};
// Rendering the AddTodo component
return (
<div className="w-full flex gap-1 mt-2">
{/* Input field for entering new todo text */}
<input
type="text"
className="w-full px-2 py-1 border border-gray-200 rounded outline-none"
onChange={handleInput}
value={input}
/>
{/* Button for adding a new todo */}
<button
className="flex items-center justify-center bg-green-600 text-green-50 rounded px-2 h-9 w-14 py-1"
onClick={handleAdd}
>
Add
</button>
</div>
);
};
export default AddTodo;
Establish server-side functions
In this step, we establish server-side functions in the todoActions
file to handle crucial operations on todo items:
getData
:- Fetches all existing todo items from the database.
addTodo
:- Adds a new todo item to the database with the provided text.
- Initiates revalidation of the home page using
revalidatePath("/")
.
deleteTodo
:- Removes a todo item from the database based on its unique ID.
- Triggers a revalidation of the home page.
toggleTodo
:- Toggles the completion status of a todo item, updating the database accordingly.
- Revalidates the home page after the operation.
editTodo
:- Modifies the text of a todo item identified by its ID in the database.
- Initiates a revalidation of the home page.
"use server";
import {eq} from "drizzle-orm";
import {revalidatePath} from "next/cache";
import db from "@/db/drizzle";
import {todo} from "@/db/schema";
export const getData = async () => {
const data = await db.select().from(todo);
return data;
};
export const addTodo = async (text: string) => {
await db.insert(todo).values({
text: text,
});
revalidatePath("/");
};
export const deleteTodo = async (id: number) => {
await db.delete(todo).where(eq(todo.id, id));
revalidatePath("/");
};
export const toggleTodo = async (id: number, done: boolean) => {
await db
.update(todo)
.set({
done: done,
})
.where(eq(todo.id, id));
revalidatePath("/");
};
export const editTodo = async (id: number, text: string) => {
await db
.update(todo)
.set({
text: text,
})
.where(eq(todo.id, id));
revalidatePath("/");
};
Project file structure
This guide uses the following file structure:
📦 <project root>
├ 📂 actions
│ └ 📜 todoActions.ts
├ 📂 app
│ ├ 📜 globals.css
│ ├ 📜 layout.tsx
│ └ 📜 page.tsx
├ 📂 components
│ ├ 📜 AddTodo.tsx
│ ├ 📜 Todo.tsx
│ └ 📜 Todos.tsx
├ 📂 types
│ └ 📜 todoType.ts
├ 📜 next.config.ts
├ 📜 package.json
├ 📜 postcss.config.ts
├ 📜 tailwind.config.ts
└ 📜 tsconfig.json
📦 <project root>
├ 📂 drizzle
│ ├ 📂 meta
│ │ ├ 📜 _journal.json
│ │ └ 📜 0000_snapshot.json
│ └ 📜 0000_watery_spencer_smythe.sql
├ 📂 actions
│ └ 📜 todoActions.ts
├ 📂 db
│ ├ 📜 drizzle.ts
│ └ 📜 schema.ts
├ 📜 drizzle.config.ts
├ 📜 package.json
└ 📜 tsconfig.json
📦 <+project root>
├ 📂 actions
│ └ 📜 todoActions.ts
├ 📂 drizzle
│ ├ 📂 meta
│ │ ├ 📜 _journal.json
│ │ └ 📜 0000_snapshot.json
│ └ 📜 0000_watery_spencer_smythe.sql
├ 📂 app
│ ├ 📜 globals.css
│ ├ 📜 layout.tsx
│ └ 📜 page.tsx
├ 📂 components
│ ├ 📜 AddTodo.tsx
│ ├ 📜 Todo.tsx
│ └ 📜 Todos.tsx
├ 📂 db
│ ├ 📜 drizzle.ts
│ └ 📜 schema.ts
├ 📂 types
│ └ 📜 todoType.ts
├ 📜 next.config.ts
├ 📜 package.json
├ 📜 drizzle.config.ts
├ 📜 postcss.config.ts
├ 📜 tailwind.config.ts
└ 📜 tsconfig.json