notty

A simple Kanban board app to help you stay organized anywhere.

✨ Demo

Getting Started

1. Install the dependencies:

   pnpm install

2. Create environment files:

   • .env.development.local used for next dev.
   • .env should mimic .env.development.local for the most part.
     • Prisma and Playwright prefer .env so it can be modified accordingly.
   • .env.test.local used for vitest. Check SQLite Local Database section for more info.
   • .env.production.local used for next start. Check SQLite Database from Turso section for more info.

3. Add environment variables to environment files following .env.example.

   • For DATASOURCE_URL and DATABASE_URL see:
     • SQLite Local Database section.
     • SQLite Database from Turso section.
   • For DATABASE_AUTH_TOKEN see:
     • SQLite Database from Turso section.
   • For UNSPLASH_ACCESS_KEY see:
     • Unsplash API
   • For DISCORD_CLIENT_ID and DISCORD_CLIENT_SECRET see:
     • NextAuth with the default DiscordProvider section.
   • For NEXT_AUTH_SECRET see:
     • Next Auth Secret

4. Sync DB with prisma schema

   pnpm db:push

5. Run the application:

   pnpm dev

Scripts 📜

Install

pnpm install

Build

Builds the app for production.

pnpm build

Develop

Runs the app in development mode. Opens http://localhost:3000/ to view it in the browser.

pnpm dev

Start

Locally preview the production build. Open http://localhost:3000/ to view it in the browser.

pnpm start

Lint and Format

Runs eslint to fix linting errors.

pnpm lint

Format the application with prettier.

pnpm format

Database

Sync the database with the prisma schema.

pnpm db:push

Opens Prisma studio on http://localhost:5555

pnpm db:studio

Test

Runs all test.

pnpm test

Runs unit/integration tests.

pnpm test:unit

Runs e2e tests.

pnpm test:e2e

SQLite Local Database

For development and testing a local database can be use with a *.sqlite file.

Development

Assign credentials to the environment variables inside .env and .env.development.local.

DATASOURCE_URL="file:./db.sqlite"
DATABASE_URL="file:./prisma/db.sqlite"

Testing

Assign credentials to the environment variables inside .env.test.local.

DATASOURCE_URL="file:./test.sqlite"
DATABASE_URL="file:./prisma/test.sqlite"

DATABASE_AUTH_TOKEN is not needed for local development or testing.

SQLite Database from Turso 🫎

Turso is a SQLite-compatible database built on libSQL, the Open Contribution fork of SQLite.

Connecting Turso

If you don't have an existing database, you can provision a database by running the following command:

turso db create <DATABASE_NAME>

1. Get the database URL:

   turso db show --url <DATABASE_NAME>

2. Get the database authentication token:

   turso db tokens create <DATABASE_NAME>

3. Assign credentials to the environment variables inside .env.production.local.

   DATASOURCE_URL="file:./dev.db"
   DATABASE_URL="<TURSO_DATABASE_URL>"
   DATABASE_AUTH_TOKEN="<TURSO_AUTH_TOKEN>"

4. Generate Prisma Client

   pnpm dlx prisma generate

5. Make an migration to sync with the Prisma schema.

   turso db shell <DATABASE_NAME> < <MIGRATION_FILE_PATH>

6. Make a production build:

   pnpm build

7. Run the production build, connected to Turso database:

   pnpm start

More on connecting Turso

• How to connect and query a Turso Database
• Prisma + Turso

Migrations / Update database schema

Turso doesn't support Prisma Migrate. To update your database schema:

1. Generate a migration file using prisma migrate dev against a local SQLite database:

   npx prisma migrate dev --name <NAME>

2. Apply the migration using Turso's CLI:

   turso db shell <DATABASE_NAME> < ./prisma/migrations/<DATE_NAME>/migration.sql

For subsequent migrations, repeat the above steps to apply changes to your database.

More on Turso:

• Manage Schema Changes

NextAuth with the default DiscordProvider 🔒

Setting up the default DiscordProvider

1. Head to the Applications section in the Discord Developer Portal, and click on “New Application”.
2. In the settings menu, go to “OAuth2 => General”.

• Copy the Client ID and paste it in DISCORD_CLIENT_ID in .env.

• Under Client Secret, click “Reset Secret” and copy that string to DISCORD_CLIENT_SECRET in .env. Be careful as you won’t be able to see this secret again, and resetting it will cause the existing one to expire.

• Click “Add Redirect” and paste in <app url>/api/auth/callback/discord. (ex. for local development: http://localhost:3000/api/auth/callback/discord )

• Save your changes.

• It is possible, but not recommended, to use the same Discord Application for both development and production. You could also consider Mocking the Provider during development.

More on NextAuth with T3...
More on Discord OAuth2...

Testing 🧪

Unit/Integration tests 🧪

Unit/Integration testing uses Vitest.
Vitest aims for compatibility with Jest.

This project uses dotenv to load the .env.test.local file in the vitest.config.ts file.

Setup testing

1. Create .env.test.local file. Following .env.example template.
2. Set DATABASE_URL to "file:./prisma/test.sqlite" in .env.test.local.
3. Set DATASOURCE_URL to file:./test.sqlite in pretest script in package.json.
4. Set NODE_ENV to test in .env.test.local.

Running Unit/Integration tests

1. For the first time, use:

   pnpm test

   This will run the pretest script first and then test script. Or run directly:

   pnpm pretest
   pnpm vitest src

   The pretest script syncs the database with the Prisma schema.

   Pretest uses the DATABASE_URL explicitly since prisma cli would only read .env file. (prisma/prisma#3865). Also the difference between DATABASE_URL in .env.test.local and pretest script comes from where they load the datasource url. pretest uses schema.prisma location but everything else use the root.

2. Subsequently, tests can be run simply using:

   pnpm vitest src

   or use:

   pnpm test:unit

More Info

• Driver Adapters
• Specify a SQLite data source

Adding Unit/Integration tests

Add files for testing with *.test.{ts|tsx} pattern.

Updating DATABASE_URL

If you wish to change the name file for the test database, you need to change the DATABASE_URL value in:

• The .env.test.local file.
• The pretest script in the package.json file.

E2E Tests 🧪

End-to-end testing is done using Playwright.

Installing Playwright browsers

To install browsers run:

npx playwright install

Running e2e tests

To run only the e2e tests, use:

npx playwright test

or, use:

pnpm test:e2e

Adding e2e tests

Add files to e2e folder with *.spec.{ts} pattern.

Run all tests

To run all tests use:

pnpm test

More on testing

• Integration testing with Prisma
• Sample Integration Test with T3
• Vitest
• Vitest test api
• Vitest CLI
• Playwright Browsers

Deployment 🚀

Deployed to Vercel

1. Click Add New Project.
2. Import github repo to Vercel.
3. Set FRAMEWORK PRESET to Next.js.
4. Set ROOT DIRECTORY as ./.
5. Add environment variables.
6. Click Deploy.

More on deployment

• Vercel Deployment
• Netlify Deployment
• Railway Deployment with Docker

More

This is a T3 Stack project bootstrapped with create-t3-app.

• Next.js
• NextAuth.js
• Prisma
• Tailwind CSS
• tRPC
• T3 Documentation
• create-t3-app GitHub repository