Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pedrohvfernandes/maratona-ignite-lab-design-system

Projeto feito através da @Rocketseat, junto com o instrutor @diego3g. Design System do design ao codigo
https://github.com/pedrohvfernandes/maratona-ignite-lab-design-system

cicd clsx css design-system figma patterns patterns-design radix radix-ui react storybook tailwindcss typescript workflow

Last synced: 6 days ago
JSON representation

Projeto feito através da @Rocketseat, junto com o instrutor @diego3g. Design System do design ao codigo

Awesome Lists containing this project

README

        

# Maratona Ignite Lab - Rocketseat



## Sobre:

### Do design ao código(Design System), com a padronização tanto no design UI/UX, quanto de componentes com a lib Storybook de um design simples de um form, mas que mesmo sendo o mais simples possível, da para extrair o máximo de padronização(patterns) dos componentes e fazer o storybook ficar super recheado e ter um centro dos componentes, para que o time de devs não fique perdidos com qual cor, tamanho, fonte etc usar em um botão por exemplo. E como boa pratica foi feito um CI/CD para que cada atualização no storybook é feito um build e o deploy no github pages automaticamente utilizando o Github Actions.

## 🔖 Layout, prototipo e demonstração de como sera feito a aplicação

- [Prototipo feito por cada um do evento](https://www.figma.com/file/TAAgEC4ouRzSkROvSXyqRL/Estrutura-visual-do-Design-System---Maratona-Ignite-lab?node-id=0%3A1)

## 🌐 Demonstração do app na web:

### Web:

## 🌐 Demonstração do StoryBook:

### Web:

## Deploy

- Deploy do app Web(Vercel): https://maratona-ignite-lab-design-system.vercel.app
- Deploy do Storybook(Github pages): https://pedrohvfernandes.github.io/maratona-ignite-lab-design-system/

## ✨Tecnologias:

### Principais Stacks:

- Figma
- React
- TypeScript
- Node(Npm)
- Vite
- Storybook
- Workflows with yml. (CI/CD)

### Secundarias Stacks:

- TailwindCSS
- RadixUi
- Phosphor icons
- Clsx
- Storybook addons (a11y) for easily Acessibility.

## Getting started

#### Para clonar o projeto e abrir na pasta raiz dele.
```
git clone https://github.com/PedrohvFernandes/maratona-ignite-lab-design-system
cd maratona-ignite-lab-design-system
```

#### Inicie o comando abaixo para instalar as dependencias
```
npm install
```

#### Inicie o comando abaixo para ver a interface localmente(Localhost:${PORTA})
```
npm run dev
```

#### Inicie o comando abaixo para ver a interface do StoryBook localmente(Localhost:${PORTA})
```
npm run storybook
```

## 👨‍💻 Autor:

- Linkedin: https://www.linkedin.com/in/pedro-henrique-vieira-fernandes
- Git: https://github.com/PedrohvFernandes
- Instagram: pedro17fernandes
- portfolio: PedrohvFernandes.github.io