Design System

Design system é a forma de alinharmos e reutilizarmos componentes definidos como padrões no projeto, ele é feito pelo time de design e implementado nos produtos no time de frontend, nesse projeto realizei a criação e utilização desse design system para melhorar meu conhecimento sobre os dois lados tanto do frontend quanto do design.

Artigo para mais informações: Artigo Alura

Storybook

Neste projeto, utilizaremos o Storybook, uma ferramenta que desempenha uma dupla função. Em primeiro lugar, serve como um servidor de desenvolvimento, permitindo testar os componentes criados de forma eficiente. Em segundo lugar, oferece uma estrutura robusta para a documentação, facilitando a criação de uma documentação interativa que se atualiza automaticamente conforme as alterações são feitas. https://storybook.js.org/

Artigo utilziado para auxilio de instalação do Storybook no Next.Js

Link tutorial

Curso utilizado:

Link curso

Rodando o Storybook, após a instalação

yarn storybook

Figma do projeto:

Ideia inicial do projeto como deveria ficar. Link Figma

Padrões utilizados: Link Figma padrões

Projeto do instrutor:

Projeto modelo inicial do instrutor. Link github