This repository is a work in progress! This is a Next.js project bootstrapped with create-next-app.

Next.js is a meta-framework that sits on top of React. This adds many great features like React Server Components, server-side rendering, middleware, file-based routing. Next.js is created by Vercel. Their free plan is very generous and offers hosting, postgres database, blob storage, and more.

Environment variables are needed for:

• DATABASE_URL for your database url
• GOOGLE_CLIENT_ID for Google OAuth
• GOOGLE_CLIENT_SECRET for Google OAuth
• BETTER_AUTH_SECRET for Better Auth config
• BETTER_AUTH_URL for your project's root URL

Install all packages, generate the Prisma client, then start the development server:

# open the reepository in VS Code
# optional: install recommended  VS Code extensions for a better developer experience

code .

# install packages...if asked about React as peer dependencies, choose the --force option

npm install

# generate Prisma client for the database by building the project

npm run build

# start the development server

npm run dev

Open http://localhost:3000 with your browser to see the Next development server.

The main entrypoint file is app/page.tsx. The page auto-updates as you edit the file.

You can use Prisma Studio to interact with your database locally. Run npx prisma studio to start the Studio server

We use next/font to automatically optimize and load Google Fonts. You can import fonts from the Google CDN or use local files.

This project uses Shadcn with Tailwind v4 as a UI library and Storybook to develop components in isolation from the main app.

You can install new components or run the Storybook dev server:

# Install new shadcn components, use the shadcn utility. If asked about React dependencies, choose --force

npx shadcn@latest add _component name_

# To run storybook, use this script,  which will open your browser at localhost:6006

npm run storybook

Example filename: use-auth-state.ts Example filename: button.tsx

Example filename: sign-in.tsx Example function name: function SignIn or const SignIn

The project is configured with the file tsconfig.json with the setting allowJs turned on. This means that new files can be JavaScript, but TypeScript files offer type safety & checking, plus parameter auto-complete in the IDE.

CRUD operations using Prisma offer type safety and autocomplete because types are automatically generated from the Prisma schema file prisma/schema.prisma in the root directory.

To learn more about Next.js, check out the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.