Skip to content
Developer Template5 columns · 5 sample rows· Updated

Project Architecture & Tech Stack Markdown Table Template

A tech stack table explains what a project is built from and, more importantly, why each piece is there. In a README it replaces the wall of logos with something a reader can act on. In an onboarding doc it tells a new engineer which frameworks to learn first. In technical due diligence it is often the first artefact an acquirer, auditor, or security reviewer asks for, because it shows at a glance which licences, vendors, and runtimes the business depends on.

Edit This Template

Edit cells, add rows, or sort — the Markdown updates live
Row
1
15.x
2
3.4.x
3
0.475.x
4
5.7.x
5
Output
| Tier / Layer       | Technology           |  Version  |   License   | Architectural Purpose                                 |
| :----------------- | :------------------- | :-------: | :---------: | :---------------------------------------------------- |
| Frontend Framework | Next.js (App Router) |  `15.x`   |     MIT     | Static site export & React 19 UI component rendering  |
| Styling Engine     | Tailwind CSS         |  `3.4.x`  |     MIT     | Utility-first styling system and responsive dark mode |
| Iconography        | Lucide React         | `0.475.x` |     ISC     | Lightweight accessible SVG interface icons            |
| Engine Runtime     | TypeScript           |  `5.7.x`  | Apache-2.0  | In-browser tabular parsing and formatting             |
| Hosting & CDN      | Cloudflare Pages     |   Edge    | Proprietary | Global edge network delivery with zero cold starts    |
5 rows × 5 columns
Rendered Preview
Tier / LayerTechnologyVersionLicenseArchitectural Purpose
Frontend FrameworkNext.js (App Router)15.xMITStatic site export & React 19 UI component rendering
Styling EngineTailwind CSS3.4.xMITUtility-first styling system and responsive dark mode
IconographyLucide React0.475.xISCLightweight accessible SVG interface icons
Engine RuntimeTypeScript5.7.xApache-2.0In-browser tabular parsing and formatting
Hosting & CDNCloudflare PagesEdgeProprietaryGlobal edge network delivery with zero cold starts

When to Use This Table

Each column serves a different reader. Engineers read Technology and Version to know whether the docs they are about to search for match the code. Legal and procurement read License, because an AGPL-3.0 dependency or a vendor’s proprietary terms change what the company may do with its product. Platform teams read versions to plan upgrades before a runtime falls out of support. Architectural Purpose is for everyone, and it is the column that stops a later team from removing a library without understanding the job it did.

A good stack table is selective and current. It lists the components that would take real effort to replace, gives versions that match the lockfile, uses standard licence identifiers, and states a reason for each choice. A weak one dumps every entry from package.json, carries versions from the day the project started, and fills the purpose column with adjectives. Selectivity matters more than completeness here; the full dependency inventory belongs in a generated SBOM, not a hand-maintained table.

What Goes in Each Column

