Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/pedrohvfernandes/maratona-ignite-lab-design-system
- Owner: PedrohvFernandes
- Created: 2022-10-12T01:01:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-14T21:21:16.000Z (over 2 years ago)
- Last Synced: 2024-11-19T22:48:34.301Z (2 months ago)
- Topics: cicd, clsx, css, design-system, figma, patterns, patterns-design, radix, radix-ui, react, storybook, tailwindcss, typescript, workflow
- Language: TypeScript
- Homepage: https://pedrohvfernandes.github.io/maratona-ignite-lab-design-system/
- Size: 8.44 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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