Projekt: Mini Dashboard

Mar 28, 2026

Únor 2026

Toto byl můj první větší projekt na backendu. Cílem bylo vytvořit jednoduchou aplikaci, kde uživatelé mohou psát a číst zprávy uložené v databázi. Projekt spojuje Node.js, Express server a PostgreSQL databázi.

Hlavní cíl byl pochopit, jak funguje komunikace mezi frontendem, backendem a databází.

Co projekt dělá

Mini Dashboard je jednoduchý messageboard:

• Zobrazení všech zpráv ze serveru (v chronologickém pořadí).
• Přidání nové zprávy s uživatelským jménem a textem.
• Zprávy jsou trvale uloženy v PostgreSQL databázi.
• Responsive rozhraní s EJS šablonami na backendu.
• Automatické řazení zpráv od nejnovějších.

Architektura: Backend, Backend, Databáze

Na rozdíl od vanilla JavaScriptu, zde se JavaScript spouští na serveru (Node.js), ne v prohlížeči. Důležité rozdělení:

Frontend → Backend → Databáze:

Uživatel vyplní formulář
         ↓
Express route zachytí požadavek
         ↓
Controller obsluhuje logiku
         ↓
Pool připojení k PostgreSQL
         ↓
Databáze uloží/vrátí data
         ↓
EJS šablona renderuje HTML
         ↓
Prohlížeč vidí stránku

Pracovní tok: Odkud vychází data

Ve vanilla JS se data nacházejí v paměti nebo Local Storage. Zde je vše jinak:

// controllers/usersController.js
exports.getMessages = async (req, res) => {
	// Dotaz na databázi
	const result = await pool.query(
		"SELECT * FROM messages ORDER BY created_at DESC",
	);

	// Předání dat EJS šabloně
	res.render("index", { messages: result.rows });
};

Když uživatel přejde na domovskou stránku, server:

1. Spojí se s databází.
2. Vybere všechny zprávy.
3. Vloží je do EJS šablony.
4. Odešle hotový HTML prohlížeči.

Projekční struktura

Mini_Dashboard/
├── app.js                    # Hlavní soubor aplikace
├── package.json              # Závislosti (express, pg, ejs)
├── controllers/
│   └── usersController.js    # Logika pro zprávy
├── routes/
│   ├── indexRouter.js        # Cesta pro domov
│   └── newRouter.js          # Cesta pro přidání zprávy
├── db/
│   ├── pool.js               # Připojení k PostgreSQL
│   ├── queries.js            # SQL dotazy
│   └── populatedb.js         # Inicializace databáze
├── views/
│   ├── index.ejs             # Domovská stránka
│   ├── new.ejs               # Formulář pro novou zprávu
│   └── components/
│       ├── head.ejs          # HTML head
│       ├── form.ejs          # Komponenta formuláře
│       └── messages.ejs      # Komponenta seznamu zpráv
└── public/
    └── styles.css            # Stylování

GitHub: Mini_Dashboard