Esse projeto foi desenvolvido durante o Ignite Lab 3, um evento online produzido pela Rocketseat, durante os dias 10 a 14 de outubro de 2022.
Essa aplicação consiste em 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.
O Layout desenvolvido em conjunto com Rocketseat, para acessar no Figma:
-
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;
git clone https://github.com/ErickSilva2605/rocketseat-ignite-lab-design-system.git
cd rocketseat-ignite-lab-design-system
npm install
npm run dev
npm run storybook
npm run test-storybook
- Clone o projeto
- Cria uma nova branch com suas mudanças:
$ git checkout -b my-feature
- Salve suas mudanças e crie uma mensagem de commit falando o que fez:
$ git commit -m "feature: My new feature"
- Envie suas mudanças:
$ git push origin my-feature
Este repositório está sob licença MIT. Você pode ver o arquivo LICENSE para mais detalhes.
Esse projeto foi desenvolvido por @Erick Augusto, com os instrutores da Rocketseat, no #IgniteLabDesignSystem.
Se isso te ajudou, dê uma ⭐, isso vai me ajudar também! 😉