zenstackhq / sample-todo-nuxt

A complete Todo app sample built with ZenStack and Nuxt 3

ZenStack SaaS Demo

A Collaborative Todo Sample - ZenStack + Nuxt

This project is a collaborative Todo app built with Nuxt V3, @sidebase/nuxt-auth, and ZenStack.

In this fictitious app, users can be invited to workspaces where they can collaborate on todos. Public todo lists are visible to all members in the workspace.

See a live deployment at: https://zenstack-todo-nuxt.vercel.app/.

Features

• User signup/signin
• Creating workspaces and inviting members
• Data segregation and permission control

Implementation

• Data model is located at /schema.zmodel.
• An automatic CRUD API is mounted at /api/model by server/api/model/[...].ts.
• TanStack Query CRUD hooks are generated under lib/hooks folder.

Running the sample

1. Setup a new PostgreSQL database

   You can launch a PostgreSQL instance locally, or create one from a hoster like Supabase. Create a new database for this app, and set the connection string in .env file.

2. Install dependencies

   npm install

3. Generate server and client-side code from model

   npm run zenstack:generate

4. Synchronize database schema

   npm run db:push

5. Start dev server

   npm run dev

For more information on using ZenStack, visit https://zenstack.dev.