Project structure · Full stack
T3 app (Next.js, tRPC, Prisma) project structure
Opens with creditsA typesafe full stack app made with create-t3-app: Next.js App Router for pages, tRPC for an API whose types flow straight into your components, Prisma for PostgreSQL, NextAuth.js for sign in and Tailwind CSS for styling. The example app splits shared expenses between flatmates. For students who know React and some TypeScript and want one codebase where a typo in a field name is a compile error, not a production bug.
Curated by Tauseef FayyazIntermediate136 files and folderscreate-t3-app 7.40 (scaffolds Next.js 15 and Prisma 6), upgraded to Next.js 16.4, React 19.3Checked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you51 files and folders
- 2GrowingWhat a real app with features and tests adds+48 files and folders
- ProductionWhat running it for real users adds+21 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+16 files and foldersOpens with credits
How it is organised
- One language, one repo, types end to end. A procedure's Zod input and its return value become the types your components see, with no code generation step and no hand written API client.
- src/app is routing only. Pages are Server Components that prefetch through `~/trpc/server`; interactive pieces are Client Components that use hooks from `~/trpc/react`.
- All reads and writes go through tRPC procedures in src/server/api/routers. Route handlers are only for real HTTP needs: auth, health checks, webhooks.
- Access control lives in procedures, not pages. `protectedProcedure` checks the session, and feature procedures such as `groupMemberProcedure` check ownership before any query runs. Layouts and proxy.ts only improve the experience.
- Every environment variable is declared and validated in src/env.js. If it is not there, the app does not read it.
- Routers stay thin; rules with edge cases (balances, invites) live in src/server/services as plain functions that are easy to test.
- Schema changes always ship as a reviewed Prisma migration. `db:push` is for the first prototype hour only.
- Tests grow in layers: pure services and routers through `createCaller` at Growing, Playwright journeys at Production, accessibility, visual and load tests at Expert.
At the top of the project
Open one in the explorer for the full story
- split-it/
- .git/Git history. create-t3-app runs `git init` and makes the first commit unless you pass --noGit.
- .next/Next.js build output and dev cache, written by `next dev` and `next build`.
- .envLocal secrets: DATABASE_URL, AUTH_SECRET (generated for you), AUTH_DISCORD_ID and SECRET.
- .env.exampleThe same variable names with empty or fake values, committed as documentation.
- .gitignoreIgnores node_modules, .next, .env files, coverage, the SQLite file and editor folders.
- .nvmrcPins Node.js 24 for nvm, fnm, CI and Docker.
- README.mdThe T3 starter readme with links to each tool's docs.
- eslint.config.jsESLint flat config: Next.js core web vitals plus type-aware typescript-eslint rules.
- generated/The generated Prisma client, written by `prisma generate` (runs on every npm install).
- next-env.d.tsTypeScript declarations Next.js writes for its types. Do not edit.
- next.config.jsNext.js config. Its first line imports src/env.js so bad env vars fail the build.
- node_modules/Installed packages.
- package-lock.jsonExact installed versions. Commit it.
- package.jsonDependencies and scripts: dev, build, check, typecheck, db:generate, db:migrate, db:push, db:studio.
- postcss.config.jsLoads the `@tailwindcss/postcss` plugin.
- prettier.config.jsPrettier with the Tailwind plugin that sorts class names.
- prisma.config.tsPrisma 7 config: schema path, migrations path, seed command and the datasource URL.
- prisma/The Prisma schema, and later the migrations and the seed script.3 inside
- public/Static files served at the site root.1 inside
- src/All application code. The `~/*` alias in tsconfig.json points here.8 inside
- start-database.shStarts a PostgreSQL container named after your database, using DATABASE_URL from .env.
- tsconfig.jsonStrict TypeScript with `noUncheckedIndexedAccess`, `checkJs` and the `~/*` alias.
- vitest.config.tsVitest settings: path aliases, node environment for routers, jsdom for components.
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with T3 app (Next.js, tRPC, Prisma).
- Roadmap· Next.js and PostgreSQLFull stack development roadmapBuild and ship whole web apps
- Roadmap· ReactFrontend development roadmapHTML, CSS, JavaScript and a framework
- Roadmap· PostgreSQLSQL and databases roadmapQueries, design, indexes, transactions
- Roadmap· PlaywrightQA and test automation roadmapManual testing to automated suites
- Cheat sheetFull stack development cheat sheetBuild and ship whole web apps.
- Cheat sheetFrontend development cheat sheetHTML, CSS, JavaScript and a framework.
- Cheat sheetSQL and databases cheat sheetQueries, design, indexes, transactions.
- Cheat sheetQA and test automation cheat sheetManual testing to automated suites.
- FYP idea· IntermediateTeam Chat App with Threads and Read Receipts on MongoDBBuild a Slack-style team chat for university societies and student project groups, with channels, threaded replies, read receipts, unread counts and live updates. The point is the MongoDB modelling: where to embed and where to reference messages and threads, change streams for real-time delivery, and pagination that stays fast as channels grow.
See 11 moreShow fewer
- FYP idea· AdvancedVerifiable Committee (ROSCA) Ledger with Provably Fair Payout DrawsBuild a ledger app for informal committees (ROSCAs, also called BCs) where every payment entry is signed and hash-chained, so the organiser cannot quietly edit history, and the monthly payout order is decided by a commit-reveal draw that any member can verify. The app never holds money; it records it. The project combines applied cryptography, offline-first sync and a real social problem.
- FYP idea· IntermediatePharmacy Stock Ledger with Batch Expiry and FEFO DispensingA web-based stock ledger and billing counter for independent pharmacies that tracks every medicine by batch and expiry, sells loose tablets from strips correctly, and dispenses first-expiry-first-out. A final year project in healthcare retail software with real inventory correctness problems to solve.
- QuestionShould I learn TypeScript or Python first in 2026?Learn Python first if you are new to programming or drawn to data and AI. Learn TypeScript first only if you already know some JavaScript or are certain about web development, and even then learn plain JavaScript for a few weeks before the types. The second language is much easier than the first.
- QuestionShould I use PostgreSQL or MongoDB for my project?For most student and startup projects, PostgreSQL is the safer default: relational data, joins, constraints and transactions fit most apps, and it handles JSON and vector search too. MongoDB is a good fit when your data is naturally document-shaped and varies a lot, or your team already knows it well. Model your data first, then choose.
- QuestionHow do I build a developer portfolio as a beginner with nothing to show?Start with two or three small but complete projects that solve a real problem, each with a clear README, screenshots and a live link or easy run steps. Put them on a simple one-page site or a tidy GitHub profile. Depth and finish matter far more than the number of projects or a fancy design.
- QuestionWhat projects should I build in my first year of university?Build small, finished projects that solve problems you or people around you actually have: a script that automates a chore, a command line tool, a simple website for a society or family business. First year is about finishing things and using Git, not about impressive ideas.
- Resource· GuideNext.js DocumentationThe official Next.js documentation covers the React framework's App Router and the older Pages Router: routing and layouts, server and client components, data fetching, caching (including Cache Components), server actions, route handlers, Proxy (formerly middleware), streaming, Turbopack and deployment. Next.js Learn teaches one app step by step; these docs are the reference to keep open once you build your own. It suits React developers building production apps with Next.js.
- Resource· GuidePrisma DocumentationThe official documentation for Prisma ORM, the TypeScript ORM for Node.js, and for Prisma's hosted services such as Prisma Postgres. It covers schema modelling, migrations, type-safe queries, relations, Prisma Studio and deployment, with getting started guides for frameworks such as Next.js, NestJS, Nuxt and others. It suits TypeScript developers who want database access with strong typing, ideally after they understand SQL and relational modelling.
- Resource· GuideZod DocumentationThe official docs for Zod 4, the TypeScript-first schema library: declare a schema once, get a runtime validator and a static type, and convert it to JSON Schema. The OpenAI Agents SDK, the Claude Agent SDK and the MCP TypeScript SDK all accept Zod schemas for tools.
- Resource· GuideReact DocumentationThe official React documentation at react.dev is a full course as well as a reference. Its Learn track moves from a quick start through describing the UI, adding interactivity, managing state and escape hatches, with interactive sandboxes and challenges on nearly every page. It suits anyone learning React and any React developer whose habits come from older class-based tutorials, and it should be read before paying for a React course.
- Resource· GuidePlaywright DocumentationThe official documentation for Playwright, Microsoft's open-source framework for end-to-end testing in real Chromium, Firefox and WebKit browsers, with mobile emulation. It walks you from installation to your first test, then covers locators, assertions, fixtures, authentication, API testing, parallel runs and CI. Tools such as the code generator, UI mode and trace viewer make first tests easy. It suits developers and QA engineers adding reliable browser tests to a web app.
Checked against 17 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- create-t3-app: Introduction and installation
- create-t3-app: Folder structure (App Router)
- create-t3-app: Environment variables
- create-t3-app: tRPC usage
- create-t3-app: Deployment with Docker
- create-t3-app source and templates
- tRPC: Server side calls (createCaller)
- tRPC: TanStack React Query integration
- Next.js: Upgrading to version 16
- Next.js: proxy.ts file convention
- Next.js: output standalone
- Prisma: Upgrade to Prisma ORM 7
- Prisma: Development and production migrations
- Auth.js: Installation (NextAuth.js v5)
- Auth.js: Prisma adapter
- T3 Env: Next.js
- Sentry: Next.js SDK
Best practices and checklists for this stack
Picked from the other libraries by shared topics.
Best practices
See all- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
- Next.js App Router Best PracticesNext.js 16 App Router best practices: Server Components, Cache Components and use cache, secure Server Actions, proxy.ts, metadata and images.
- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
- Web Application Security ChecklistA practical web application security checklist built on the OWASP Top 10:2025 and ASVS 5.0, with a severity and a way to verify every check.
Work with me
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com