With app dir (#1)

* migrate layout to app

* change  navlink

* up deps

* add authentication & authorization

* up readme

* add planetscale typegen

* add KyselyPlanetscaleAdapter

* fix read session

* move to query/utils

* remove comments

* refactor auth adapter

.env.example

@@ -5,8 +5,16 @@
 # If you are cloning this repo, create a copy of this file named `.env` and populate it with your secrets.
 
 # When adding additional env variables, the schema in /env/schema.mjs should be updated accordingly
-# Prisma
-DATABASE_URL=file:./db.sqlite
+# Planetscale Node js / generate types from planetscale db
+DATABASE_URL=
+
+# Planetscale PRISMA
+DATABASE_URL_PRISMA=
+
+# Planetscale edge (@planetscale/database)
+DATABASE_HOST=
+DATABASE_USERNAME=
+DATABASE_PASSWORD=
 
 # Next Auth
 # You can generate the secret via 'openssl rand -base64 32' on Linux
@@ -16,17 +24,6 @@ NEXTAUTH_SECRET= "m3wNqfuuKXFCOM+G8DprvaXB90S1X9SsML7ZC4JK7ec="
 NEXTAUTH_URL=http://localhost:3000
 
 # Next Auth Discord Provider
-# DISCORD_CLIENT_ID=
-# DISCORD_CLIENT_SECRET=
-
-
-# DON'T USE THIS
-# Planetscale (Later)
-# DATABASE_URL= "mysql://[email protected]:3309/smpn1waru"
-
-# Next Auth
-# You can generate the secret via 'openssl rand -base64 32' on Linux
-# More info: https://next-auth.js.org/configuration/options#secret
-# NEXTAUTH_SECRET= ""
-# NEXTAUTH_URL=http://localhost:3000
+DISCORD_CLIENT_ID=
+DISCORD_CLIENT_SECRET=
 

.eslintignore

@@ -0,0 +1,8 @@
+# Dependency directories
+/node_modules
+
+# NextJS Files
+/build
+/public/*
+/.next
+# next-env.d.ts

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

README.md

@@ -1,9 +1,30 @@
 ## Learn More
 
+T3 Stack <strong>tanpa</strong> TRPC dan Prisma Client.
+
 To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
 
 - [Documentation](https://create.t3.gg/)
 - [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
+- [Overview](https://www.youtube.com/watch?v=VJH8dsPtbeU) - Tapi tanpa app dir
+- [UUID vs CUID vs NanoId](https://dev.to/harshhhdev/uuidguid-cuid-nanoid-whats-the-difference-5dj1)
+
+## Flow
+
+- Database
+
+  1\. Create Model and schema with Prisma\
+  2\. Push (don't use migrate!, yet) to planetscale\
+  3\. Import type to typescript with `db:type`
+
+# Important Resources
+
+- Prisma:
+  - [Schema Reference](https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference). Pelajari mana yang implemented (keyword: `implemented`) by prisma dan mana yang langsung di db. Jadi kalau diimplementasi oleh prisma maka kita buat sendiri juga.
+  - [Prisma Mapping to MySql](https://www.prisma.io/docs/concepts/database-connectors/mysql#type-mapping-between-mysql-to-prisma-schema)
+  - [Data Model](https://www.prisma.io/docs/concepts/components/prisma-schema/data-model#defining-models)
 
 # TODO
-- Auth pake NextAuth + mock database pakai prisma sqlite untuk user saja. Nanti kalau sudah baru migrate ke planetscale
+
+- Workaround TRPC. atau mungkin di remove aja(?)
+- Ganti OAuth discord ke Google

next.config.mjs

@@ -8,31 +8,23 @@
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
+  experimental: {
+    appDir: true,
+  },
   /* If trying out the experimental appDir, comment the i18n config out
    * @see https://github.com/vercel/next.js/issues/41980 */
-  i18n: {
-    locales: ["en"],
-    defaultLocale: "en",
-  },
-
-  webpack: (config) => {
-    config.module.rules.push(
-      {
-        test: /\.svg$/,
-        loader: "svg-sprite-loader",
-      },
-      //     {
-      // test: /\.svg$/,
-      // use: [
-      //   { loader: 'svg-sprite-loader', options: { ... } },
-      //   'svg-transform-loader',
-      //   'svgo-loader'
-      // ]
-      //     }
-    )
+  // i18n: {
+  //   locales: ["en"],
+  //   defaultLocale: "en",
+  // },
+  // webpack: (config) => {
+  //   config.module.rules.push({
+  //     test: /\.svg$/,
+  //     loader: "svg-sprite-loader",
+  //   })
 
-    return config
-  },
+  //   return config
+  // },
   // modularizeImports: {
   //   "@components": {
   //     transform: "@components/{{member}}",

package.json

@@ -7,19 +7,25 @@
     "dev": "next dev",
     "postinstall": "prisma generate",
     "lint": "next lint",
-    "start": "next start"
+    "start": "next start",
+    "db:type": "kysely-codegen --out-file ./src/server/db/types.ts",
+    "db:push": "prisma db push",
+    "db:migrate": "prisma migrate dev"
   },
   "dependencies": {
-    "@next-auth/prisma-adapter": "^1.0.5",
-    "@prisma/client": "^4.9.0",
-    "@tanstack/react-query": "^4.23.0",
-    "@trpc/client": "^10.9.0",
-    "@trpc/next": "^10.9.0",
-    "@trpc/react-query": "^10.9.0",
-    "@trpc/server": "^10.9.0",
+    "@paralleldrive/cuid2": "^2.0.1",
+    "@planetscale/database": "^1.5.0",
+    "@tanstack/react-query": "^4.24.4",
+    "@trpc/client": "^10.9.1",
+    "@trpc/next": "^10.9.1",
+    "@trpc/react-query": "^10.9.1",
+    "@trpc/server": "^10.9.1",
+    "add": "^2.0.6",
+    "kysely": "^0.23.4",
+    "kysely-planetscale": "^1.2.1",
     "motion": "^10.15.5",
     "next": "13.1.6",
-    "next-auth": "^4.18.10",
+    "next-auth": "^4.19.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "superjson": "1.12.2",
@@ -31,18 +37,20 @@
     "@types/prettier": "^2.7.2",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
     "autoprefixer": "^10.4.13",
-    "eslint": "^8.32.0",
+    "eslint": "^8.33.0",
     "eslint-config-next": "13.1.6",
+    "kysely-codegen": "github:harisraharjo/kysely-codegen#planetscale",
+    "node-fetch": "^3.3.0",
     "postcss": "^8.4.21",
     "prettier": "^2.8.3",
     "prettier-plugin-tailwindcss": "^0.2.2",
     "prisma": "^4.9.0",
     "svg-sprite-loader": "^6.0.11",
     "tailwindcss": "^3.2.4",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.5"
   },
   "ct3aMetadata": {
     "initVersion": "7.3.2"