📄️ Project structure
This is a general overview of the project structure. Further down, you will find a description of each entry.
📄️ Next.js
Next.js is a backend framework for your React applications.
📄️ Prisma
Prisma is an ORM for TypeScript, that allows you to define your database schema and models in a schema.prisma file, and then generate a type-safe client that can be used to interact with your database from your backend.
📄️ tRPC
tRPC allows us to write end-to-end typesafe APIs without any code generation or runtime bloat. It uses TypeScript's great inference to infer your API router's type definitions and lets you call your API procedures from your frontend with full typesafety and autocompletion. When using tRPC, your frontend and backend feel closer together than ever before, allowing for an outstanding developer experience.
📄️ TypeScript
Whether you're a new or seasoned developer, we think that TypeScript is a must have. It can look intimidating at first, but much like a lot of tools, is something that many never look back from after starting to use it.
📄️ Neon
📄️ Client theming
This application uses the OGP Design System, and as such the relevant documentation can be found in their README.
📄️ Environment variables
This application uses zod for validating environment variables at both runtime and buildtime by providing additional login in src/env.mjs and src/browserEnv.mjs.
📄️ Logging and Monitoring
Vercel provides runtime logs, which include all logs generated by the Serverless (basically the pages/api directory) and Edge Function (currently not used by this starter kit) invocations of our application. However, Vercel's logging limitations may be insufficient for proper monitoring and alerts.
📄️ Testing
This application has the following test types set up:
📄️ Storybook
Storybook is a tool for for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
📄️ CI/CD
The application uses GitHub Actions for CI/CD. The GitHub Actions workflow can be found in the .github/workflows/*.yml directory.