O projeto deste módulo foi a elaboração de um Design System construído em React JS e Storybook com o objetivo de documentar, centralizar e padronizar os componentes de uma interface. Além disso foi utilizado monorepo no qual é um modelo de arquitetura onde todas as partes da aplicação estão alocadas em um único repositório, utilização do Turborepo para maximizar a eficiência no gerenciamento destes subrepositórios e diminuir o tempo do processo de build guardando uma versão em cache. Ao final do desenvolvimento, foi realizado a publicação do projeto no Github (Github Pages) e disponibilizado todos os pacotes e tokens desenvolvidos no NPM.
Este é um projeto desenvolvido durante o Ignite módulo 5, um programa de aceleração de carreira da Rocketseat.
Link: Design System - Ignite UI;
Esse projeto foi desenvolvido com as seguintes principais tecnologias:
- ReactJS;
- Typescript;
- Radix-UI;
- Stitches
- Storybook
- TurboRepo
- NPM - Publicação dos pacotes;
- Vercel - CI/CD;
- Text
- Heading
- Box
- Button
- TextInput
- TextArea
- CheckBox
- Avatar
- MultiStep
- Toast
- Tooltip
Clone o projeto e acesse a pasta do mesmo.
$ git clone https://github.com/rogerrm95/design-system-ignite.git
$ cd design-system-ignitePara iniciá-lo, siga os passos abaixo:
# Instalar as dependências
$ npm install
# Iniciar o projeto
$ npm run devA documentação estará disponível no seu browser pelo endereço http://localhost:6007.
Você pode visualizar o layout do projeto através do link abaixo:
- Layout Web (Lembrando que você precisa ter uma conta no Figma).