Struktura plików

Struktura plików

Główny katalog

/frontend
    /public
    /src
    .env
    .eslintrc.js
    .eslintrc.json
    .gitignore
    Dockerfile
    README.md
    package-lock.json
    package.json
    yarn.lock

• /public - katalog z kontenerem html, favicon.ico, plikiem manifest do PWA i robots.txt
• /src - katalog z kodem źródłowym
• .env - plik konfiguracyjny ze zmiennymi środowiskowymi
• .eslintrc.js i .eslintrc.json - pliki konfiguracyjne do Eslinta
• .gitignore - plik dla gita do ignorowania plików
• Dockerfile - plik konfiguracyjny do dockera
• package.json - plik konfiguracyjny do bibliotek z npm modules

Katalog źródłowy

/src
    /assets
    /js
    /main-styles
    index.js

• /assets - pliki graficzne
• /js - pliki z kodem javascript
• /main-styles - globalne pliki css
• index.js - startowy plik js

Logika javascript

/js
    /pages
    /utils
    App.jsx
    reportWebVitals.js
    setupTests.js

• /pages - komponenty poszczególnych podstron
• /utils - pliki js z globalnymi zmiennymi
• App.jsx - główny komponent aplikacji
• reportWebVitals.js - plik konfiguracyjny do PWA
• setupTests.js - plik konfiguracyjny do testów jednostkowych

Struktura komponentów

/pages
    /administration
    /creative
    /entertainment

Komponenty stron, dzielą się na strefy;

• /administration - administracyjna, zawierająca komponenty dotyczące administracji
• /creative - kreatywna, zawierająca komponenty dotyczące tworzenia treści do aplikacji
• /entertainment - publiczna, zawierająca elementy grywalne dla użytkowników

Każda strefa zawiera główne komponenty podstron, które składają się z mniejszych komponentów podzielonych na organizmy, molekuły i atomy.

/creative
    /CardsCreator
        /atoms
            ...
        /molecules
            ...
        /organisms
            ...
    /HistoryCreator

Struktura komponentu

/Card
    /styled-components
        Button.js
        Name.js
        Subject.js
    Card.js
    index.js

• Card.js - to komponent ze strukturą jsx (taki html w js)
• /styled-components - katalog z komponentami do stylowania
• index.js - plik js upraszczający importy