Full-Stack Developer

Full-stack means being useful on both sides of an HTTP request rather than expert on both. This route uses JavaScript and TypeScript so the same language carries you from the page to the server, then covers the browser, the API, the database and deployment in that order. It is longer than the single-side roadmaps, and it is deliberately honest that depth in one half still has to come from building things.

6 stages · 34 steps

1. 1

   One language on both sides

   Write JavaScript confidently and add TypeScript to it, so the same skills serve the browser and the server.

   • Language guideJavaScriptChosen because it runs in the browser and, with Node, on the server too.
   • LessonJavaScript FunctionsA route handler and a component are both functions before they are anything else.
   • LessonJavaScript ObjectsThe same shape you will send as JSON and read back from a database driver.
   • ExercisesJavaScript exercisesChecked exercises, so the next stage does not begin on a language you are still guessing at.
   • Language guideTypeScriptAdd types once the language itself is no longer new.
   • LessonInterfaces and Object TypesOne type for a payload, shared by the code that sends it and the code that receives it.
   • ExercisesTypeScript exercisesPractise until a checker complaint reads as information rather than an obstacle.
2. 2

   The browser half

   Build a page that works, then understand what a framework adds and what it does not protect you from.

   • Language guideHTML & CSSSkip this only if you can already lay out a page without copying one.
   • PlaygroundHTML & CSS playgroundChange one rule and watch the layout move; quicker than reading about the box model.
   • Concept guideReact and Next.jsComponents, state and where rendering happens — the vocabulary job adverts use.
   • Concept guideCommon Web VulnerabilitiesRead while the frontend is fresh: several of these are introduced in the template layer.
3. 3

   The server half

   Serve an API you designed, with sign-in that you can explain line by line.

   • Concept guideHTTP and HTTPSThe contract between the two halves you are now writing.
   • Concept guideNode.js and ExpressThe server runtime that lets you keep writing the language from stage one.
   • Concept guideREST APIsNow from the other side: the conventions your own endpoints should follow so the browser half can predict them.
   • Concept guideAuthentication vs AuthorizationBefore you write a login form, decide what it is proving.
   • Concept guideJWT and OAuthThen the mechanics, including where a token may and may not be stored.
4. 4

   Data

   Model the data your feature needs, query it directly, and know what your ORM is doing on your behalf.

   • Language guideSQLLearn the query language before the library that writes queries for you.
   • PlaygroundSQL playgroundRun the queries an ORM would generate for you, and see exactly what comes back.
   • Concept guidePostgreSQLA sensible default database, and a specific one to reason about.
   • Concept guideSQL vs NoSQLWhy some of your feature's data may not belong in the same store as the rest.
   • Concept guideORM ConceptsNow the abstraction is safe to use, because you can read what it generated.
   • Concept guideCaching StrategiesFor the point where the page is slow and the query is the reason.
5. 5

   Shipping and keeping it alive

   Get both halves onto a machine that is not yours, automatically, without committing a secret.

   • Concept guideGit and GitHubBranches and pull requests: where both halves of your work meet a reviewer.
   • ReferenceGit commands referenceWith the commands that rewrite history clearly marked.
   • Concept guideDocker and ContainersOne image that behaves the same on your laptop and on the server.
   • Concept guideCI/CD PipelinesSo tests and deploys happen on a push instead of from memory.
   • Concept guideCloud Computing FundamentalsWhat you are actually renting when you deploy, and what each part of it is billed for.
   • Concept guideSecrets and Credential ManagementThe stage where an API key is most likely to end up in a public repository.
6. 6

   Interviews across the stack

   Handle a frontend round, a backend round and a design discussion without sounding like you only did one of them.

   • Interview prepFrontend interview questionsExpect the browser half to be tested in detail even when the advert says full-stack.
   • Interview prepBackend & API interview questionsAnd the other half, asked in its own vocabulary in a separate round.
   • Interview prepDatabase interview questionsSchema and indexing questions, which full-stack candidates are expected to answer too.
   • Interview prepSystem Design interview questionsFull-stack candidates get these earlier, because they are expected to see the whole request.
   • Practice problemMerge Overlapping BookingsSorting plus a careful sweep: the kind of problem a product codebase actually contains.
   • Interview prepBehavioral interview questionsHave a couple of real stories ready about owning a feature end to end.

All roadmaps · Projects · Interview prep