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

A utility-first CSS framework for rapidly building custom user interfaces.

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.

An open source Firebase alternative

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.

Lorem Ipsum... but for photos

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:...

Free UI components plugin for 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.

Simple, modular and accessible UI components for your React applications.

open-source

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.