Mood-nextjs-ai Tailwind Templates

Mood Nextjs Ai

Fullstack + AI: Open AI API, langchain.js, zod, Next.js, Clerk.js Auth, Node runtime, Tailwind CSS, Prisma ORM, Planetscale DB

mood/\doom

Inspired and built forward from Scott Moss' course 'Next.js + AI' on Front End Masters.

This project leverages multiple cloud-based technologies in the stack, notably Clerk for auth and Planetscale for the database.

This repo was initialized (June 2023) and built by Joe Allen over two-days in-person at Front End Masters' downtown Minneapolis studio, with continued development and tinkering since.

Stack

Server and Client React/Next.js components, Node.js runtime, Prisma/Planetscale Data layer, Clerk auth, Prompt engineering with langchain.js and zod, OpenAI API. Additional libraries include: react-autosave, recharts.js, vite, vitest, jest

This is a Next.js project bootstrapped with create-next-app. This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Various CLI commands of note

Pscale

  • brew install planetscale/tap/pscale
  • pscale auth login
  • pscale branch create mood dev ( targets db name 'mood' and branchname 'dev')
  • pscale connect mood dev --port 3309 (connects to db branch port (3309 default MySql))

Prisma

  • npm install @prisma/client
  • npm install prisma --save-dev
  • npx prisma init
  • npx prisma db push (loads env variable from .env, loads schema from schema.prisma, syncs, generates sdk automatically that matches )
  • npx prisma format (cleans it up)
  • npx prisma studio (Web-based GUI database app on localhost 5555)

Testing

npm install @testing-library/jest-dom @testing-library/react vitest @vitejs/plugin-react-swc jsdom

Deployment to Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Top categories

Loading Svelte Themes