Full-stack

File size
13.3KB
Rendered lines
269

Full-stack

To know anything, you must know everything. (For clarity, this document is about full-stack architecture.)

Definitions

Within the context of software development.

  1. Architecture: blueprint of how a website or application’s components interact with each other AND how data flows through the system
  2. Full-stack: consists of the three below layers
  3. Frontend (client-side code): UI and UX
  4. Backend (server-side code): logic, data processing, API handling
  5. Database (database code): for data storage and management
  6. API (application programming interface): bridge between the frontend and backend that defines communication via HTTP requests

Frontend

Backend

Database

Overview

Full-stack architecture diagram.

+----------------------+                 +---------------------+                          +----------------------+
|                      |                 |                     |                          |                      |
|      [Frontend]      | -- API call --> |      [Backend]      | --- database query --->  |      [Database]      |
|                      |                 |                     |                          |                      |
|      UI and UX       |                 |   Execute business  |                          |    Database CRUD     |
|       display        | <-- response -- |        logic        | <--- database return --- |      operations      |
|                      |                 |                     |                          |                      |
+----------------------+                 +---------------------+                          +----------------------+

More on