Welcome to this web project, where You can create your very own Kitty Cat Card Collection.
The main porpuse of this project was to put in practice various things learned in the CodeCademy's Front End Engineer Path, specially the use of third party APIS, and create UIs based in User input.
With this project You can make cards similar to other card games like Pokemon or Yugi-Oh, but Cat based, to share with your friends via any social media, after take the screenshot.
The card is only yours 😼
Look the new React version of MichiCards!
- You can choose all, from the name of the Michi, to the image of your card.
- By the moment are two 'Feral Cards', that are singular types of cards. Go for them!
This section will guide you through easy use of the web app, with clear directions.
- To create a New Michi Card, press the 'Create Michi Card' option. It is the first option on the main menu.
- You'll instantly see a Cool kitten wearing sunglasses, and the Form to create your own Michi Card!
- The only essential requirement on the form to create the card is to write Michi's name. The name must be a maximum of 9 characters. Choose the name that seems funniest or cutest to you.
- You can write a description about the feline in the 'How is the Michi' section, in 125 characters (including spaces) or less. If you don't write anything, no problem, some feline deity will grant the Michi they divine personality.
- The Michi Card's stats range from 1 to 100. The initial value of each stat is 1, and can be changed as desired. If this number is left as is, the app will choose a random value (between 1 and 100) for that stat.
- For the image of the card You have two options:
- Use your own photo.
You can take a photo with your device pressing the 'select file' button, bellow the 'Load your own photo!' text.
Try to put the face of your Michi in the upper section of the photo to have better results.
IMPORTANT! The photo you take with your device is NOT saved anywhere by default, neither in the server or client file system. - Use a random photo obtained by the app.
Just press 'Preview Your Michi' buttom to see the kitty cat photo that will be in the new Card.
Once the above information is complete, press the 'Ready!' button to see the new created Michi Card.
Now You can take a screenshot to save the new Michi Card on our device!
Note: to create a New Michi Card, after created one, just refresh/reload your browser, and you will be back in the Create Your Own Michi Card section.
This web project is created around different sources.
The gifs that load on the Home Page are obtained through the CATAAS API.
Random photos for the Card images are obtained using The Cat API.
The icons are part of the free Font Awesome collections.
I found the Cool kitten wearing sunglasses many years ago on Google doing another project with cats. Currently I can't find its source.
The initial loading animation was achieved thanks to animista.net.
And the font comes from Google Fonts.
- 📶 It is essential that the device have an internet connection to use the app.
- 📱 The app is designed to be used on mobile devices with small-medium to medium-sized screens. On laptops, desktop computers and tablets with large screens, THE IMAGES COULD LOOK KINDA WEIRD.
↕️ To avoid image distortion, the device must be placed vertically (not panoramic) when taking the screenshot.
Just send a message! 🐱