Sobre | Tecnologias e ferramentas utilizadas | Features | Design | Demo | Instalação e execução | Como contribuir | Contato | Licença
Este é o projeto desenvolvido durante o Ignite Lab, um evento online produzido pela Rocketseat, durante os dias 10 a 14 de outubro de 2022.
O projeto consiste na criação e implementação de um Design System. Para isso, inicialmente foram desenvolvidos os componentes e suas variações no Figma, e em seguida implementados no código, utilizando o React e a ferramenta Storybook para a documentação dos componentes.
Este projeto foi desenvolvido com as seguintes tecnologias e ferramentas:
-
Figma: ferramenta de prototipação e design de interfaces.
-
React: uma biblioteca JavaScript de código aberto com foco em criar interfaces de usuário (frontend) em páginas web. É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de desenvolvedores individuais. É utilizado nos sites da Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart e outros;
-
TypeScript: um super conjunto da linguagem JavaScript que fornece classes, interfaces e tipagem estática opcional. Utilizado em conjunto com React no frontend web;
-
Vite.JS: ferramenta de construção para front-end moderna que oferece uma experiência de desenvolvimento mais rápida e mais eficiente;
-
TailwindCSS: um framework CSS muito flexível que permite criar rapidamente interfaces de usuário complexas e responsivas;
-
Storybook: uma ferramenta voltada para o desenvolvimento de componentes de interface de usuário isolados, usada por empresas como GitHub, Dropbox, airbnb, Mozilla, entre outras;
-
RadixUI: um conjunto de componentes React acessíveis, flexíveis e com baixo acoplamento, que podem ser usados para construir interfaces de usuário complexas.
-
Visual Studio Code: um editor de código-fonte desenvolvido pela Microsoft para Windows, Linux e macOS, recomendado para o desenvolvimento de aplicações web;
- Criação de tokens personalizados no design system utilizando o TailwindCSS;
- Implementação do design pattern de composição no React (Compound Component);
- Documentação dos componentes e suas variantes no Storybook;
- CI/CD: configuração do deploy do Storybook por meio de um workflow do Github Actions para o Github Pages;
- Utilização do storybook-addon-a11y para testar os componentes em relação aos padrões de acessibilidade na web;
- Implementação de testes de interações automatizados utilizando a integração do Jest com o Storybook e o Test Runner;
- Implementação de uma API Mock com o Mock Service Worker para simular requisições HTTP, por meio do MSW Storybook Addon;
O design do projeto foi desenvolvido no Figma, e pode ser acessado através do link: Ignite Lab - Design System.
Clique nos links para acessar o design system e a interface do projeto:
Para baixar o código-fonte do projeto em sua máquina, primeiramente terá que ter instalado o Git.
Com o Git instalado, em seu terminal execute o seguinte comando:
git clone https://github.com/mathrb22/IgniteLab-Design-System.git
Para instalar as dependências e executar o projeto terá que ter instalado em sua máquina o Node.js, que vem acompanhado do NPM. Com ele instalado:
-
Instale as dependências do projeto:
npm install
-
Execute o projeto:
npm run dev
-
Execute a interface do Storybook:
npm run storybook
- Faça um fork desse repositório;
- Crie um branch para a sua feature:
git checkout -b minha-feature
; - Faça um commit com suas alterações:
git commit -m 'feat: Minha nova feature'
; - Faça um push para o seu branch:
git push origin minha-feature
; - Faça um pull request com sua feature;
Pull requests são sempre bem-vindos. Em caso de dúvidas ou sugestões, crie uma issue ou entre em contato comigo.
Entre em contato comigo por e-mail ou pelo meu LinkedIn:
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.