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
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
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: