{"id":28490159,"url":"https://github.com/tyronejosee/prototype_react_atomic_design","last_synced_at":"2026-04-08T23:31:44.058Z","repository":{"id":297531988,"uuid":"997086042","full_name":"tyronejosee/prototype_react_atomic_design","owner":"tyronejosee","description":"This prototype is developed in React following the Atomic Design methodology, enabling a scalable, reusable, and consistent component architecture.","archived":false,"fork":false,"pushed_at":"2025-06-06T00:00:20.000Z","size":6996,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-06T01:17:50.944Z","etag":null,"topics":["atomic-design","bun","css","html","javascript","nodejs","react","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tyronejosee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-05T23:55:19.000Z","updated_at":"2025-06-06T00:05:10.000Z","dependencies_parsed_at":"2025-06-06T19:46:07.265Z","dependency_job_id":null,"html_url":"https://github.com/tyronejosee/prototype_react_atomic_design","commit_stats":null,"previous_names":["tyronejosee/prototype_react_atomic_design"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyronejosee%2Fprototype_react_atomic_design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyronejosee%2Fprototype_react_atomic_design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyronejosee%2Fprototype_react_atomic_design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyronejosee%2Fprototype_react_atomic_design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tyronejosee","download_url":"https://codeload.github.com/tyronejosee/prototype_react_atomic_design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyronejosee%2Fprototype_react_atomic_design/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258675112,"owners_count":22739611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-design","bun","css","html","javascript","nodejs","react","tailwindcss","typescript","vite"],"created_at":"2025-06-08T07:07:40.864Z","updated_at":"2026-04-08T23:31:44.045Z","avatar_url":"https://github.com/tyronejosee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/tyronejosee/project_new_store#gh-light-mode-only\" target=\"_blank\"\u003e\n    \u003cimg src=\"./public/logo-light.svg\" alt=\"logo-light\" width=\"80\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/tyronejosee/project_new_store#gh-dark-mode-only\" target=\"_blank\"\u003e\n    \u003cimg src=\"./public/logo-dark.svg\" alt=\"logo-dark\" width=\"80\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e\u003cstrong\u003ePrototype React Atomic Design\u003c/strong\u003e\u003c/h1\u003e\n\u003c/div\u003e\n\u003cp align=\"center\"\u003e\nAtomic 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.\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.typescriptlang.org/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/typescript-5.2.2-007ACC\" alt=\"typescript-version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://reactjs.org/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/react-18.2.0-61DAFB\" alt=\"react-version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://reactrouter.com/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/react--router--dom-7.6.2-CA4245\" alt=\"react-router-dom-version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://vitejs.dev/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/vite-5.0.8-646CFF\" alt=\"vite-version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://tailwindcss.com/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/tailwindcss-4.1.8-06B6D4\" alt=\"tailwindcss-version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://eslint.org/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/eslint-8.55.0-4B32C3\" alt=\"eslint-version\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n![Atomic Design](./public/main.webp)\n\n\u003e **Read more [EN](./public/book-en.pdf) / [ES](./public/book-es.pdf)**\n\n## 🚀 Getting Started\n\nClone repository.\n\n```bash\ngit clone git@github.com:tyronejosee/prototype_react_atomic_design.git\ncd prototype_react_atomic_design\n```\n\nInstall dependencies.\n\u003e We recommend using [Bun](https://bun.com/) to run this project.\n\n```bash\nbun install\n```\n\nStart the development server.\n\n```bash\nbun dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) with your browser to see the result.\n\n\u003e See all available commands in the [package.json](./package.json) file.\n\n## 💡 Atomic Design Concepts\n\n### ⚛️ **Atoms**\n\n* The most basic and atomic components.\n* Indivisible elements, with no complex logic.\n* Examples: buttons, inputs, labels (`\u003cButton\u003e`, `\u003cInput\u003e`, `\u003cLabel\u003e`), icons, colors, typography.\n* Purely presentational, no complex internal state.\n\n### 🧩 Molecules\n\n* A combination of atoms forming a simple functional component.\n* May include some logic but remains a small component.\n* Examples: a form field with label + input, a button group, an icon with text.\n\n### 🏗️ Organisms\n\n* Complex components composed of atoms and molecules.\n* Contain more advanced logic and a more complete visual structure.\n* Examples: complete form, navbar, footer, card with image and description, filterable list.\n\n### 🗂️ Templates\n\n* Structural layouts that define the composition of organisms and other components.\n* Contain the page structure but not the actual data or final content.\n* Examples:\n\n  * Page layout with header, sidebar, main content, and footer.\n  * Generic layouts for pages (e.g., `DashboardTemplate`, `AuthTemplate`).\n  * Define visual flow and positioning, but not specific content.\n\n### 📄 Pages\n\n* Final components that inject data, content, and specific logic.\n* Use templates and provide data to complete the UI.\n* Represent actual routes or views.\n* Examples: `LoginPage`, `DashboardPage`, `ProfilePage`.\n\n## 🔄 Composition Flow\n\n* A **Page** uses a **Template**.\n* The **Template** contains multiple **Organisms**.\n* **Organisms** are made up of **Molecules**.\n* **Molecules** are built from **Atoms**.\n\n## 🏠 Analogy\n\n\u003e Think of building a house:\n\u003e\n\u003e * **Atoms**: bricks and windows.\n\u003e * **Molecules**: a wall with a window and door.\n\u003e * **Organisms**: a complete room.\n\u003e * **Templates**: the floor plan (shows how rooms are arranged).\n\u003e * **Pages**: the finished house with furniture, decoration, and people living inside.\n\n## ⚖️ License\n\nThis project is licensed under the [MIT License](./LICENSE).\n\nEnjoy! 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyronejosee%2Fprototype_react_atomic_design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftyronejosee%2Fprototype_react_atomic_design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyronejosee%2Fprototype_react_atomic_design/lists"}