https://github.com/zenstackhq/sample-todo-nextjs
A complete Todo app sample built with ZenStack and Next.js
https://github.com/zenstackhq/sample-todo-nextjs
Last synced: 8 months ago
JSON representation
A complete Todo app sample built with ZenStack and Next.js
- Host: GitHub
- URL: https://github.com/zenstackhq/sample-todo-nextjs
- Owner: zenstackhq
- License: mit
- Created: 2023-01-22T08:59:22.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-16T00:04:09.000Z (8 months ago)
- Last Synced: 2025-04-30T06:09:41.956Z (8 months ago)
- Language: TypeScript
- Homepage: https://zenstack-todo.vercel.app
- Size: 2.11 MB
- Stars: 22
- Watchers: 1
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ZenStack SaaS Demo
# A Collaborative Todo Sample - ZenStack + Next.js
This project is a collaborative Todo app built with [Next.js](https://nextjs.org), [Next-Auth](nextauth.org), and [ZenStack](https://zenstack.dev).
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.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 `pages/api/model/[...path].ts`.
- [SWR](https://swr.vercel.app/) 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](https://supabase.com). Create a new database for this app, and set the connection string in .env file.
1. Install dependencies
```bash
npm install
```
1. Generate server and client-side code from model
```bash
npm run generate
```
1. Synchronize database schema
```bash
npm run db:push
```
1. Start dev server
```bash
npm run dev
```
For more information on using ZenStack, visit [https://zenstack.dev](https://zenstack.dev).