Awesome
Manage your Todos with Atidone ☑️
A demonstration using Nuxt with server-side rendering on the edge, authentication and database querying using Cloudflare D1 with Drizzle ORM.
Features
- Server-Side Rendering on the Edge
- Authentication backed-in using nuxt-auth-utils
- Leverage Cloudflare D1 as database and drizzle ORM using
hubDatabase() - Automatic database migrations in development & when deploying
- User interface made with Nuxt UI
- Embed Drizzle Studio in the Nuxt DevTools
- Cache invalidation and Optimistic UI with Pinia Colada
Live demo
https://github.com/atinux/atidone/assets/904724/5f3bee55-dbae-4329-8057-7d0e16e92f81
To see an example using Passkeys (WebAuthn) for authentication, checkout todo-passkeys.
Setup
Make sure to install the dependencies using pnpm:
pnpm i
Create a GitHub Oauth Application with:
- Homepage url:
http://localhost:3000 - Callback url:
http://localhost:3000/api/auth/github
Add the variables in the .env file:
NUXT_OAUTH_GITHUB_CLIENT_ID="my-github-oauth-app-id"
NUXT_OAUTH_GITHUB_CLIENT_SECRET="my-github-oauth-app-secret"
To create sealed sessions, you also need to add NUXT_SESSION_PASSWORD in the .env with at least 32 characters:
NUXT_SESSION_PASSWORD="your-super-long-secret-for-session-encryption"
Development
Start the development server on http://localhost:3000
npm run dev
In the Nuxt DevTools, you can see your tables by clicking on the Hub Database tab:
https://github.com/atinux/atidone/assets/904724/7ece3f10-aa6f-43d8-a941-7ca549bc208b
Deploy
You can deploy this project on your Cloudflare account for free and with zero configuration using NuxtHub.
npx nuxthub deploy
It's also possible to leverage Cloudflare Pages CI for deploying, learn more about the different options on https://hub.nuxt.com/docs/getting-started/deploy
Remote Storage
Once you deployed your project, you can connect to your remote database locally running:
pnpm dev --remote
Learn more about remote storage on https://hub.nuxt.com/docs/getting-started/remote-storage