Frontend developers on Discord

• Join the serverFree, and it takes a minute.
• Pick FrontendThe Frontend room opens, with a pinned starter pack and the roadmap.
• Ask and shareSolved questions get tagged, so the answers stay easy to find.

Tools for Frontend work

Start with these 16

• awesome: the list that defines the format

  awesome is the meta-list behind the whole awesome-list convention, and it is the place to start when you want a curated index of anything from languages to tooling. Read create-list.md first: it explains what separates a useful list from link spam, which is handy if you ever curate one yourself. Then browse readme.md by topic. License: CC0-1.0, so you can reuse the material freely.

  github.comAwesome ListBeginner

• create-t3-app: opinionated TypeScript web scaffolding

  A CLI that scaffolds a typed Next.js project, letting you opt into pieces like tRPC, Prisma or Drizzle and Tailwind. Reading cli/ shows how a good scaffolder composes templates and installers, which is a neat lesson on its own; www/ holds the documentation site. Use it when you want a well-trodden full-stack TypeScript layout. License: MIT.

  github.comStarterIntermediate

• epic-stack: a full web app foundation with decisions explained

  A production-minded starter for a React Router app with Prisma, Playwright tests and Fly.io deployment config. What sets it apart is documentation of why choices were made: read docs/ and the decisions folder inside it before the code. Then explore app/, prisma/ and tests/ to see how it all fits. License: MIT.

  github.comStarterAdvanced

• excalidraw: a whiteboard app and an embeddable library

  A real, widely used React app that is also published as a component. The editor lives in packages/excalidraw, the hosted app shell in excalidraw-app/, and dev-docs/ covers the internals and embedding. Study it for canvas rendering, state management and how a library is carved out of an app. License: MIT.

  github.comFull AppIntermediate

• the-super-tiny-compiler: see a compiler in one file

  A heavily commented JavaScript file that compiles a toy Lisp-like syntax into C-like calls, walking through tokenising, parsing, transforming and code generation. Read the-super-tiny-compiler.js top to bottom and run test.js. Older and small, but still a clear introduction to compiler stages. License: CC BY 4.0.

  github.comLearningIntermediate

• cal.diy: a scheduling app as a TypeScript monorepo

  A large Next.js scheduling application organised into apps/ (including web, api and docs) and shared packages/ such as prisma, trpc and emails. Useful for seeing how a real product splits concerns across a monorepo. Check the README for how this repository relates to the hosted product. License: MIT.

  github.comFull AppIntermediate

• Next-js-Boilerplate: a tidy starter with tests

  A Next.js and TypeScript starter that bundles Tailwind, a database layer with Drizzle, linting, Vitest and Playwright. See src/ for the app, migrations/ for schema history and tests/ for how the checks are organised. Handy when you want a starting point with quality gates already in place. License: MIT.

  github.comStarterBeginner

• prisma-examples: ready-to-run TypeScript data layer samples

  A collection of example projects that pair Prisma with different frameworks and databases. Browse orm/ for framework samples, databases/ for database-specific setups and deployment-platforms/ for hosting. Note the default branch is called latest. License: Apache-2.0.

  github.comTemplateBeginner

• freeCodeCamp

  A free interactive curriculum with projects and certifications, covering web development, Python, data and more.

  freecodecamp.orgFree courseBeginner

• The Odin Project

  A free, project-based full-stack web curriculum that teaches you to use real tools from the start.

  theodinproject.comFree courseBeginner

• Full Stack Open

  The University of Helsinki's free course on modern web development with React, Node.js and testing.

  fullstackopen.comFree courseIntermediate

• MDN: Learn web development

  Mozilla's structured path through HTML, CSS and JavaScript, from one of the web's most trusted references.

  developer.mozilla.orgGuideBeginner

• web.dev Learn

  Free courses from Chrome's developer relations team on CSS, performance, accessibility and more.

  web.devGuideIntermediate

• Eloquent JavaScript

  A well-loved book on JavaScript and programming in general, free to read online.

  eloquentjavascript.netBookBeginner

• Vite

  A fast frontend build tool and dev server with instant updates as you edit.

  vite.devTool

• Playwright

  Reliable end-to-end browser testing across Chromium, Firefox and WebKit.

  playwright.devLibrary