About โข Functionalities โข Layout โข How to run โข Technologies โข Author โข License
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.
- Users can:
- Browse and interact with the different reusable components available.
- Components:
- Text
- Heading
- Button
- Checkbox
- Input
The application layout is available in Figma:
This is a frontend project.
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.
# 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
Main tools used in the construction of the project:
Website (React + TypeScript)
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
This project is licensed under the MIT license.
Made with โค๏ธ by Yuri Cavalini ๐๐ป Contact me!