10º Projeto: Tryunfo

---

Project Description • Learning • Requirements • Stacks • How to run the application

---

Descrição do Projeto • Aprendizado • Requisitos • Tecnologias Utilizadas • Rodar a Aplicação

---

Project Description

In this project, I developed an application to simulate the card game in the style of Super Trunfo!
This app was built in React, with state manipulation using class components.

In this project, I learned and put into practice

• Reading the state of a component and using it to change what we display in the browser.
• Initializing a component with a predefined state.
• Updating the state of a component.
• Capturing events using React syntax.
• Creating forms using JSX syntax with tags: input, textarea, select, form, checkbox.
• Passing information from child components to parent components via callbacks.

According to the project requirements designated by Trybe, I learned how to

• ✅ Create the form that will be used to add cards to the deck.
• ✅ Add the necessary props to the form component.
• ✅ Create and render the Card component with the necessary props.
• ✅ Create the preview of the card being created by the form.
• ✅ Validate the Save button in the form.
• ✅ Create the functionality of the save button.
• ✅ Validate the Super Trunfo checkbox.
• ✅ Display the list of saved cards in the state.
• ❌ Create a button to remove a card from the deck.
• ❌ Create the filter by card name.
• ❌ Create the filter by card rarity.
• ❌ Create the Super Trunfo filter.

Note: Some requirements were not completed due to the accelerated pace of the course, not because I didn't know how to do them. At the time, I just needed a little more time.

Tryunfo still doesn't have CSS, as I wasn't able to do it during the course. As soon as possible, I will be adding the CSS and the missing functionalities.

I haven't decided yet if it's better to leave it this way to show my progress during my learning or if I should complete the requirements that were left unfinished in the course projects.

Feedback is welcome.

Stacks

FrontEnd

• HTML
• CSS
• JavaScript
• React

Project Live Link

Project Site

How to run the application?

• Clone the repository:
  git clone git@github.com:prtpj1/project-tryunfo.git
• Navigate to the project folder:
  cd project-tryunfo
• Install dependencies:
  npm install
• Start the application:
  npm start
  ⚠️Wait for the app to open in your browser. If it doesn't, type http://localhost:3000/ in your browser's address bar.

---

Note:
At the time I created this project, I wasn't familiar with Conventional Commits. I only learned and started making better commits from the BackEnd module of the Trybe course onward.

If you have any difficulty with the instructions and want to give feedback, feel free to send me a message

---

Descrição do Projeto

Neste projeto, desenvolvi uma aplicação para simular o jogo de cartas no estilo Super Trunfo!
Este app foi feito em react com a manipulação de estados em classes.

Nesse projeto, aprendi e coloquei em prática

• Ler o estado de um componente e usá-lo para alterar o que exibimos 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

De acordo com os requisitos do projeto designados pela Trybe aprendi como

• ✅ Criar o formulário que será usado para adicionar cartas ao baralho
• ✅ Adicionar as props necessárias ao componente de formulário
• ✅ Criar e renderizar o componente Card com as props necessárias
• ✅ Criar o preview da carta que está sendo criada pelo formulário
• ✅ Fazer a validação do botão de Salvar no formulário
• ✅ Criar a função do botão salvar
• ✅ Criar a validação do Super Trunfo
• ✅ Exibir a lista de cartas que estão salvas no estado
• ❌ Criar um botão para remover uma carta do baralho
• ❌ Criar o filtro pelo nome da carta
• ❌ Criar o filtro por raridade da carta
• ❌ Criar o filtro de Super Trunfo

OBS: Em alguns projetos alguns requisitos não foram feitos devido a dinamica acelerada do curso e não por eu não saber como fazê-los. Na época eu apenas precisaria de um pouco mais de tempo.

O Tryunfo ainda não possui CSS, pois não pude fazer durante o curso. Assim que possivel estarei adicionando o CSS e as funcionalidades que ficaram faltando.

Ainda não decidi se é melhor deixar desta forma para demonstrar o meu progresso durante meu aprendizado ou se seria melhor completar os requisitos que ficaram faltando nos projetos do curso.

Feedbacks são bem vindos.

Tecnologias Utilizadas

FrontEnd

• HTML
• CSS
• JavaScript
• React

Link para visualizar o projeto

Site do Projeto

Como rodar a aplicação?

• Clone o repositório:
  git clone git@github.com:prtpj1/project-tryunfo.git
• Acesse a pasta do projeto:
  cd project-tryunfo
• Instale as dependências:
  npm install
• Inicie a aplicação:
  npm start
  ⚠️Aguarde a aplicação abrir no seu navegador. Caso não ocorra, coloque na barra de endereços do seu navegador: http://localhost:3000/

---

OBS:
Na época que fiz este projeto eu ainda não conhecia os Conventional Commits. Somente a partir do módulo de BackEnd do curso da Trybe que aprendi e comecei a fazer commits melhores.

Se tiver alguma dificuldade com as instruções e quiser dar um feedback me mande uma mensagem