ColumnAlignmentWhat to put here
Tier / Layerleft :---A short architectural grouping from a fixed vocabulary — Frontend, API, Data, Infrastructure, Observability, Tooling — so rows can be sorted and compared across projects. Order tiers along the path a request takes, from the browser to storage, and keep rows within a tier together.
Technologyleft :---The product’s official name and capitalisation (PostgreSQL, not “Postgres DB”), linked to its homepage or docs as [Next.js](https://nextjs.org/). Add the mode when it changes how the tool behaves, such as App Router versus Pages Router, or static export versus server rendering.
Versioncenter :---:The version the lockfile actually resolves, centered. A README can use the major line (15.x) so it does not go stale weekly; an audit needs the exact version. For managed services with no installable version, write Managed or the API version you call, rather than leaving the cell empty.
Licensecenter :---:The SPDX identifier from the project’s own LICENSE file: MIT, Apache-2.0, ISC, BSD-3-Clause, MPL-2.0. For hosted services write Proprietary (SaaS). Centered because the values are short codes that readers scan for the odd one out, usually a copyleft or source-available licence.
Architectural Purposeleft :---The job the component does in this system and the constraint that led to choosing it: “static export so the site needs no server”, “Postgres for transactional data; analytics live elsewhere”. One sentence that would help someone decide whether it can be replaced.

How to Fill It In

  1. 1Collect candidates from manifests and lockfiles (package-lock.json, go.mod, uv.lock, Gemfile.lock), then from infrastructure code — Dockerfile FROM lines, Terraform providers, wrangler.toml — because hosted services never appear in a package manifest.
  2. 2Cut the list down. Keep a component when replacing it would take more than a day or two of work; drop type definitions, lint plugins, and small utilities. Most applications end up with eight to fifteen rows.
  3. 3Read resolved versions from the toolchain rather than the manifest’s range: npm ls next --depth=0, pip show django, or go list -m all. A ^15.1.7 range in package.json says little about what is installed.
  4. 4Confirm each licence against the repository’s LICENSE file at the version you use, since licences do change between releases. Registry metadata (npm view <pkg> license) is a fast first pass, not proof.
  5. 5Check support windows for runtimes and databases on their official release pages, and note anything that ends within the next year.
  6. 6Review the table whenever a major-version upgrade merges, which Renovate or Dependabot pull requests make easy to spot.

Ready-to-Paste Variations

Compact “Built with” README section

Two columns and links, nothing else. Readers of a public README want orientation, not an audit.

| Layer | Built with |
| :--- | :--- |
| Frontend | [Next.js](https://nextjs.org/) (static export), [React](https://react.dev/) |
| Styling | [Tailwind CSS](https://tailwindcss.com/) |
| Hosting | [Cloudflare Pages](https://pages.cloudflare.com/) |
| Language | [TypeScript](https://www.typescriptlang.org/) |

Licence review for due diligence

For legal or acquisition review. The obligation column is a plain-language summary to start the conversation, not legal advice.

| Component | Version | License | How it is used | Main obligation |
| :--- | :---: | :---: | :--- | :--- |
| React | `19.1.0` | `MIT` | Bundled into client JavaScript | Keep the copyright notice |
| TypeScript | `5.7.3` | `Apache-2.0` | Build tool only, not shipped | Notice file if redistributed |
| Redis | `8.0` | `AGPL-3.0-only`, RSALv2, or `SSPL-1.0` | Self-hosted cache | Depends on which of the three you accept |
| Stripe | Managed | Proprietary (SaaS) | Payment processing | Stripe’s terms of service |

Runtime support windows

For platform planning. The dates are the upstream end-of-life dates published by each project.

| Runtime | In use | Upstream end of life | Plan |
| :--- | :---: | :---: | :--- |
| Node.js | `22.x` | April 2027 | Move to Node.js 24 LTS in Q1 |
| PostgreSQL | `14` | November 2026 | Upgrade to 17 with `pg_upgrade` before the deadline |
| Python | `3.12` | October 2028 | No action this year |

Common Mistakes

  • Listing every dependency in the manifest.

    A forty-row table hides the five decisions that matter. Keep architectural components here and generate the full inventory as an SBOM in CycloneDX or SPDX format for anyone who needs everything.

  • Writing licence names loosely, as “Apache 2.0” or just “BSD”.

    Use SPDX identifiers such as Apache-2.0 and BSD-3-Clause. “BSD” alone is ambiguous between the 2-clause and 3-clause variants, and scanners and compliance tools match on the exact identifier.

  • Assuming a dependency’s licence never changes.

    Several infrastructure projects have relicensed: Terraform moved to the Business Source License from 1.6, and Redis left BSD in 7.4 before adding an AGPL option in 8.0. Record the licence of the version you actually run and recheck it at each major upgrade.

  • Filling Architectural Purpose with marketing words like “fast” or “modern”.

    Write the job and the reason: what it does here, what it replaced, which requirement it meets. “Chosen because the team already ran it in production” is a perfectly honest reason.

  • Naming a technology that the code does not actually use.

    Check claims against the build. If the parsing engine is plain TypeScript, do not call it WebAssembly; reviewers who open the repository will notice, and the rest of the table loses credibility.

Browse all 50 templates
FAQ

Project Architecture & Tech Stack: Frequently Asked Questions

What belongs in a tech stack table?

Languages, frameworks, datastores, hosting, and any third-party service the product cannot run without, such as authentication, payments, or email delivery. Leave out developer conveniences like formatters unless they shape how contributors work, in which case a Tooling tier is fine.

Should I pin exact versions in a README?

Use the major line, such as 15.x, in a README so it stays true between patch releases. Use exact versions in audit documents and incident reports, where the precise build matters. Either way, take the number from the lockfile.

Do open-source licences matter for a SaaS product that is never distributed?

Yes, in two ways. JavaScript sent to browsers is distributed, so its licence notices apply. And AGPL-3.0 reaches network use: modifying an AGPL component and letting users interact with it over a network can require offering them its source code.

Can I show logos or badges in the table?

Yes, with image syntax inside the cell, for example a shields.io badge. Keep them small and always include the text name too, because images can fail to load and screen readers depend on the alt text. See images and badges in tables.