https://github.com/tyronejosee/prototype_react_atomic_design
This prototype is developed in React following the Atomic Design methodology, enabling a scalable, reusable, and consistent component architecture.
https://github.com/tyronejosee/prototype_react_atomic_design
atomic-design bun css html javascript nodejs react tailwindcss typescript vite
Last synced: 3 months ago
JSON representation
This prototype is developed in React following the Atomic Design methodology, enabling a scalable, reusable, and consistent component architecture.
- Host: GitHub
- URL: https://github.com/tyronejosee/prototype_react_atomic_design
- Owner: tyronejosee
- License: mit
- Created: 2025-06-05T23:55:19.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-06T00:00:20.000Z (about 1 year ago)
- Last Synced: 2025-06-06T01:17:50.944Z (about 1 year ago)
- Topics: atomic-design, bun, css, html, javascript, nodejs, react, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 6.67 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Prototype React Atomic Design
Atomic design is a design approach based on the idea that parts of a product or system should be composed of minimal and reusable elements. This allows designers and developers to work with smaller, more easily reusable components, resulting in faster and more efficient design.
> **Read more [EN](./public/book-en.pdf) / [ES](./public/book-es.pdf)**
## 🚀 Getting Started
Clone repository.
```bash
git clone git@github.com:tyronejosee/prototype_react_atomic_design.git
cd prototype_react_atomic_design
```
Install dependencies.
> We recommend using [Bun](https://bun.com/) to run this project.
```bash
bun install
```
Start the development server.
```bash
bun dev
```
Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
> See all available commands in the [package.json](./package.json) file.
## 💡 Atomic Design Concepts
### ⚛️ **Atoms**
* The most basic and atomic components.
* Indivisible elements, with no complex logic.
* Examples: buttons, inputs, labels (``, ``, ``), icons, colors, typography.
* Purely presentational, no complex internal state.
### 🧩 Molecules
* A combination of atoms forming a simple functional component.
* May include some logic but remains a small component.
* Examples: a form field with label + input, a button group, an icon with text.
### 🏗️ Organisms
* Complex components composed of atoms and molecules.
* Contain more advanced logic and a more complete visual structure.
* Examples: complete form, navbar, footer, card with image and description, filterable list.
### 🗂️ Templates
* Structural layouts that define the composition of organisms and other components.
* Contain the page structure but not the actual data or final content.
* Examples:
* Page layout with header, sidebar, main content, and footer.
* Generic layouts for pages (e.g., `DashboardTemplate`, `AuthTemplate`).
* Define visual flow and positioning, but not specific content.
### 📄 Pages
* Final components that inject data, content, and specific logic.
* Use templates and provide data to complete the UI.
* Represent actual routes or views.
* Examples: `LoginPage`, `DashboardPage`, `ProfilePage`.
## 🔄 Composition Flow
* A **Page** uses a **Template**.
* The **Template** contains multiple **Organisms**.
* **Organisms** are made up of **Molecules**.
* **Molecules** are built from **Atoms**.
## 🏠 Analogy
> Think of building a house:
>
> * **Atoms**: bricks and windows.
> * **Molecules**: a wall with a window and door.
> * **Organisms**: a complete room.
> * **Templates**: the floor plan (shows how rooms are arranged).
> * **Pages**: the finished house with furniture, decoration, and people living inside.
## ⚖️ License
This project is licensed under the [MIT License](./LICENSE).
Enjoy! 🎉