How to Build a Production-Ready Todo App in One Next.js Project With ZenStack

1

Tailwind CSS

We choose to daisyUI component with TailWindCSS utility. We will create a Navigation bar for it. As it's pure front-end Layout work, we will not dive into the detail in this tutorial.

#Developer Tools #Design Tools #Website Design 865 social mentions

2

Supabase

If you don't have a Postgres database, the simple way to get one is to get a docker instance or a free one from Supabase.

#Developer Tools #Realtime Backend / API #Backend As A Service 428 social mentions

3

Lorem Picsum

Import Image from "next/image"; Import { List, User } from "@zenstackhq/runtime/types"; Import { customAlphabet } from "nanoid"; Import { LockClosedIcon, TrashIcon } from "@heroicons/react/24/outline"; Import Avatar from "./Avatar"; Import Link from "next/link"; Import { useRouter } from "next/router"; Import { useList } from "@zenstackhq/runtime/hooks"; Import TimeInfo from "./TimeInfo"; Type Props = { value: List & { owner: User }; deleted?: (value: List) => void; }; Export default function TodoList({ value, deleted }: Props) { const router = useRouter(); const { del } = useList(); const deleteList = async () => { if (confirm("Are you sure to delete this list?")) { try { await del(value.id); } catch (error: any) { if (error.status == 403) { alert("You are not allowed to do so"); } } if (deleted) { deleted(value); } } }; return ( className="card w-80 bg-base-100 shadow-xl cursor-pointer hover:bg-gray-50"> src={`https://picsum.photos/300/200?r=${value.id}`} width={320} height={200} alt="Cover" /> className="card-body"> href={`${router.asPath}/${value.id}`}> className="card-title line-clamp-1">{value.title || "Missing Title"} className="card-actions flex w-full justify-between"> value={value} /> className="flex space-x-2"> user={value.owner} size={18} /> {value.private && ( className="tooltip" data-tip="Private"> className="w-4 h-4 text-gray-500" /> )} className="w-4 h-4 text-gray-500 cursor-pointer" onClick={() => { deleteList(); }} /> ); }.

#Placeholder Images #Design Tools #Web Development Tools 50 social mentions

4

DaisyUI

We choose to daisyUI component with TailWindCSS utility. We will create a Navigation bar for it. As it's pure front-end Layout work, we will not dive into the detail in this tutorial.

#Design Tools #User Experience #Developer Tools 137 social mentions

5

Chakra UI

We also replace the default login page with a custom one implemented using Chakra UI components. Again, you can look at how to do that from the official NextAuth document.

#Design Tools #Developer Tools #UI 197 social mentions