Project structure · Frontend
React with Vite (TypeScript) project structure
Opens with creditsFor developers building a single-page React app that talks to a separate backend: an orders dashboard with auth, routing, server data, forms and tests. Product code is grouped by feature under src/features, shared pieces live in components and lib, and src/app wires providers, routes and guards together.
Curated by Tauseef FayyazBeginner219 files and foldersReact 19.2, Vite 8, TypeScript 6Checked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you24 files and folders
- 2GrowingWhat a real app with features and tests adds+113 files and folders
- ProductionWhat running it for real users adds+37 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+45 files and foldersOpens with credits
How it is organised
- Group by feature, not by file type: src/features/orders holds its API hooks, components, pages, schemas and rules. One change to orders stays in one folder.
- Features never import from each other. Shared code moves down into components, hooks or lib; src/app is the only place that composes features, and dependency-cruiser enforces it once the team grows.
- Server state (data from your API) lives in TanStack Query, not in useState or a global store. Zustand holds only real client state such as a sidebar toggle.
- Routes load their data before render: page modules export a loader that calls ensureQueryData, and route middleware guards whole sections of the app.
- Validate at every boundary with Zod: env variables at startup, API responses when they arrive, forms before they submit.
- Import directly from files, not from big index.ts barrels, so Vite can tree-shake and tests stay fast.
- Everything in the bundle is public. A Vite app has no server, so secrets never go in VITE_ variables; the backend owns them, and the CSP limits what the page can load.
At the top of the project
Open one in the explorer for the full story
- my-app/
- .husky/Git hooks managed by husky, created by `npx husky init`.2 inside
- .storybook/Storybook config, created by `npm create storybook@latest`.2 inside
- .vscode/Shared editor settings, recommended extensions and debug configs.3 inside
- coverage/Coverage reports written by `vitest run --coverage`.
- dist/The production build: static HTML, hashed JS and CSS, written by vite build.
- node_modules/Installed packages, created by npm install.
- public/Files copied as-is to the site root: favicon, robots.txt, icons.4 inside
- src/All application code. Vite serves and bundles what main.tsx imports from here.15 inside
- storybook-static/The built Storybook, written by `npm run build-storybook`.
- .editorconfigIndent style, line endings and final newline for every editor.
- .env.exampleLists every VITE_ variable with placeholder values. Committed.
- .env.localYour local settings, such as the dev API URL. Ignored by the *.local rule.
- .gitignoreIgnores node_modules, dist, logs, editor files and anything ending in .local.
- .nvmrcPins the Node.js version for nvm, fnm and CI.
- .oxlintrc.jsonOxlint config with React hooks rules. The 2026 template uses Oxlint instead of ESLint.
- .prettierrc.jsonFormatting rules for Prettier, plus the Tailwind class-sorting plugin if you use Tailwind.
- AGENTS.mdInstructions for AI coding agents: layout, commands and rules for this repo.
- CLAUDE.mdPoints Claude Code at AGENTS.md with a single @AGENTS.md line.
- README.mdThe template README about plugins and lint setup. Rewrite it for your project.
- commitlint.config.jsExtends @commitlint/config-conventional for the commit-msg hook.
- docker-compose.ymlRuns the backend API and its database locally, so the frontend has something real to call.
- index.htmlThe single HTML page. Vite treats it as the entry and injects the built assets.
- package-lock.jsonExact versions of every package, written by npm install.
- package.jsonDependencies and scripts: dev, build (tsc -b then vite build), lint, preview, and later tests.
- tsconfig.app.jsonTypeScript settings for code in src: browser libs, JSX, bundler module resolution.
- tsconfig.jsonThe root config that only references tsconfig.app.json and tsconfig.node.json.
- tsconfig.node.jsonTypeScript settings for vite.config.ts, which runs in Node.
- vite.config.tsVite config: React and Tailwind plugins, path aliases, dev proxy, Sentry source maps and Vitest settings.
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with React with Vite (TypeScript).
- Roadmap· ReactFrontend development roadmapHTML, CSS, JavaScript and a framework
- Roadmap· MERNFull stack development roadmapBuild and ship whole web apps
- Roadmap· PlaywrightQA and test automation roadmapManual testing to automated suites
- Cheat sheetFrontend development cheat sheetHTML, CSS, JavaScript and a framework.
- Cheat sheetFull stack development cheat sheetBuild and ship whole web apps.
- Cheat sheetQA and test automation cheat sheetManual testing to automated suites.
- FYP idea· IntermediateApproval Workflow Engine with Escalations for Small OfficesAn approval workflow engine for small offices, schools and NGOs that turns purchase requests, leave, reimbursements and document sign-offs into tracked flows with deadlines, escalations and email or WhatsApp-style reminders. A no-code automation final year project with a durable workflow runtime and an audit trail.
- FYP idea· IntermediateUrdu and RTL Accessibility Linter for Nastaliq Web Pages and Government FormsBuild an automated checker that finds the accessibility and layout faults specific to Urdu web pages: missing language and direction attributes, Urdu text drawn as images, broken Nastaliq rendering, mirrored icons and forms that screen readers announce in the wrong language. General tools such as axe-core do not look for any of these. The result is a command-line tool, a browser extension and a public audit of real Pakistani websites.
- FYP idea· AdvancedSigned Web Page Archiving for Journalists and Fact-Checkers with Verifiable CapturesBuild a self-hostable tool that captures a web page or social post exactly as it appeared, packages it in an open archive format, signs it and timestamps it, so anyone can later verify who captured it and when. Posts and pages are deleted or edited within hours, and screenshots are easy to fake. This gives newsrooms and fact-checkers evidence that holds up.
See 9 moreShow fewer
- QuestionWhat should I learn to become a web developer, and in what order?Learn the web platform first (HTML, CSS, JavaScript, how HTTP works), then one frontend framework, then a backend with a database, and build a real project at each stage. If you already know WordPress, you are not starting over: your HTML, CSS and PHP experience transfers.
- QuestionI understand tutorials but cannot build anything myself. Why does coding feel so different when I am alone?Tutorials train recognition, not production. When you follow along, someone else makes every decision. Building alone requires you to break a problem down and make choices, which is a separate skill. Build it with small projects, planning on paper first, and a rule to struggle before you look anything up.
- 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.
- QuestionHow do I learn to read a large codebase when I can handle small projects but get lost in real ones?Nobody reads a large codebase from top to bottom. You follow one real path through it, such as a single request or button click, from entry point to database and back. Map what you find, ignore everything off that path for now, and repeat with a different path. Understanding builds in layers, and a first small change teaches more than a week of reading.
- 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· GuideVite GuideThe official guide to Vite, the dev server and build tool behind most new React, Vue, Svelte and other frontend projects. It explains scaffolding a project, the fast dev server and hot module replacement, static assets, environment variables and modes, plugins, the dev server proxy, production builds, deployment, server-side rendering and backend integration. It suits frontend developers who want env files, asset handling and builds to stop being a mystery when something breaks.
- Resource· GuideThe TypeScript HandbookThe TypeScript Handbook is the official, free guide to TypeScript's type system from the TypeScript team, written for working programmers and kept current with each release. It covers everyday types, narrowing, functions, object types, generics, type manipulation, classes and modules, and it is designed to be read in a few hours. It suits JavaScript developers adopting TypeScript and anyone who writes types by copying patterns without understanding them.
- Resource· GuideVitest DocumentationThe official documentation for Vitest, the test runner built on Vite. Its getting started guide has you writing and running a real test in minutes, then covers matchers, async tests, setup and teardown, mocking (functions, modules, timers, dates, requests), snapshots, coverage, the UI dashboard and browser mode for component tests. It uses a Jest-compatible API, so it suits JavaScript and TypeScript developers starting to test, and teams moving from Jest.
- 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 18 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- Vite guide: Scaffolding your first Vite project
- Vite guide: Env variables and modes
- Vite guide: Deploying a static site
- create-vite react-ts template
- React Router: Data Mode installation
- React Router: Route object, lazy and loaders
- React Router: Middleware
- TanStack Query: Query options
- Zustand: Introduction
- React Hook Form: Schema validation
- Vitest: Getting started
- Mock Service Worker: Node.js integration
- Storybook: Install in a React Vite project
- Playwright: Installation
- Playwright: Accessibility testing
- Sentry for React
- Lighthouse CI: Getting started
- Bulletproof React: Project structure (community guide)
Best practices and checklists for this stack
Picked from the other libraries by shared topics.
Best practices
See all- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
- Modern CSS Best PracticesModern CSS best practices: cascade layers, low specificity, custom properties, Grid and Flexbox layout, responsive design, container queries, :has() and nesting, plus Tailwind CSS v4 tips.
- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
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.
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