Product Achitecture

Digital products follow a common high-level architecture consisting of a frontend, backend, database, and optional communication with external services (e.g. using Stripe for payments).

Frontend (Client)

A digital product’s frontend is the user-facing part of a system, whatever the user directly interacts with. Common frontends take the following forms:

Web Browser Frontend (e.g. A web application that works in Chrome or Safari)
Smartphone App Frontend (e.g. iOS, Android apps)
Desktop App Frontend (e.g. VS Code, Slack)
Other Frontends such as a smart fridge touchscreen

A frontend is composed of the following, occurring in this order:

Source Code
- Code written by developers or AI assistants like Claude or ChatGPT. Common languages for an application with a Web Browser Frontend are TypeScript / JavaScript, HTML, and CSS.
- Contains all the instructions for:
  - User Interface (UI) – layout, styling, components.
  - Interactions – button clicks, form submissions, animations.
  - Communication – making requests to backend services for data, authentication, or payments (via HTTP which is discussed later)
Compiler / Transpiler
- Converts source code into a form that a so called “runtime” environment can understand.
- For examples, the tsc transpiler converts TypeScript into plain JavaScript.
Runtime Environment
- Specialized software inside the browser that executes the compiled/transpiled code.
- Examples of frontend runtime environments:
  - V8 (Chrome, Edge)
  - WebKit (Safari)
Application (UI)
- The final product the user sees and interacts with: buttons, menus, forms, dynamic updates (all visuals and behaviors)

Backend (Server)

A backend is composed of the following, occurring in this order:

Source Code
- Code written by developers (or AI assistants) to handle logic, data, and secure operations that the frontend cannot safely perform.
- Common backend languages include JavaScript/TypeScript (Node.js), Python, Java, C#, Go, and Ruby.
- Contains instructions for:
  - Business Logic – rules of the application (e.g., “only admins can delete users”).
  - Database Operations – actions to store, update, or retrieve information.
  - Authentication & Authorization – verifying user identity and permissions.
  - External Integrations – communicating with external services like Stripe (payments), email, or other systems.
Compiler / Transpiler
- Converts source code into a form that a so called “runtime” environment can understand.
- For examples, the tsc transpiler converts TypeScript into plain JavaScript.
Runtime Environment
- Specialized software that executes backend code and manages communication with the operating system.
- Examples of backend runtimes:
  - Node.js (JavaScript/TypeScript)
  - Python interpreter (Python)
- Provides access to file systems and other system-level features.
Application (Services / APIs)
- The backend’s final product is not a visual interface but a set of services that the frontend (or other systems) can call.
- This includes:
  - APIs – An API is like a restaurant menu and waiter. The frontend (customer/client) orders what it needs, the backend prepares it, and the API delivers the result in a simple, standard format.
  - Database Connections – permanent data storage and retrieval.
  - Background Jobs – tasks like sending emails or processing payments.
  - Security Enforcement – ensuring only authorized users can access protected resources.

Database

A database is special part of an application’s backend. It’s a structured place to store, organize, and retrieve text, images, audio files, or any other kind of digital information.

Databases are optimized for scale, speed, and rules about how data can be accessed and stored.

Data

The actual information: names, orders, transactions, posts, images, etc.

Tables (in relational databases)

Data is organized into rows (records) and columns (fields).
Example: a Users table with id, name, and email columns.

Schema

The blueprint that defines what tables exist and what type of data goes where.
Example: in the Users table, email must be text and id must be a number.

Queries

Special commands (usually SQL) to ask questions of the database.
Example:
```
SELECT * FROM Users WHERE id=123;
```

Creating an MVP

A Minimum Viable Product isn’t a stripped-down final product, it’s the smallest version that is functional, reliable, and usable enough to validate your value proposition. The goal is to build just enough to test with real customers, gather feedback, and then iterate

Image source: The Lean Product Playbook by Dan Olsen

Mock-ups

draw.io

Excalidraw

Figma

Figma is a collaborative design tool used to create, refine, and share user interface (UI) and user experience (UX) designs. It enables teams to work together in real time, using shared design files, reusable components, interactive prototypes, and built-in commenting to streamline the process from concept to final design.

For product managers, Figma is a commonly used tool for aligning teams around a shared vision. It allows PMs to visualize product ideas, give feedback directly on designs, collaborate with designers and developers, and share clickable prototypes for testing. This helps speed up decision-making, improve communication, and ensure the final product matches the intended user experience.

New AI design and prototyping tools are rapidly changing where Figma sits in the product tech stack. Figma itself is rapidly evolving into an AI first company with the launch of their Figma Make product.

Structured Prompting

Supabase

Stripe

Customer Feedback and Rapid Iteration

Once you have a prototype built in Figma or generated with an AI tool like Bolt, V0, Lovable, or Replit, the next step is to put it in front of real or representative users as quickly as possible. The goal is to validate whether the product solves the right problem, delivers value, and feels intuitive to use before investing heavily in full-scale development.

Effective approaches include usability testing, where you watch customers interact with the prototype and note points of confusion or friction, and structured interviews or surveys, where you ask targeted questions about specific features, flows, or visual elements. The key is to focus on observable behavior and specific feedback rather than general opinions.

Once feedback is gathered, teams can rapidly update the prototype, often in hours rather than what used to be weeks, making changes to the flow, visuals, or feature set. This fast feedback loop allows product managers to refine the solution, confirm alignment with customer needs, and de-risk development before committing resources. Over multiple iterations, this process builds confidence that the final product will be both usable and valuable.