Ignite Lab - Do Figma ao React (Design System)

Sobre   |   Tecnologias e ferramentas utilizadas   |   Features   |   Design   |   Demo   |   Instalação e execução   |   Como contribuir   |   Contato   |   Licença

📃 Sobre

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.

🚀 Tecnologias e ferramentas utilizadas

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;

✨ Features

• 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;

🎨 Design

O design do projeto foi desenvolvido no Figma, e pode ser acessado através do link: Ignite Lab - Design System.

🎉 Demo

Clique nos links para acessar o design system e a interface do projeto:

🔧 Instalação e execução

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

💡 Como contribuir

• 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.

📲 Contato

Entre em contato comigo por e-mail ou pelo meu LinkedIn:

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

©2022 - Matheus Ribeiro