Cheat sheet · Build products
Full stack development cheat sheet (MERN)
Opens with creditsA quick-revision companion to the Full stack roadmap in its MERN edition: web foundations, React with Vite, Node.js and Express, MongoDB with Mongoose, APIs and auth, deployment and running a product. Skim a chapter before a project or a technical conversation.
Chapters
7 chapters · 58 concepts
1Web foundations: HTTP, HTML, CSS and JavaScriptThe browser side, compressed: how a request reaches a server, semantic HTML, responsive layout and the asynchronous JavaScript every full stack app depends on.8 concepts
- 1How a request reaches a serverThe browser resolves the domain with DNS, opens a connection, negotiates TLS for HTTPS and sends an HTTP request.
- 2HTTP methods and status codesMethods say what to do (
GETread,POSTcreate,PUTreplace,PATCHupdate,DELETEremove). - 3Semantic HTML and formsUse elements for their meaning (
main,nav,button,a, headings in order) and give every input alabel, the righttype,nameandautocomplete. - 4Flexbox, Grid and responsive layoutFlexbox lays items out in one direction, Grid in rows and columns.
- 5JavaScript essentialsUse
constby default andletwhen reassigning, compare with===, and use??for defaults when0or""are valid. - 6Promises and async/awaitA promise represents a value that arrives later.
- 7Event loopJavaScript runs one piece of code at a time.
- 8DOM, events and fetchThe DOM is the page as a tree of objects that scripts can read and change.
8 in this chapterOpen this chapter2Git, npm and ReactVersion control and packages, then React: components, state, effects, forms and routing for the interface your backend serves.9 concepts
- 1Git branches and pull requestsA branch is a cheap pointer to a line of commits.
- 2npm, package.json and lockfiles
package.jsonlists dependencies and scripts;package-lock.jsonpins exact versions of the whole tree. - 3Components and propsA React component is a function that returns JSX.
- 4State and useState
useStategives a component a value that survives re-renders and a setter that triggers one. - 5Effects and useEffect
useEffectruns after render to synchronise with something outside React, such as a subscription, a timer or a browser API, and returns a cleanup function. - 6Forms and validationInputs are controlled by state or read from
FormDataon submit. - 7RoutingMapping URLs to screens.
- 8Fetching API data in ReactA Vite React app loads data from your API in the browser.
- 9Vite dev server and API proxyVite serves the React app in development with instant reloads and builds static files for production.
9 in this chapterOpen this chapter- Node.js and ExpressJavaScript on the server: modules, the event loop and environment variables, then Express 5 routing, middleware, validation and consistent error handling.7 conceptsOpens with credits
- MongoDB and data modellingStoring data in MongoDB without making a mess: documents, embedding versus referencing, queries and indexes, aggregation, Mongoose schemas and transactions.8 conceptsOpens with credits
- APIs, authentication and cachingDesigning APIs clients can rely on, securing them with sessions or tokens and permission checks, and adding caching and rate limits where they help.10 conceptsOpens with credits
- Deployment, CI/CD, Linux and AWSRunning the app somewhere real and changing it safely: the command line and SSH, Docker, a reverse proxy with HTTPS, core AWS services and a GitHub Actions pipeline.8 conceptsOpens with credits
- Ship a complete productBuilding one real product the way a small team would: scoped, tested on the paths that matter, migrated safely, observed and ready for more users.8 conceptsOpens with credits
- 8Glossary, A to ZEvery concept in the sheet and the smaller terms it uses, in one list.178 terms
About this sheet
Build and ship whole web apps.
Related on Sefism
Picked from the other libraries by shared topics.
Roadmaps
See allBest 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.
Project structures
See all- MERN (MongoDB, Express, React, Node) project structureOne repository with a React app built by Vite in client/, an Express API with Mongoose in server/, and a tiny shared/ package that both import for request shapes and types. npm workspaces give you one install and one command to run both, and one example feature (clinic appointments) runs through every folder so you can see how a request travels from a form to MongoDB and back, and what tests, security and operations a real team adds around it.
- Next.js full stack (database and auth) project structureOne Next.js app that is both your frontend and your backend: pages render on the server, forms call Server Actions, and Route Handlers serve the few real HTTP endpoints (auth, webhooks, jobs, health). PostgreSQL through Prisma ORM, sign-in through Better Auth, background jobs with Inngest, and every database read goes through a small Data Access Layer that checks who is asking. The example features are invoices and clients for freelancers.
- .NET with Angular project structureThe common enterprise pairing: an ASP.NET Core Web API and an Angular app as two projects in one solution, exactly as the Visual Studio template lays them out. In development the Angular dev server proxies API calls to .NET; in production the API serves the built Angular files from one origin, so cookie sign-in with ASP.NET Core Identity just works. The Angular API client is generated from the API's OpenAPI document, so both sides always agree. The example features are orders and products.
Career questions
See all- What 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.
- How do I choose between frontend, backend, mobile, cloud, cybersecurity, data and AI without trying them all for years?Do not try to pick the best field; pick the one whose daily problems you can tolerate on a bad day. Run a short, cheap experiment in two or three candidates, compare what you enjoyed doing rather than what sounded exciting, check the local job market, and commit for six to nine months.
- Should I become an AI engineer or stay a full stack developer?For most full stack developers this is not an either/or. AI engineering is largely full stack engineering plus models, evaluation and data. Keep your full stack strength, add AI features to real work, and move titles only when you have shipped AI work you can point to.
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