https://github.com/sarah-ribeiro/ignite-lab-design-system

RocketSeat Ignite Lab #3 - Design System com Figma e React
https://github.com/sarah-ribeiro/ignite-lab-design-system

design-system figma github nodejs reactjs rocketseat storybook typescript vite vscode

Last synced: about 1 month ago
JSON representation

RocketSeat Ignite Lab #3 - Design System com Figma e React

Host: GitHub
URL: https://github.com/sarah-ribeiro/ignite-lab-design-system
Owner: Sarah-Ribeiro
Created: 2022-10-15T00:16:43.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2025-01-17T10:05:56.000Z (5 months ago)
Last Synced: 2025-01-17T11:20:24.503Z (5 months ago)
Topics: design-system, figma, github, nodejs, reactjs, rocketseat, storybook, typescript, vite, vscode
Language: TypeScript
Homepage:
Size: 4.23 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

![image](https://user-images.githubusercontent.com/12506432/195759740-3fd7e15d-afe7-4c8e-9e11-1767b2ac78bf.png)

Ignite Lab #3 - Do Figma ao React

Evento disponibilizado pela [RocketSeat](https://www.rocketseat.com.br/)

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

- [React.JS (Vite)](https://vitejs.dev/)
- [TypeScript](https://www.typescriptlang.org/)
- [Radix UI](https://www.radix-ui.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Storybook](https://storybook.js.org/)
- [Addon A11y](https://www.npmjs.com/package/@storybook/addon-a11y)
- [Github Actions](https://github.com/features/actions)
- [Jest](https://jestjs.io/pt-BR/)
- [MSW](https://mswjs.io/)

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.

![image](https://user-images.githubusercontent.com/12506432/195761826-2861aa90-156f-45d3-9ec3-6730930b3757.png)

---

Projeto no Figma:

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

Pagina de Login:

![image](https://user-images.githubusercontent.com/12506432/195759270-ae386b8b-4737-408b-9a74-f961af057651.png)

## Instalação e uso

Clone o projeto e acesse a pasta

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

Siga os passos abaixo:
```bash
# Instalar as Dependências
$ npm i

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

# Iniciar o StoryBook
$ npm run storybook
```
## Ferramentas Utilizadas