Malá webová aplikace pro zaznamenávání docházky a uživatel v moderním UI v oranžová stylu
Úvod projektu
Tento projekt je webová docházková aplikace navržená v moderním oranžovém UI stylu. Cílem bylo vytvořit přehledný systém pro evidenci docházky uživatelů s důrazem na jednoduchost, rychlost a vizuální čistotu.
Aplikace umožňuje správu docházky, přehledy přítomnosti a práci s daty v reálném čase.
Klíčové funkce
✔ Evidence příchodů a odchodů
✔ Přehled docházky v tabulce
✔ Statistika přítomnosti
✔ Filtrace podle uživatelů / dnů
✔ Admin rozhraní pro správu dat
✔ Responzivní design (mobil / desktop)
UI / Design
Projekt je postavený na výrazném oranžovém vizuálním stylu, který kombinuje:
- tmavé pozadí pro kontrast
- oranžové akcenty pro akční prvky
- zaoblené komponenty
- jednoduché dashboard rozložení
👉 Cílem bylo dosáhnout „modern dashboard“ vzhledu.
Galerie hlavních prvků
Technologie
- React / Vite (frontend)
- Tailwind CSS (styling)
- REST API (backend komunikace)
- Node.js / Python backend (dle implementace)
- Netlify deployment
Architektura systému
Aplikace je rozdělena do tří hlavních částí:
1. Frontend – UI, dashboard, formuláře
2. API vrstva – komunikace se serverem
3. Databáze – ukládání uživatelů a docházky
zaznamená pro ostatní zda je daný uživatel aktivní nebo zda není
function StatusBadge({ status }: { status: string }) {
const config: Record<string, { label: string; className: string }> = {
offline: { label: "Nepřítomen", className: "bg-muted text-muted-foreground" },
working: { label: "Pracuje", className: "bg-green-muted text-green" },
break: { label: "Pauza", className: "bg-pink-muted text-pink" },
away: { label: "Mimo", className: "bg-orange-muted text-orange" },
};
const c = config[status] || config.offline;
return (
<span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium ${c.className}`}>
<span className="w-1.5 h-1.5 rounded-full bg-current" />
{c.label}
</span>
);
}funkce pro sledování a zaznamenání přesného času
function LiveClock() {
const [time, setTime] = useState(new Date());
useEffect(() => {
const interval = setInterval(() => setTime(new Date()), 1000);
return () => clearInterval(interval);
}, []);
}Kód sloužící k ukládání a zobrazení minulých záznamů
const recentRecords = records.slice(0, 5);
{recentRecords.map(record => (
<div key={record.id}>
{record.label}
</div>
))}Co jsem se naučila
* práce s API a datovými strukturami
* návrh UI dashboardu
* stavová logika v Reactu
* responzivní layout
* strukturování větší frontend aplikace
Možná vylepšení
- QR check-in systém