fellipeutaka / iglab-design-system

🎨 My first Design System made in Ignite Lab by Rocketseat 🚀💜

Ignite Lab - Design System

Ignite Lab | Project | Technologies | Layout | How to use | How to contribute | License | Storybook live demo

ℹ️ What's Ignite Lab?

A 100% online, free and hands-on event focused on the front-end, for those who enjoy React and want to specialize even more in this awesome library.

Stages

• Stage 1: Base Building - ✔️
  • Starting Design System on Figma.
• Stage 2: Coding - ✔️
  • Creating React components and configuring Storybook.
• Stage 3: Deploy - ✔️
  • Configuring CI/CD with Github Actions and deploying Storybook on Github Pages.

💻 Project

Creating my first Design System with accessible and reusable components, using Composition and Polymorphism pattern.

🚀 Technologies

This project was developed with the following technologies:

• TypeScript
• Node.js
• React
• Vite.js
• Storybook
• Stitches
• Radix
• Jest
• MSW (Mock Service Worker)

🔖 Layout

To access the layout use Figma.

ℹ️ How To Use

To clone and run this application, you'll need Git, Node.js + Yarn installed on your computer.

From your command line:

Install Front-end

# Clone this repository
$ git clone https://github.com/fellipeutaka/iglab-design-system

# Install dependencies
$ yarn

# Start server
$ yarn dev

# running on port 5173

Install Storybook

# Clone this repository
$ git clone https://github.com/fellipeutaka/iglab-design-system

# Install dependencies
$ yarn

# Start storybook
$ yarn storybook

# running on port 6006

🤔 How to contribute

1. Fork this repository.
2. Create a branch: git checkout -b <branch_name>.
3. Make your changes and commit them: git commit -m '<commit_message>'
4. Push to original branch: git push origin <project_name> / <local>
5. Create the pull request.

Or, see the GitHub documentation on how to create a pull request.

📝 License

This project is under the MIT license. See the LICENSE for details.

Made with ♥ by Fellipe Utaka 👋 Get in touch!