Software Alternatives & Reviews

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

Recommended and mentioned products

  1. 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.
  2. 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.
  3. 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:...
  4. 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.
  5. 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.