154 lines
4.9 KiB
Markdown
154 lines
4.9 KiB
Markdown
# Vontor CZ
|
||
|
||
Welcome to **Vontor CZ**!
|
||
|
||
## frontend Folder Overview
|
||
|
||
The `frontend` folder contains all code and assets for the client-side React application. Its structure typically includes:
|
||
|
||
- **src/**
|
||
Tady se ukladají věci, které uživateli se nepředavají přímo spíš takové stavební kostky.
|
||
- **api/**
|
||
TypeScript/JS soubory které se starají o API a o JWT tokeny.
|
||
Čistě pracují s backendem
|
||
- **context/**
|
||
Kontext si načte data které mu předáš a můžeš si je předávat mezi komponenty rychleji.
|
||
- **hooks/**
|
||
Pracuje s API a formátují to do výstupu který potřebujeme.
|
||
|
||
- **components/**
|
||
Konktrétní komponenty které se vykreslují na stránce.
|
||
|
||
Už využívají už hooky a contexty pro vykreslení informaci bez složite logiky (ať je komponenta hezky čistá a né moc obsáhla).
|
||
|
||
- **features/**
|
||
Nejsou to celé stránky, ale hotové komponenty.
|
||
|
||
Obsahuje všechny komponenty plus její hooky, API, state a utils potřebné pro jednu konkrétní funkcionalitu aplikace. (použijí se jenom jednou)
|
||
|
||
Features zajišťují modularitu a přehlednost aplikace.
|
||
|
||
Příklad: komponenta košík, která zahrnuje API volání, state management a UI komponenty.
|
||
|
||
---
|
||
|
||
- **layouts/**
|
||
Tohle je jenom komponenta, která načte další komponenty, ale používá se jako layout kde jsou například navigace footer a ostatní se opakující prvky stránky, ale hlavní obsah ještě není součastí! Ten se načte skrz <outlet/> v pages.
|
||
- **pages/**
|
||
Tady se jde do finále tady se vkládají samostatné komponenty a tvoří se už hlavní obsah stránky a vkládají se komponenty a tvoří se logika mezi ně.
|
||
- **routes/**
|
||
tady se ukládají routy které například zabraňuji načtení stránky nepříhlášeným uživatelům nebo jenom pro ty s určitou roli/oprávněním... tyhle route komponenty se pak využívají v
|
||
|
||
---
|
||
|
||
- **assets/**
|
||
Obrázky, fonty, a ostatní statické soubory.
|
||
|
||
|
||
---
|
||
|
||
|
||
- **App.tsx**
|
||
Root komponenta pro aplikaci, kde se nastavují routy pro jednotlivé stránky.
|
||
Pozor nemyslím ty routy ze složky routes/ ... to jsou jenom obaly pro konktrétní routy pro jednotlivé stránky.
|
||
- **main.tsx**
|
||
Vstupní bod pro načítaní aplikace (načíta se první komponenta App.jsx)
|
||
|
||
---
|
||
|
||
- **utils/**
|
||
Sběrné místo pro pomocné funkce, které nejsou přímo komponenty nebo hooky, ale jsou znovupoužitelné napříč aplikací.
|
||
|
||
---
|
||
|
||
- **index.css**
|
||
globální styly
|
||
- **App.css**
|
||
obsahuje stylovaní layoutu, navigace, footer, error okna atd. takové věci které zůstavjí vždy stejně
|
||
|
||
- **public/**
|
||
Složka public obsahuje statické soubory dostupné přímo přes URL (např. index.html, favicon, obrázky), které React přímo nereenderuje ani neoptimalizuje.
|
||
|
||
- **package.json**
|
||
něco jak requirements.txt v pythonu
|
||
|
||
- **vite.config.js / vite.config.ts**
|
||
Vite konfigurace pro building a serving frontend aplikace.
|
||
|
||
- **Dockerfile**
|
||
Konfigurace pro Docker
|
||
|
||
## Getting Started :3
|
||
|
||
1. **Instalace balíčku (bere z package.json):**
|
||
```sh
|
||
npm install
|
||
```
|
||
|
||
3. **Start dev server:**
|
||
```sh
|
||
npm run dev
|
||
```
|
||
|
||
4. **Build pro produkci(finále):**
|
||
```sh
|
||
npm run build
|
||
```
|
||
|
||
5. **Preview production build:**
|
||
```sh
|
||
npm run preview
|
||
```
|
||
|
||
## Portfolio site structure (vontor.cz)
|
||
|
||
New top-level navigation and sections were added to build a modern portfolio:
|
||
|
||
- components/
|
||
- navbar/SiteNav.tsx – sticky top navigation with dropdown
|
||
- hero/HeroCarousel.tsx – YouTube carousel hero with overlay text
|
||
- portfolio/PortfolioGrid.tsx – grid of projects with modal detail
|
||
- trading/TradingGraph.tsx – placeholder for Trading212 live graph
|
||
- donate/DonationShop.tsx – symbolic donation tiers styled as product cards
|
||
- skills/SkillsSection.tsx – categorized skill lists
|
||
- hosting/HostingSecuritySection.tsx – hosting & protection info panel
|
||
- common/Modal.tsx – reusable accessible modal
|
||
|
||
- pages/
|
||
- home/home.tsx – composes all sections on the homepage
|
||
- portfolio/PortfolioPage.tsx
|
||
- skills/SkillsPage.tsx
|
||
- hosting/HostingSecurityPage.tsx
|
||
- donate/DonateShopPage.tsx
|
||
- contact/ContactPage.tsx
|
||
|
||
- layouts/
|
||
- HomeLayout.tsx – wraps pages with SiteNav and Footer
|
||
|
||
Routing (src/App.tsx):
|
||
- "/" → Home (all sections)
|
||
- "/portfolio"
|
||
- "/skills"
|
||
- "/hosting-security"
|
||
- "/donate"
|
||
- "/contact"
|
||
|
||
Styling:
|
||
- The global palette lives in `src/index.css` as CSS variables and Tailwind is available via `@import "tailwindcss"`.
|
||
- Reusable helpers: `.glass`, `.glow`, `.section`, `.container`, `.divider`.
|
||
|
||
Assets:
|
||
- Public project images are in `public/portfolio/` and used by `PortfolioGrid`.
|
||
|
||
## Creating a New React Project with Vite
|
||
|
||
If you want to start a new project:
|
||
|
||
```sh
|
||
npm create vite@latest
|
||
# Choose 'react' or 'react-ts' for TypeScript
|
||
cd your-project
|
||
npm install
|
||
npm run dev
|
||
```
|