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

🌐 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