The Complete Technology Map

A technology stack is a set of tools that cooperate to deliver a product. You do not need to master every option. You need to understand the job each layer performs, choose one compatible path, and know when a new tool is actually necessary.

Languages: the raw materials

HTML describes the meaning and structure of a web page. CSS controls its layout and visual presentation. JavaScript adds behavior in browsers and can also run on servers. TypeScript adds type checking to JavaScript so many mistakes appear before users find them. Python is a readable general-purpose language used heavily for APIs, automation, and data work.

In this series, the web and mobile projects use TypeScript. The API project uses Python. You are not expected to memorize syntax; you should learn to recognize components, functions, types, inputs, and outputs well enough to review generated changes.

Frameworks: established structure

A framework supplies conventions and common capabilities.

• React builds interfaces from reusable components.
• Next.js adds routing, rendering, server capabilities, build tooling, and deployment conventions around React.
• React Native applies React's component model to native mobile interfaces.
• Expo makes React Native development, routing, native modules, builds, and releases more approachable.
• FastAPI turns Python functions and data models into validated HTTP APIs with generated documentation.

Frameworks reduce decisions, but they evolve. Ask your agent to consult the installed version and current official documentation before adding packages or copying configuration.

UI and design

Tailwind CSS provides small utility classes for styling web interfaces. A design system defines reusable colors, spacing, typography, components, and interaction rules. Figma can hold visual designs, but a beginner can also start with a written UI specification and iterate in the browser.

Choose one styling approach per project. Mixing multiple component libraries and styling systems creates inconsistent UI and harder debugging.

Backend and APIs

The backend runs trusted logic outside the user's device. It can validate requests, apply permissions, access private credentials, communicate with services, and store data.

You have several choices:

• Backend as a Service: Supabase or Firebase supplies managed data, authentication, storage, and APIs. Fast for an MVP.
• Framework-integrated backend: Next.js route handlers keep simple web endpoints in the same project.
• Custom API: FastAPI or Node.js/Express gives more control and a clean boundary for several clients.

Use the simplest choice that satisfies your rules. A public client must never contain an administrator or service-role secret.

Databases

PostgreSQL is a relational database: data lives in tables connected by explicit relationships. It is a strong default for users, transactions, categories, and budgets. Supabase provides managed PostgreSQL plus Auth, storage, and APIs.

SQLite stores a relational database in one file and is excellent for local tools, prototypes, tests, and offline data. MongoDB stores document-shaped records and can suit flexible document domains. Firebase/Firestore offers a managed document database with real-time client patterns.

Do not choose a database because its name appears in more AI-generated examples. Choose it from data shape, query needs, deployment constraints, team knowledge, and security model.

Authentication and authorization

Authentication answers “Who are you?” Authorization answers “What may you access?” A successful login does not protect database rows by itself.

Our Supabase projects use Auth for identity and Row Level Security policies so a signed-in user can only access owned records. The custom API validates identity and applies ownership checks on the server. Never trust a user_id supplied by a browser or mobile form without verifying it against the authenticated identity.

Testing

Testing has layers:

• Static checks: formatting, linting, and type checking.
• Unit tests: one calculation or rule in isolation.
• Integration tests: components such as API and database working together.
• End-to-end tests: a real user flow across the application.
• Manual checks: visual quality, accessibility, device behavior, and exploratory use.

We use framework-appropriate tools such as Vitest or Jest, Playwright, Pytest, and manual checklists. “The page opened once” is not a complete test strategy.

Deployment and operations

Deployment puts a build where users can access it. Vercel is convenient for Next.js. Expo Application Services supports mobile builds and submissions. Supabase hosts the managed database. A FastAPI host runs the Python service.

After deployment, monitoring answers what is failing. Logs record events; error tracking groups crashes; analytics describes usage; uptime checks detect availability. Never log passwords, access tokens, full financial records, or unnecessary personal data.

The three stacks in this course

Prompt: explain an unfamiliar tool

Explain [technology] to a non-technical product builder. Cover its single main
job, what runs it, what data it can access, what it replaces, what it does not
replace, two common alternatives, likely costs, and the security boundary.
Then show where it would sit in an expense-tracker architecture. Do not write
installation commands until you have checked the current official docs.

How to resist stack sprawl

Before approving a new dependency, ask:

1. What exact problem does it solve?
2. Can the current stack solve that problem adequately?
3. Is the package maintained and compatible with installed versions?
4. What permissions, bundle size, or recurring cost does it add?
5. How will we test and remove it?

An AI agent may suggest a library because it knows an example, not because your product needs it.

Completion checklist

• I can distinguish language, framework, database, and host.
• I understand authentication versus authorization.
• I know the chosen stack for each project.
• I will ask why before adding a dependency.
• I can explain where trusted server logic belongs.

Next: How Websites, Mobile Apps, Backends, and Databases Work Together