Architectures

Methodologies of Frontend architectures

Classic (without architecture)

Folders

• pages
• components
• api
• helpers
• store
• hooks
• assets

Atomic design

https://bradfrost.com/blog/post/atomic-web-design/ (opens new window)

What is atomic design

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

Modular architecture

Folders

• pages
• modules
  • moduleName
    • api
    • components
    • const
    • helpers
    • store index.ts
• components
• UI

Feature-sliced

https://feature-sliced.design/ (opens new window)

A methodology for designing frontend projects aimed at separating an application according to business logic and areas of responsibility.