https://github.com/jsdeveloperr/atomic-design-react-vite-project

Mastering Modular Architecture with React and Atomic Design: Advanced Techniques and Hands-On Examples
https://github.com/jsdeveloperr/atomic-design-react-vite-project

atomic-design react react-atomic-design-example react-atomic-organism react-design-patterns react19

Last synced: 14 days ago
JSON representation

Mastering Modular Architecture with React and Atomic Design: Advanced Techniques and Hands-On Examples

• Host: GitHub
• URL: https://github.com/jsdeveloperr/atomic-design-react-vite-project
• Owner: jsdeveloperr
• Created: 2024-10-17T12:42:37.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-10-17T18:42:17.000Z (4 months ago)
• Last Synced: 2024-12-15T01:33:56.378Z (2 months ago)
• Topics: atomic-design, react, react-atomic-design-example, react-atomic-organism, react-design-patterns, react19
• Language: TypeScript
• Homepage: https://medium.com/@abdulnasirolcan/mastering-modular-architecture-with-react-and-atomic-design-advanced-techniques-and-hands-on-93e649654a06
• Size: 150 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Atomic Design React + Vite Project



    



This project is an implementation of the Atomic Design methodology using React and Vite. It showcases a modular architecture for building scalable UI components, focusing on separation of concerns across different layers like atoms, molecules, and organisms.

## Getting Started

### Prerequisites

- Node.js (v14 or higher)

- NPM or Yarn or Pnpm

### Installing Dependencies

Install the required dependencies:

```bash

npm install

yarn install

pnpm install

```

### Running the Project

Start the development server with:

```bash

npm run dev

yarn dev

pnpm dev

```

### Building the Project

To create a production build, run:

```bash

npm run build

yarn build

pnpm build

```

### Atomic Design Structure

- **Atoms**: Small, reusable components like buttons, inputs, etc.

- **Molecules**: Combinations of atoms, like form inputs with labels.

- **Organisms**: Complex components built from molecules and atoms.

- **Templates**: Page templates that structure the layout.

- **Pages**: Full pages that are rendered in the app.

## License

This project is licensed under the MIT License.