yuricavalini / ignite-lab-design-system

Design system components project for React. Developed during Rocketseat's Ignite Lab 03.

Ignite Lab Design System - Concluded 🚀

About • Functionalities • Layout • How to run • Technologies • Author • License

💻 About the project

Project in ReactJS developed with Vitejs. Design System project that provides visual components for creation of interfaces.

Project developed during the NLW (Next Level Week) taught by Rocketseat. The NLW is an online experience with a lot of practical content, challenges and hacks where the content is available for one week.

---

⚙️ Functionalities

• Users can:
  • Browse and interact with the different reusable components available.
• Components:
  • Text
  • Heading
  • Button
  • Checkbox
  • Input

---

🎨 Layout

The application layout is available in Figma:

Web

---

🚀 How to run the project

This is a frontend project.

Prerequisites

Before starting, you will need to have the following tools installed on your machine: Git, Node.js(Node.js version 16.14.2 is ideal). Also it's nice to have an editor to work with the code like VSCode.

🧭 Running the web application (Frontend)

# Clone this repository
$ git clone https://github.com/yuricavalini/ignite-lab-design-system.git

# Access the project folder in your terminal/cmd
$ cd ignite-lab-design-system

# Install the dependencies
$ npm install

# Open a terminal and run the server in development mode
$ npm run dev

# The application will open on port:5173 - go to http://localhost:5173

# Open another terminal and run the server in development mode
$ npm run storybook

# The application will open on port:6006 - go to http://localhost:6006

# Open another terminal and run the server in development mode
$ npm run test-storybook

# The test result will be shown in the terminal

---

🛠 Technologies

Main tools used in the construction of the project:

Website (React + TypeScript)

• Phosphor-React
• Axios
• Radix-UI
• Clsx
• PostCSS
• TailwindCSS
• Storybook
• Jest
• Testing-Library
• MSW

See the full file package.json

Utilities

• Prototype: Figma → Prototype (Ignite-Lab-Desing-System)
• Standardization of project and code: Eslint - Commit-msg-linter - Husky - Lint-staged - EditorConfig
• Editor: Visual Studio Code

---

🧑🏻‍💻 Author

_{Yuri Cavalini} 🚀

---

📝 License

This project is licensed under the MIT license.

Made with ❤️ by Yuri Cavalini 👋🏻 Contact me!