Full stack development cheat sheet (Django and React)

1. 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

   1. 1How a request reaches a serverThe browser resolves the domain with DNS, opens a connection, negotiates TLS for HTTPS and sends an HTTP request.
   2. 2HTTP methods and status codesMethods say what to do (GET read, POST create, PUT replace, PATCH update, DELETE remove).
   3. 3Semantic HTML and formsUse elements for their meaning (main, nav, button, a, headings in order) and give every input a label, the right type, name and autocomplete.
   4. 4Flexbox, Grid and responsive layoutFlexbox lays items out in one direction, Grid in rows and columns.
   5. 5JavaScript essentialsUse const by default and let when reassigning, compare with ===, and use ?? for defaults when 0 or "" are valid.
   6. 6Promises and async/awaitA promise represents a value that arrives later.
   7. 7Event loopJavaScript runs one piece of code at a time.
   8. 8DOM, events and fetchThe DOM is the page as a tree of objects that scripts can read and change.

   8 in this chapterOpen this chapter
2. 2Git, npm and ReactVersion control and packages, then React: components, state, effects, forms and routing for the interface your backend serves.9 concepts

   1. 1Git branches and pull requestsA branch is a cheap pointer to a line of commits.
   2. 2npm, package.json and lockfilespackage.json lists dependencies and scripts; package-lock.json pins exact versions of the whole tree.
   3. 3Components and propsA React component is a function that returns JSX.
   4. 4State and useStateuseState gives a component a value that survives re-renders and a setter that triggers one.
   5. 5Effects and useEffectuseEffect runs after render to synchronise with something outside React, such as a subscription, a timer or a browser API, and returns a cleanup function.
   6. 6Forms and validationInputs are controlled by state or read from FormData on submit.
   7. 7RoutingMapping URLs to screens.
   8. 8Fetching API data in ReactA Vite React app loads data from your API in the browser.
   9. 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
3. Python and DjangoPython on the server: virtual environments, Django projects, URLs, views and the admin, then Django REST Framework for the JSON API your React app calls.7 conceptsOpens with credits
4. PostgreSQL and data modellingStoring data properly in PostgreSQL: tables and relationships, normalisation, joins, indexes and transactions, then the ORM that maps them into your code.9 conceptsOpens with credits
5. 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
6. 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
7. 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
8. 8Glossary, A to ZEvery concept in the sheet and the smaller terms it uses, in one list.192 terms

Build and ship whole web apps.