Poznámka: README-čka v repozitároch sa väčšinou píšu po anglicky, ale keďže chceme, aby toto repo slúžilo aj na edukačné účely, píšeme README v slovenčine. Ak ti to vadí, prepáč, skús nas pochopiť. 🙈 Ak ťa to teší, nemáš začo. 😉
V tomto repozitári nájdeš frontend k našej fantastickej stránke streetofcode.sk. Backend nájdeš tu.
- Jazyk: Typescript
- Framework: Next.js a teda React
- Štýly: Styled components
- Komponenty: Väčšina sú vlastné komponenty, trochu Material UI
- Monitoring: Sentry
- Autentifikácia používateľov (login): Firebase Authentication
- Admin sekca: React Admin
- Blog "engine": Wordpress, dáta ťaháme pomocou WPGraphQL
- Testy: nemáme 🤷🙈
- IDE: My používame VS Code a snáď ti v ňom všetko bude fungovať, keď si nainštaluješ recommended extensions
- Formátovanie a lintovanie: Prettier + eslint
- CI: GitHub Actions
- Deployment: Railway.app via GitHub hooks (referral link)
Next.js nám viac menej nadiktoval celú štruktúru projektu. Čiže hlavná časť sú src/_app.tsx a potom src/pages. V src/components sa nachádzajú všetky naše komponenty, z ktorých vyskladávame stránku. V src/components/core sú základné komponenty, ktoré sú akokeby náhrada Material UI. V src/hooks máme zadefinovaných zopár vlasných hookov, ktoré využívame.
Vytvor si kópiu .env.template súboru:
cp .env.template .env
Na začiatok nemusíš ani nič upravovať a všetko by malo byť ok.
Nainicializuj yarn:
yarn
Poznámka: Pred tým ako spustíš frontend, musíš mať spustený aj backend.
A spusti projekt:
yarn dev
To by malo byť všetko. Teraz sa v browseri môžeš navigovať na localhost:3000 a mala by sa ti načítať naša stránka s nejakými dummy kurzami.
Ak chceš niečo iba rýchlo zmeniť, aby si videl/a, že to vieš editovať, tak kľudne uprav napr. texty v hero section alebo si zmeň accent color v src/theme/theme.ts.
Proste vytvor pull request. Ideálne v pull requeste aj popíš, čo daná zmena má robiť a prečo by sme ju mali chcieť. Za každú pomoc budeme radi, ale tiež ber prosím na vedomie, že nie každý PR musíme akceptovať.
Buď nám napíš cez feedback formulár, na Discord, na mail ([email protected]) alebo vytvor issue na GitHub-e.