An open API service indexing awesome lists of open source software.

https://github.com/jonathan-r-andrade/tryunfo


https://github.com/jonathan-r-andrade/tryunfo

Last synced: 12 months ago
JSON representation

Awesome Lists containing this project

README

          

# Tryunfo

Clique [aqui](https://jonathan-r-andrade.github.io/tryunfo) para ver o projeto no navegador.

## Sobre

Projeto desenvolvido por [Jonathan R. Andrade](https://www.linkedin.com/in/jonathan-r-andrade/) na [Trybe](https://www.betrybe.com/).

Nesse projeto eu desenvolvi um jogo parecido com Super Trunfo.

Ao utilizar a aplicação é possível:

* Criar um baralho, com o tema livre;
* Adicionar e remover uma carta do baralho;
* Visualizar todas as cartas que foram adicionadas ao baralho;
* Filtrar as cartas por nome, raridade e Super Trunfo;
* Jogar com o baralho criado.

## Habilidades desenvolvidas

* Ler o estado de um componente e usá-lo para alterar o é exibido no browser;
* Inicializar um componente, dando a ele um estado pré-definido;
* Atualizar o estado de um componente;
* Capturar eventos utilizando a sintaxe do React;
* Criar formulários utilizando sintaxe JSX com as tags: input, textarea, select, form, checkbox;
* Transmitir informações de componentes filhos para componentes pais via callbacks.

## Ferramentas utilizadas

* React.js
* HTML5
* CSS3
* JavaScript ES6+
* Node.js v16

## Como executar

Siga os passos abaixo executando os comandos no terminal.

1. Clone o repositório.

* Exemplo com Git + HTTPS
```
git clone https://github.com/Jonathan-R-Andrade/tryunfo.git
```
* Exemplo com Git + SSH
```
git clone git@github.com:Jonathan-R-Andrade/tryunfo.git
```
* Usando GitHub CLI
```
gh repo clone Jonathan-R-Andrade/tryunfo
```

> Entre na pasta do repositório clonado.

2. Instale as dependências:
```
npm install
```

---

### Executando a aplicação

```
npm start
```

---

### Executando os linters

Para garantir a qualidade do código os linters **ESLint** e **StyleLint** foram utilizados, para rodá-los, execute os comandos abaixo:

* Para rodar o ESLint:
```
npm run lint
```
* Para rodar o StyleLint:
```
npm run lint:styles
```