ignite-lab-design-system

For English Version click here.

Ignite lab Design System é um pequeno Design System que utiliza o Storybook para criar e gerenciar, dentro de um ambiente isolado, componentes de UI, páginas e guias de estilo, testes, melhorias de acessibilidade e solicitações HTTP simuladas.

Detalhes do projeto

Este projeto fez parte de um boot camp de 3 dias da Rocketseat, como forma de permitir aos alunos de frontend que trabalhassem com ferramentas de última geração, ao construir e gerenciar um Design System. No primeiro dia, os desenvolvedores projetaram um protótipo usando o Figma e o codificaram usando tecnologias como Vite, React, Typescript, Tailwind CSS, Radix UI e o próprio Storybook. Com nosso Design System pronto, codificamos uma página de login, aplicamos testes unitários, testes de acessibilidade e solicitações HTTP simuladas, usando Axios + Mock Service Worker.

English

Overview

Ignite lab Design System is a brief Design System using Storybook for building and managing -- inside an isolated environment -- UI components, pages, and style guides, while allowing tests, accessibility improvements, and mock HTTP requests.

This project was part of a 3-day boot camp by Rocketseat, as a way to allow frontend students to work with state-of-the-art tools and get to know how to build and manage a Design System. On day one, developers designed a prototype using Figma, then coded it using technologies such as Vite, React, Typescript, Tailwind CSS, Radix UI, and Storybook itself. Having our Design System ready, then coded a Sign In page, applied unit testing, accessibility testing, and mock HTTP requests using Axios + Mock Service Worker.

Screenshots

Sign In

Storybook

#1

#2