https://github.com/yuricavalini/ignite-design-system
Design system components project for React published in npm. Developed during Rocketseat's Ignite.
https://github.com/yuricavalini/ignite-design-system
changesets eslint github-actions radix-ui reactjs stitches storybookjs turborepo typescript
Last synced: 2 months ago
JSON representation
Design system components project for React published in npm. Developed during Rocketseat's Ignite.
- Host: GitHub
- URL: https://github.com/yuricavalini/ignite-design-system
- Owner: yuricavalini
- Created: 2022-11-27T23:07:00.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T00:56:36.000Z (about 2 years ago)
- Last Synced: 2023-03-04T16:56:41.906Z (about 2 years ago)
- Topics: changesets, eslint, github-actions, radix-ui, reactjs, stitches, storybookjs, turborepo, typescript
- Language: TypeScript
- Homepage: https://yuricavalini.github.io/ignite-design-system/
- Size: 4.88 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Ignite 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. You can find the components available and published on npm [yuriwlc-ignite-ui](https://www.npmjs.com/org/yuriwlc-ignite-ui).
Project developed during the **Ignite Program** on the ReactJS track taught by [Rocketseat](https://www.rocketseat.com.br/).
---
## ⚙️ Functionalities
- [x] Users can:
- [x] Browse and interact with the different reusable components available.
- [x] Components:
- [x] Text
- [x] Heading
- [x] Box
- [x] Button
- [x] TextInput
- [x] TextArea
- [x] Checkbox
- [x] Avatar
- [x] Multistep
---
## 🎨 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](https://git-scm.com), [Node.js](https://nodejs.org/en/) (Node.js version 16.18 is ideal).
Also it's nice to have an editor to work with the code like [VSCode](https://code.visualstudio.com/).
#### 🧭 Running the web application (Frontend)
```bash
# Clone this repository
$ git clone https://github.com/yuricavalini/ignite-design-system.git
# Access the project folder in your terminal/cmd
$ cd ignite-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:6006 - go to http://localhost:6006
```
---
## 🛠 Technologies
Main tools used in the construction of the project:
#### **Project** ([React](https://reactjs.org/) + [TypeScript](https://www.typescriptlang.org/))
- **[Phosphor-React](https://github.com/phosphor-icons/react)**
- **[Axios](https://axios-http.com/)**
- **[Radix-UI](https://www.radix-ui.com/)**
- **[Polished](https://polished.js.org/)**
- **[Stitches](https://stitches.dev/)**
- **[Storybook](https://storybook.js.org/)**
- **[Changeset](https://github.com/changesets/changesets)**
- **[TurboRepo](https://turborepo.org/)**
> See the full file [package.json](https://github.com/yuricavalini/ignite-design-system/blob/master/package.json)
**Utilities**
- Prototype: **[Figma](https://www.figma.com/)** → **[Prototype (Ignite-Desing-System)](https://www.figma.com/file/EXk1mDrrAh8kUty5USRC3n/Ignite-Call-(Community))**
- Standardization of project and code: **[Eslint](https://eslint.org/)** - **[EditorConfig](https://editorconfig.org/)**
- Editor: **[Visual Studio Code](https://code.visualstudio.com/)**
---
## 🧑🏻💻 Author
---
## 📝 License
This project is licensed under the [MIT](./LICENSE) license.
Made with ❤️ by Yuri Cavalini 👋🏻 [Contact me!](https://www.linkedin.com/in/yuricavalini/)
