my-app/
Pick any file or folder on the left to see what it is, why it exists, when you add it and the mistakes people make with it. Switch the stage to watch the project grow.
Next.js full stack (database and auth) project structure
# Create the app with the recommended defaults, inside src/
npx create-next-app@latest my-app --yes --src-dir# Add the database client, auth and validation
npm install @prisma/client@7 @prisma/adapter-pg better-auth zod server-only# Add the Prisma CLI (pinned to 7) and helpers
npm install -D prisma@7 @next/env tsx# Set up Prisma for PostgreSQL
npx prisma init --datasource-provider postgresql --output ../src/generated/prisma# Add the auth tables to schema.prisma
npx auth@latest generate# Create and apply the first migration
npx prisma migrate dev --name init# Add the React app layer (same as the frontend tree)
npm install @tanstack/react-query next-themes sonner react-hook-form @hookform/resolvers# Add tests: unit, component and real-database integration
npm install -D vitest @vitejs/plugin-react jsdom vite-tsconfig-paths @testing-library/react @testing-library/dom @testing-library/user-event @testing-library/jest-dom msw @testcontainers/postgresql# Add end-to-end tests (Playwright)
npm init playwright@latest