Ignite Lab #3 - Do Figma ao React

Evento disponibilizado pela RocketSeat

Tema: Design System com Figma, React e StoryBook

Projeto desenvolvido durante a semana de 10/10/2022 a 13/11/2022, onde pude ter contato com várias ferramentas para a construção de um Design System como, Figma, React, StoryBook e TailwindCSS.

A aplicação teve as seguintes etapas de construção:

Projeto no Figma
Design System - Criação dos componentes
Documentação no Storybook
Deploy automatizado com GitHub Actions
Criação do Front-End em Vite
Implementação de testes com Jest no Storybook.

Tecnologias e ferramentas utilizadas

Durante as aulas, pude conhecer como montar uma estrutura visual de um design system na prática com o Figma e como porta-lo para o código disponibilizando assim os dados para testes dos componentes via StoryBook, deploy automatizado com GitHub Actions e simulação do Front-End em Vite.

Projeto no Figma:

https://www.figma.com/file/YBOweIec7URKNExxWffzBz/Ignite-Lab-DS?node-id=0%3A1

Pagina de Login:

Instalação e uso

Clone o projeto e acesse a pasta

$ git clone https://github.com/filipeleonelbatista/design-sistem-bootcamp

Siga os passos abaixo:

# Instalar as Dependências
$ npm i

# Iniciar o Servidor em Modo de Desenvolvimento
$ npm run dev

# Iniciar o StoryBook
$ npm run storybook

Ferramentas Utilizadas

Vamos nos conectar 😉

Desenvolvido 💜 por Filipe Batista

filipeleonelbatista/design-sistem-bootcamp

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages