/iglab-design-system

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

Primary LanguageTypeScriptMIT LicenseMIT

Ignite logo

Ignite Lab - Design System

Repository size Made by Fellipe Utaka GitHub last commit License Stargazers

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.

Sign In screen UI

🚀 Technologies

This project was developed with the following technologies:

🔖 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!