Top Trump Deck Builder Project

🇧🇷 Português

Esse projeto foi inspirado no primeiro projeto que fiz no módulo de Desenvolvimento Web FrontEnd no curso da Trybe, para fins educacionais.
O seu objetivo primário foi praticar transferência de informações por Props e praticar a estilização baseada em um modelo Figma.
Nesse projeto é possível se criar um baralho do tipo Top Trump personalizado, imprimir, recortar as cartas e jogar com os amigos.

Objetivos

Usar Props para enviar informações entre componentes;
Seguir um modelo Figma (sem especificação exata de fontes, tamanhos e cores) para fazer a estilização;
Design responsivo;
Permitir ao usuário realizar o upload de imagens para a geração de cartas;
Realizar configuração e área de impressão;
Aplicar algumas validações nos campos de input.

Live Link

Criador de Decks SuperTrunfo

Screenshot

Imagem do modelo Figma:	ScreenShot da página

Tecnologias usadas

React
React Components
HTML
CSS
Javacript

Como usar

Acesse o site, configure as suas cartas com: nome, descrição, atributos, imagens, raridade e trunfoo, salve-as imprima o site ( a área de impressão foi configurada para imprimir apenas as cartas), corte as cartas e jogue com os amigos. Instruções do jogo podem ser encontradas em: INSTRUÇÕES

Rodar Localmente

Requisitos:

Node v16
Google Chrome

Clonar no seu computador (via SSH)

No terminal:

git clone git@github.com:IgorMarinhoArgollo/top-trump.git
npm install

Iniciando o projeto localmente

No diretório em que o repositório foi clonado, cole o seguinte comando no terminal para iniciar a aplicação localmente:

  npm start

Como contribuir no projeto

Faça um fork do projeto;
Crie uma nova branch com as suas alterações: git checkout -b my-feature;
Salve as alterações e crie uma mensagem de commit contando o que você fez: git commit -m "feature: My new feature";
Envie as suas alterações: git push origin my-feature;
Abra o seu pull-request na página do GitHub.

Autor

_{Igor Marinho Argollo}

Licença

Esse projeto está sob a licença:

🇺🇸 English

This project was inspired on the first project I did while studying the module of Front end Web Development in the Trybe course, for educational purposes.
The main goal was to practice information transfer through props and practice styling through a figma model.
In this project it is possible to create a personalized Top Trump deck, print, cut the cards and play with friends.

My Goals

Use Props to send information between components;
Follow a figma model (without any indication of font of colors specification) to make the styling;
Responsive design;
Allow the user to upload images to make cards;
Configure printable area;
Apply some validations on inputs.

Live Link

Top Trump Deck Builder

Screenshot

Figma Model Image:	Page ScreenShot

Used Technologies

React
React Components
HTML
CSS
Javacript

How to use it

Go to the site, configure your cards with: name, description, attributes, images, rarity, top trump; save them, print the site (the printable area was cofigured to only print the saved cards), cut it from the paper and play with your friends. Instructions about how to play can be found in INSTRUCTIONS

Run Locally

Requirements:

Node v16
Google Chrome

Cloning into your computer (via SSH)

On terminal:

  git clone git@github.com:IgorMarinhoArgollo/top-trump.git
  npm install

Starting project locally

On the directory that you have cloned the repository, paste the command on terminal to start the application:

  npm start

How to contribute on the project

Make a fork of the project;
Create a new branch with your changes: git checkout -b my-feature;
Save your changes and create a commit message explaining what you have done: git commit -m "feature: My new feature";
Send your changes: git push origin my-feature;
Open your pull-request on GitHub.

Author

_{Igor Marinho Argollo}

License

This project is under license: