Our great sponsors
-
zenstack
Supercharges Prisma ORM with a powerful access control layer and unlocks its full potential for web development.
Congratulations on finishing this long journey! ZenStack is an open-source project in its infant stage. If you think it's useful, let's raise it together. Let us know your thought on Twitter, Discord, GitHub, or whatever you like.
-
https://zenstack-nextjs-todo-demo.vercel.app (source)
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
npx create-next-app todo --use-npm -e https://github.com/zenstackhq/nextjs-auth-postgres-template
-
Prisma
Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, MongoDB and CockroachDB
This part is what an ORM provides. Internally, it would be converted into the Prisma schema. Now it is fully compatible with Prisma schema. So to get the complete list of what you can use, please take a reference with the Prisma schema document.
-
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.
-
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.
-
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(); }} /> ); }
-
Sonar
Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
-
Almost every modern application has authentication now, which the access policy is based on as the auth() function you have seen. To simplify the task, ZenStack has integrated with the open source authentication library NextAuth, which we will use in this demo.
-
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.
-
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.
