gustavohdab / ignite-lab-design-system

The project was to create a Design System within figma from scratch to code, using React and creating a complete documentation of the figma component with Storybook

Home Page:https://ignite-lab-design-system.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ignite-lab-design-system

image Project developed during ignite lab 03

I developed an application with Rocketseat, during the Ignite Lab, the project was to create a Design System within figma from scratch to code, using React and creating a complete documentation of the figma components that we created with all the variations that we would use in our dossier project. buttons, checkbox, heading(small, large, custom), text(small, large, custom), textInput... All this documented through Storybook, a react lib, used as a playground for UI components. It allows us developers to build and test components in isolation (outside the application, so project dependencies will not affect the behavior of the components).

The app itself was simple, it was a small form, but learning during the process was very high, mainly because the focus was on showing how powerful certain tools are in the market today.

It was very productive, I learned a lot of amazing and really useful things in everyday life as a Dev.

In addition to React, Storybook and Figma, we use TypeScript, Vite, Tailwind, Radix-ui, Clsx, and we also had experience with a Workflow (CI/CD) for automatic self-deploying of any future updates/changes to the code, for the Storybook.

Technologies and tools used.

  • Figma
  • TypeScritp
  • Tailwind
  • Storybook
  • Storybook addons (a11y) for easily Acessibility.
  • React
  • Radix-ui
  • Clsx
  • Workflows with yml. (CI/CD)

Pages

Page on vercel: https://ignite-lab-design-system.vercel.app/
Storybook: https://casualmente.github.io/ignite-lab-design-system/?path=/story/components-textinput--default
Figma: https://www.figma.com/file/yc61ktHVX0bquoabYlpy84/Ignite-Lab-Design-System?node-id=2%3A171

About

The project was to create a Design System within figma from scratch to code, using React and creating a complete documentation of the figma component with Storybook

https://ignite-lab-design-system.vercel.app/


Languages

Language:TypeScript 59.9%Language:JavaScript 37.4%Language:HTML 2.5%Language:CSS 0.2%