github-automated-repos
Version:
The library, ReactJS, that gives you the power to control / automate your GitHub data, your projects on the portfolio / website, in your own GitHub in one place!
955 lines (630 loc) • 48.8 kB
Markdown
<!--Commit changes
-->
<!-- VISUALIZAR NO VSCODE CTRL + K V -->
<!-- BADGES https://www.youtube.com/watch?v=cRoBt6AZgjc
https://dev.to/envoy_/150-badges-for-github-pnk
BUILD BADGES
https://shields.io
ICONS
https://simpleicons.org/?q=react
EXEMPLO
<a href="https://devdigoarthur.notion.site/Map-a87c73417a064372b122bf448f4c6ed4"> <a/>
# JavaScript - Nome que aparece na Bag
# logo=JavaScript - Muda a logo vide <https://simpleicons.org/?q=react>
# color
=yellow - Define a cor da bag vide <https://shields.io>
# logoColor=white - Define a cor do icone
https://user-images.githubusercontent.com/59892368/219479919-5e84de50-6b7d-4d42-bb6d-a466b450db84.svg
-->
<!------------------------------------ -------------------->
<!------------------------------------ LANGUAGE BUTTONS-->
<!------------------------------------ -------------------->
<p align="right">
<a href="https://github.com/DIGOARTHUR/github-automated-repos#readme">
<img height="22" src="https://github-production-user-asset-6210df.s3.amazonaws.com/59892368/257623321-95c81f57-b751-4956-b0ab-7a804ae44506.svg" alt="English" border="0">
<a/>
<a href="https://github.com/DIGOARTHUR/github-automated-repos/blob/main/README_PT.md">
<img alt="Português" height="22" src="https://github-production-user-asset-6210df.s3.amazonaws.com/59892368/288551794-f50cff19-7ef7-41c4-81b5-b091ebd0f498.svg">
<a/>
</p>
<!------------------------------------ -------------------->
<!------------------------------------ PROJECT BANNER-->
<!------------------------------------ -------------------->
<img alt="banner_logo_github-automated-repos" src="https://github.com/user-attachments/assets/dfaf83e0-6f01-41c8-b54d-739a10d0b38c">
<br>
<br>
<!------------------------------------ -------------------->
<!------------------------------------SHIELDS PROJECT-->
<!------------------------------------ -------------------->
<div align="center">
[]( )
</div>
<!------------------------------------ ---------------------------->
<!------------------------------------ PROJECT SHORT DESCRIPTION-->
<!------------------------------------ --------------------------->
<p align="center">
<br>
✅ github-automated-repos is the library,<code>ReactJS</code>, that gives you the power to control your GitHub data, your projects on the portfolio / website,
in your own GitHub in one place!</i>
<br>
<br>
❌ project.js files ( edit code )
❌ GitHub API ( no data control )
</p>
<p align="center">
<img alt="github-automated-repos library" src="https://github.com/user-attachments/assets/78ac832b-9e01-4fc2-9bdd-32b533e2ed83">
</p>
<!---
• Install lib `github-automated-repos` ➥
<br>
• Configure the useGitHubAutomatedRepos hook with your GitHubUsername and KeyWord
<br>
• Ready! Now all projects can be managed on their own `GitHub`, in the `Topics field`.
-->
<!------------------------------------ -------------------->
<!------------------------------------LINKS-->
<!------------------------------------ -------------------->
<p align="center">
<a href="https://github-automated-repos.vercel.app"><strong>https://github-automated-repos.vercel.app</strong></a>
<br>
</p>
<p align="center">
<a href="CONTRIBUTING.md">Contributing Guidelines</a>
<br>
<br>
</p>
<br>
<br>
<!------------------------------------ -------------------->
<!------------------------------------SUMMARY-->
<!------------------------------------ -------------------->
<p align="center" alt="github-automated-repos summary">
<a href="https://github.com/DIGOARTHUR/github-automated-repos#--sobre-a-aplicação-">
<img src="https://github.com/user-attachments/assets/fa24923b-77a4-4ac5-ab83-215120c74296" alt="About Library" >
<a/>
<a href="https://github.com/DIGOARTHUR/github-automated-repos#import-1">
<img src="https://github.com/user-attachments/assets/06d1ba3d-76be-40e2-a803-87f9a8151447" alt="Hook Import" border="0">
<a/>
<a href="https://github.com/DIGOARTHUR/github-automated-repos#fill-in-the-fields-in-the-github-repository-1">
<img src="https://github.com/user-attachments/assets/680108d9-5dc6-4767-aa1a-50bc3485943e" alt="Fill the fields of the repository (GitHub)" border="0">
<a/>
<a href="https://github.com/DIGOARTHUR/github-automated-repos#code-example-1">
<img src="https://github.com/user-attachments/assets/f86d5d29-821b-4f2f-b16b-df6fa5db5f82" alt="Code Example" border="0">
<a/>
</p>
<!------------------------------------ -------------------->
<!------------------------------------GETTING START-->
<!------------------------------------ -------------------->
----
# Getting Start [ 6 steps ]
## 1. Installation
```shell
npm install github-automated-repos
```
```shell
yarn add github-automated-repos
```
<div align="center">
</div>
## 2. Config. ReactQuery (ViteJS)
> [!IMPORTANT]
> Don’t forget to configure the `React Query`!!! See NextJS code example. [Code Example](https://github.com/DIGOARTHUR/github-automated-repos/tree/main?tab=readme-ov-file#code-example-1)
```tsx
import { ReactQueryProvider } from 'github-automated-repos'
createRoot(document.getElementById('root')!).render(
<ReactQueryProvider >
<StrictMode>
<App />
</StrictMode>
</ReactQueryProvider>
,
)
```
<div align="center">
</div>
## 3. Using hook ( useGitHubAutomatedRepos() )
> [!CAUTION]
> :exclamation::exclamation: Don't forget to fill in the fields: your GitHubUsername and keyWord (chosen by you).
```typescript
import { useGitHubAutomatedRepos } from "github-automated-repos";
const { data, isLoading, isLoadingError } = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");
```
<div align="center">
</div>
## 4. Banner
> Insert banner, layout images to represent your project. Types are `.PNG` and `.SVG`. For this to be possible, the name of the image file must contain `banner`in the name. Insert your images in the following path: Ex.:
```
└── public
└── `bannerXYZ.png`
└── `bannerABC.svg`
├── ...
```
<div align="center">
<img alt="dashgo_layout" height="150" src="https://github.com/DIGOARTHUR/github-automated-repos/assets/59892368/68f59bce-0d8f-4cea-81c9-01596d97f47e">
<img alt="dashfincaneiro_layout" height="150" src="https://github.com/DIGOARTHUR/github-automated-repos/assets/59892368/86dac1db-d04a-462b-a2ea-f00db264dbad">
<img alt="proffy_layout" height="150" src="https://github.com/DIGOARTHUR/github-automated-repos/assets/59892368/bfcd0785-ce8a-4327-8b8b-5de495528c3f">
</div>
<div align="center">
</div>
## 5. Choose the repositories and fill in the Topics field with the keyword you determined.
> [!IMPORTANT]
> To insert stack names in the topics field, see web documentation or the table below. > [Stack Icons](https://github-automated-repos.vercel.app)
<div align="center" alt='stackIcons List'>
</div>
## StackIcons Table
<details>
<br/>
<br/>
<div align='center'>
| Logo | Stack Name | Logo | Stack Name | Logo | Stack Name | Logo | Stack Name |
| :---: | --- | :---: | --- | :---: | --- | :---: | --- |
|  | `androidstudio` |  | `angular` |  | `arduino` |  | `aws` |
|  | `babel` |  | `bash` |  | `bitbucket` |  | `blender` |
|  | `bootstrap` |  | `c` |  | `canva` |  | `clion` |
|  | `cpp` |  | `csharp` |  | `css3` |  | `dart` |
|  | `denojs` |  | `django` |  | `docker` |  | `dotnetcore` |
|  | `eclipse` |  | `elixir` |  | `eslint` |  | `expo` |
|  | `express` |  | `figma` |  | `firebase` |  | `flask` |
|  | `flutter` |  | `gatsby` |  | `gimp` |  | `git` |
|  | `go` |  | `googlecloud` |  | `graphql` |  | `grunt` |
|  | `gulpjs` |  | `haskell` |  | `heroku` |  | `html5` |
|  | `husky` |  | `inkscape` |  | `java` |  | `javascript` |
|  | `jenkins` |  | `jest` |  | `jira` |  | `jquery` |
|  | `jupyter` |  | `kotlin` |  | `kubernetes` |  | `laravel` |
|  | `linux` |  | `lua` |  | `markdown` |  | `materialui` |
|  | `mongodb` |  | `mysql` |  | `nestjs` |  | `netcore` |
|  | `nextjs` |  | `nodejs` |  | `npm` |  | `objectc` |
|  | `pearl` |  | `php` |  | `postgresql` |  | `prettier` |
|  | `prisma` |  | `pycharm` |  | `python` |  | `r` |
|  | `rails` |  | `raspberrypi` |  | `react` |  | `reacticons` |
|  | `redux` |  | `ruby` |  | `rust` |  | `salesforce` |
|  | `sass` |  | `scala` |  | `sequelize` |  | `spring` |
|  | `sqlite` |  | `storybook` |  | `styledcomponents` |  | `swagger` |
|  | `switch` |  | `tailwind` |  | `typescript` |  | `visualstudio` |
|  | `visualstudiocode` |  | `vitejs` |  | `vuejs` |  | `yarn` |
</div>
</details>
<div align="center">
</div>
## 6. ✅Ready! JSON - Data from repositories chosen by you!
> [!TIP]
> Customize your cards your way
<details>
<summary>JSON - DATA</summary>
### Data Example ~ console.log(data) ~
```javascript
Array(4)
0
:
{id: 517152367, name: 'Dashgo', html_url: 'https://github.com/DIGOARTHUR/Dashgo', description: 'IGNITE - Trilha ReactJS/ - Neste projeto é aplicad…ate, Components, Props. Recursos do JS como: Map.', topics: Array(7), …}
1
:
{id: 482667387, name: 'DashBoard-Financeiro', html_url: 'https://github.com/DIGOARTHUR/DashBoard-Financeiro', description: 'IGNITE - Trilha ReactJS/ Chapter II - Esta aplicaç…mpanhamento de valores de entrada, saída e total.', topics: Array(6), …}
2
:
{id: 412849316, name: 'Task.TODO', html_url: 'https://github.com/DIGOARTHUR/Task.TODO', description: 'IGNITE - Trilha ReactJS/ - Este projeto aborda con…Filter e Math, Spread. E para estilização o SASS.', topics: Array(7), …}
3
:
{id: 355616217, name: 'Move.it', html_url: 'https://github.com/DIGOARTHUR/Move.it', description: 'NLW#04 - Rocketseat - Utilizando a técnica Pomodor… o objetivo é executar a tarefa do seu interesse.', topics: Array(8), …}
length
:
4
[[Prototype]]
:
Array(0)
```
</details>
<details>
<summary>IN PAGE WEB</summary>
> [!TIP]
> Customize your cards your way!
</details>
</br>
---
</br>
<!------------------------------------SHIELDS STACKS-->
<!--
<a href="https://devdigoarthur.notion.site/Map-a87c73417a064372b122bf448f4c6ed4"> <a/>
<a href="https://devdigoarthur.notion.site/Context-API-610980ad0db948709d364efc919a454e"> <a/>
<a href="https://devdigoarthur.notion.site/Estado-e7c7508cb6bd4d81984ba5e8e50eab67"> <a/>
<a href="https://devdigoarthur.notion.site/Componentes-bc3ca1ebd97d4ccc8d11e6ab668eeb73"> <a/>
-->
<!------------------------------------TOOLS-->
<!--
#### Tools:
<a href="https://code.visualstudio.com/"><img alt="Vscode" width="50" height="50" src="https://user-images.githubusercontent.com/59892368/149663512-3f83da57-bdfe-4cef-bcc2-feb304a738ff.png"><a/>
<a href="https://git-scm.com/"><img alt="Git" width="50" height="50" src="https://user-images.githubusercontent.com/59892368/149677999-f5947f0b-e535-4ba2-911c-1c5926045c35.png"><a/>
<hr>
-->
<!-------------------------------------------------- -->
<!------------------------------------------ DESCRIPTION-->
<!-------------------------------------------------- -->
# <img alt="skills" width="40" height="40" src="https://user-images.githubusercontent.com/59892368/148622497-164365e8-f6b0-4f40-bc75-a0ed4da6059b.png"> About Library <!---write here : talk a little about project: what's does, example. -->
> This library automates the view your GitHub projects on your porfolio / website in one place. But how? Make the code configuration only once in your application with github-automated-repos, and manage the view of your projects on GitHub in the Topics field. Choose which project will be seen, and you can even customize your project card, for example, with a representative icon and show which stacks were used. All in one place!
| Control your projects |
| :-------------------------------------------------------------------: |
|  |
| Customize and represent through icons. |
| :--------------------------------------------------------------: |
| |
| In one place |
| :-------------------------------------------------------------------: |
| |
</br>
---
</br>
<!------------------------------------------------>
<!------------------------------------ IMPORT -->
<!-------------------------------------------- -->
# <img alt="Hook Import" height="30" src="https://github.com/user-attachments/assets/b7c52fa3-ba47-4f19-8dd3-ccd9d6395b76"> Import Library <!---write here : demonstration of the application layout. -->
> The github-automated-repos library imports 4 resources: hook `useGitHubAutomatedRepos`, `ReactQueryProvider` , `StackIcons` component and `StackLabels` component.
```jsx
import { useGitHubAutomatedRepos, ReactQueryProvider, StackIcons, StackLabels } from 'github-automated-repos';
```
<details>
</p>
<br>
### The package imports 4 elements:
- `ReactQueryProvider` tool used to optimize the requirements of the API. Don’t forget to set it up! [Code Example](https://github.com/DIGOARTHUR/github-automated-repos/tree/main?tab=readme-ov-file#code-example-1)
- `useGitHubAutomatedRepos` hook responsible for automating the return of data from repositories. This hook takes two parameters: GitHubUsername & keyword. The return is an array of objects containing 7 properties: id, banner, html_url, homepage, topics, name and description.
```tsx
const { data, isLoading, isLoadingError } = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");
```
- #### return data example:
``` javascript
[
{
banner:"https://raw.githubusercontent.com/DIGOARTHUR/github-automated-repos/main/src/assets/images/banner.png"
description: "The library that automates, in one place, the administration of your github projects on your website."
homepage: "https://github-automated-repos.vercel.app"
html_url: "https://github.com/DIGOARTHUR/github-automated-repos"
id: 585693873
name: "github-automated-repos"
topics: (8) ['automated', 'deploy', 'github', 'library', '
}
]
```
- #### isLoading: while the data is not loaded, isLoading returns TRUE.
```jsx
if (isLoading) {
return <div> loading...</div>
}
```
- #### isLoadingError: will be true if the query failed while fetching for the first time.
<br>
- `StackIcons` The component returns, based on the iteration of the topic array that is contained in data, icons of the stacks used in your project. Enter the stacks used in your repository's topic field.. Check the [Stack Icons](https://github-automated-repos.vercel.app/documentation/stackIcons) tab!
```jsx
data?.map((item) => {
return (
...
{item.topics.map((icon, index) => {
return (
<StackIcons key={index} itemTopics={ icon } className={ } />
}
...
```
- #### Render component StackIcons example:
<div align="center">
</div>
<br>
<br>
- `StackLabels` component returns, based on the iteration of the topics array that is contained in data, labels of the stacks used in your project. Insert the stacks used in the topics field of your repository. Check the [Stack Icons](https://github-automated-repos.vercel.app/documentation/stackIcons) tab!
```jsx
data.map((item) => {
return (
...
{item.topics.map((icon, index) => {
return (
<StackLabels key={ index } itemTopics={ icon } className={ } />
}
...
```
- #### Render component StackLabels example:
<div align="center">
     
</div>
<br>
<br>
</div>
</details>
</br>
---
</br>
<!------------------------------------ -------------------->
<!------------------------------------ FILL IN THE FIELDS -->
<!------------------------------------ -------------------->
# <img alt="skills" width="40" height="40" src="https://github.com/user-attachments/assets/403167b1-57eb-4ee9-818d-a591c6885f91"> Fill in the fields in the github repository
> [!IMPORTANT]
> Pay attention to filling in each field of your repository on GitHub.
<details>
<br/>
- `banner`: this property returns a .PNG e .SVG image. For this to be possible, the name of the image file must contain `banner`in the name. Insert your images in the following path: Ex.:
```
└── public
└── `bannerXYZ.png`
└── `bannerABC.svg`
├── ...
```
<div align="center">
<img alt="dashgo_layout" height="150" src="https://github.com/DIGOARTHUR/github-automated-repos/assets/59892368/68f59bce-0d8f-4cea-81c9-01596d97f47e">
<img alt="dashfincaneiro_layout" height="150" src="https://github.com/DIGOARTHUR/github-automated-repos/assets/59892368/86dac1db-d04a-462b-a2ea-f00db264dbad">
<img alt="proffy_layout" height="150" src="https://github.com/DIGOARTHUR/github-automated-repos/assets/59892368/bfcd0785-ce8a-4327-8b8b-5de495528c3f">
</div>
- `id`: repository identification number. Used as parameter in the key tag. ( *This field does not need to be filled in.* )
- `html_url`: repository link. Used as the link of access. ( *This field does not need to be filled in.* )
- `homepage`: it's the access link to the built page, page deploy. About / Website of your GitHub.
<div align="center">
<img alt="homepage_Props" src="https://user-images.githubusercontent.com/59892368/219116735-a026d9b9-f5b9-4389-b8f1-619db2488368.png">
</div>
<br>
- `topics`: array that brings information about the icons in [Stack Icons](https://github-automated-repos.vercel.app/stackicons). Used in both StackLabels e StackIcon components. It is in this field that is passed the key configured in the hook. Refers to the field About / Topics of your GitHub.
<div align="center">
<img alt="topics_Props" src="https://github.com/user-attachments/assets/00b55402-c64b-49c4-982f-8b90a6c12ce8">
</div>
<br>
- `name`: this is the name of the repository. Refers to the field Settings / General / Repository name of your GitHub.
<div align="center">
<img alt="name_Props" src="https://user-images.githubusercontent.com/59892368/219117097-43db2497-7f62-428e-85c6-ef3656da4cd2.png">
</div>
<br>
- `description`: this is the description given to your repository. Refers to the About /Description field of your GitHub.
<div align="center">
<img alt="description_Props" src="https://user-images.githubusercontent.com/59892368/219117260-5bdb1fbb-c58b-4ad9-938a-068b58c72f27.png">
</div>
</details>
</br>
---
</br>
# Code Example
## <img alt="NextJS" width="50" height="50" src="https://github.com/DIGOARTHUR/github-automated-repos/assets/59892368/eb3732e9-d3a9-4f9f-b706-8969557681aa"> React Query Config.
## <img alt="ViteJS" width="35" height="35" src="https://github.com/DIGOARTHUR/github-automated-repos/assets/59892368/05cf8a94-895c-4249-8636-f1d2a0ea165b"> ViteJS `main{.tsx/.jsx}`
> Import ReactQueryProvider component < main.tsx > - TOP OF THE CODE
```tsx
import { ReactQueryProvider } from 'github-automated-repos'
```
> Use the `ReactQueryProvider` component < main.tsx >
```tsx
createRoot(document.getElementById('root')!).render(
<ReactQueryProvider>
<StrictMode>
<App />
</StrictMode>
</ReactQueryProvider>
,
)
```
## <img alt="NextJS" width="35" height="35" src="https://github.com/DIGOARTHUR/github-automated-repos/assets/59892368/6b213e2e-213a-489d-bbda-1dec9dcda585"> NextJS `layout{.tsx/.jsx}`
> [!IMPORTANT]
> If the app does not work, type the `'use client;'` at the top of the `page.tsx` file and `layout.tsx`.
> Import ReactQueryProvider component < layout.tsx > - TOP OF THE CODE
```tsx
'use client';
import { ReactQueryProvider } from "github-automated-repos";
```
> Use the `ReactQueryProvider` component < layout.tsx >
```tsx
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<ReactQueryProvider>
{children}
</ReactQueryProvider>
</body>
</html>
);
}
```
<div align="center">
</div>
## `App{.tsx/.jsx}` or `Page{.tsx/.jsx}`
> [!CAUTION]
> :exclamation::exclamation: Don't forget to fill in the fields: your GitHubUsername and keyWord (determined by you).
```javascript
const { data, isLoading, isLoadingError } = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");
```
#### <a href="https://typicode.github.io/husky/#/"><img alt="Javascript" width="35" height="35" src="https://user-images.githubusercontent.com/59892368/210762527-ae3afe1f-fe36-46a9-98ad-35dbae4d1adf.svg"><a/> <a href="https://typicode.github.io/husky/#/"><img alt="Javascript" width="35" height="35" src="https://user-images.githubusercontent.com/59892368/219095611-551d532a-30fc-4873-b00e-0a8bbf8bb5ec.svg"><a/>
> [!IMPORTANT]
> If the `NextJS` app does not work, type the `'use client;'` at the top of the `page.tsx` file and `layout.tsx`.
> TOP OF THE CODE < page.tsx >
```tsx
//'use client';
import { StackIcons, StackLabels, useGitHubAutomatedRepos } from "github-automated-repos";
````
> INSIDE IN FUNCTION < page.tsx >
```tsx
{/*CSS STYLE <can be remove after>*/ }
const styleCSS: { [key: string]: React.CSSProperties } = {
div: {
display: 'flex',
alignItems: 'center',
flexDirection: 'column'
},
logo: {
width: '60rem',
},
section: {
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
marginBottom: '100px',
},
name: {
fontSize: '30px',
fontFamily: 'cursive'
},
bannerDiv: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
gap: "2px",
},
banner: {
width: "250px"
},
componentsDiv: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
gap: "10px"
},
description: {
width: '700px'
},
LinksDiv: {
display: 'flex',
gap: '10px',
fontWeight: '500',
color: '#646cff',
textDecoration: 'inherit',
}
}
{/* ---------- HOOK ------ */ }
const { data, isLoading } = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");
if (isLoading) {
return <div> loading...</div>
}
return (
<div style={styleCSS.div}>
<img style={styleCSS.logo} src='https://github.com/user-attachments/assets/bb8f5688-6896-4e42-ac91-81f93fbeece0'></img>
{
data?.map((item, index) => {
return (
<section style={styleCSS.section} key={index}>
{/*Name / Title*/}
<h2 style={styleCSS.name}>{item.name}</h2>
{/*Banner*/}
<div style={styleCSS.bannerDiv}>
{
item.banner.map((item, index) => {
return (
<img style={styleCSS.banner} key={index} src={item}></img>
)
})
}
</div>
{/*Topics - Components StackIcons & StackLabels*/}
<div style={styleCSS.componentsDiv}>
{item.topics.map((icon, index) => {
return (
<div key={index}>
<StackIcons className="stack_Icon" itemTopics={icon} />
<StackLabels className="stack_Label" itemTopics={icon} />
</div>
)
})}
</div>
{/*Description*/}
<p style={styleCSS.description} >{item.description}</p>
<div style={styleCSS.LinksDiv}>
{/*Homepage*/}
<a href={item.homepage}>
<h3>🔗Homepage</h3>
</a>
{/*html_url*/}
<a href={item.html_url}>
<h3>🔗Repository</h3>
</a>
</div>
</section>
)
})
}
</div>
);
```
<br>
---
<br>
**Love github-automated-repos? Give our repo a star ⭐ [⬆️](https://github.com/DIGOARTHUR/github-automated-repos) .**
`based in:` [Api Github](https://docs.github.com/en/rest/repos/repos?apiVersion=2022-11-28#get-a-repository)
`by`: [@digoarthur](https://www.linkedin.com/in/digoarthur/) <a href="https://youtu.be/dQw4w9WgXcQ?si=VBzREBlncKuPTYBs"> <img src="https://github.com/user-attachments/assets/f45f0115-761e-4207-a9d9-dddacfb5b96b" alt="Brazil Flag" width="20" /> </a>
<!------------------------------------LIST: STACKS , LIBS & TOOLS ... -->
<!---
## <img alt="skills" width="40" height="40" src="https://user-images.githubusercontent.com/59892368/197614534-e12fb94a-b5cf-44ff-8d57-debad7299b0b.png"> Stacks for construction <!---write here: learned concepts; -->
<!---
### API
<a href="https://docs.github.com/en/rest/repos/repos?apiVersion=2022-11-28#get-a-repository"> <a/>
### Language
<a href="https://devdigoarthur.notion.site/Map-a87c73417a064372b122bf448f4c6ed4"> <a/>
### Framework / Lib
<a href="https://reactjs.org"> <a/>
### Package Manager/ Libs
<a href="https://yarnpkg.com"> <a/>
* [`Eslint`](https://www.npmjs.com/package/eslint)
* [`Prettier`](https://www.npmjs.com/package/prettier)
* [`Husky`](https://www.npmjs.com/package/husky)
* [`Lint-staged`](https://www.npmjs.com/package/lint-staged)
* [`Commitizen`](https://www.npmjs.com/package/commitizen)
### Versioning
<a href="https://git-scm.com"> <a/>
### IDE
<a href="https://code.visualstudio.com"> <a/>
-->