Jaký přístup jste použili při navrhování architektury…

Použil jsem přístup založený na komponentách, dodržující principy atomického designu. Rozčlenil jsem projekt na malé, znovu použitelné komponenty, seskupené podle úrovní abstrakce: atomy, molekuly, organismy, šablony a stránky.

Atomy: Základní prvky (tlačítka, vstupní pole, ikony).
Molekuly: Kombinace atomů (vstupní pole s tlačítkem).
Organismy: Skupiny molekul a/nebo atomů (záhlaví, zápatí).
Šablony: Kompozice organismů a molekul, které určují strukturu stránky (rozložení stránky).
Stránky: Konkrétní příklady šablon s reálnými daty.

To umožnilo dosáhnout:

Vysoké znovu použití kódu
Snadné údržby a škálování
Snadného testování komponent
Lepší spolupráce mezi designéry a vývojáři

Použil jsem React (nebo Vue.js, podle toho, jaký framework je v projektu použit), řízení stavu přes Redux (nebo Vuex).

Struktura adresářů je organizována podle komponent, nikoli podle typu souboru, což zlepšuje dohledatelnost a soudržnost kódu.

// Příklad struktury adresářů
src/
  components/
    atoms/
      Button/
        Button.js
        Button.module.css
    molecules/
      InputWithButton/
        InputWithButton.js
        InputWithButton.module.css
    organisms/
      Header/
        Header.js
        Header.module.css
  containers/ // Pro komponenty spojené s logikou a daty
    UserList/
      UserList.js
      UserList.module.css
  pages/
    HomePage/
      HomePage.js
      HomePage.module.css
  redux/ // Nebo Vuex
    actions/
    reducers/
    store.js
  utils/ // Pomocné funkce
  api/ // Práce s API

Jaký přístup jste použili při navrhování architektury vašeho projektu?