Brunobrno/vontor-cz
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bruno
vontor-cz/frontend/REACT.md
Brunobrno c3f837b90f upgrade
2025-11-07 00:46:35 +01:00

4.9 KiB
Raw Permalink Blame History

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 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):

    npm install

  2. Start dev server:

    npm run dev

  3. Build pro produkci(finále):

    npm run build

  4. Preview production build:

    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:

npm create vite@latest
# Choose 'react' or 'react-ts' for TypeScript
cd your-project
npm install
npm run dev