Top Trump Deck Builder Project

This project was inspired on the first project I did while studying the module of Front end Web Development in the Trybe course. The main goal was to practice information transfer through props and practice styling through a figma model.

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:


Web version of Figma:


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

Development Information (Original Project)

Development Commits: 28; Time Spent: 3 days;


View Github