Project notes

Tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

in tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
}

in globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Postgres DB

• railway.app > provision PostgreSQL

Prisma

npm install typescript ts-node @types/node --save-dev
npx prisma init # create prisma folder and .env
npm install @prisma/client

once models in schema.prisma is created, run:

npx prisma migrate dev # run whenever Models are changed

npx prisma generate  # check docs what this does

Next auth

npm install next-auth
npm install @next-auth/prisma-adapter

• create auth/[...nextauth.js] in app/api folder
• create .env.local file in project root

Google Cloud (OAuth)

• create new project
• APIs & Services > Credentials > Create Credentials > OAuth client id

React Query

npm i @tanstack/react-query axios

React Toast

npm i react-hot-toast

Deployment

• change build script in package.json to npx prisma generate && npx prisma migrate deploy && next build
• add env variables in vercel deploy settings from .env & .env.local files
• add deployed url to Google dev console (APIs & Services > Credentials > Create Credentials > projectName > Authorized JavaScript origins & Authorized redirect URIs )