Collection of Magic Gathering Cards.

This is a capstone project for Microverse of React/Redux Module.

In this project, the requirement were to follow a disign as example to show on the home page a list of elements that was getted from an API.

Each element should have a property to be filtered, so we have to create a filter to filter this property.

In this page you can see how I create a filter to create the cards depending on the type of them.

I only bring from the API 100 cards because there were like 1000 cards or more, so I'm only showing a part of all the cards that the game has.

I'm proud to create this project by working with the redux and storing the data from the API inside of it, so I could use it to work on the different pages of the website.

I have this example to follow DESIGN.

I used this API. to fetch the cards data project.

Special thanks to Nelson Sakwa on Behance for providing the design!

In this case I will create the Home page and the Details page of each card for mobile (up to 768px wide).

Home page

✅ When the page loads, the webapp load the list of cards from the API selected.

✅ Along with the category name, there is displayed the Converted Mana Cost to converte a Card's Mana.

✅ When the user clicks (or taps) on a category item, the application navigates to the details page.

Detail Page

✅ In the details page, the webapp retrieves data from the API to show detailed data in the category.

✅ When the user clicks on the "Back" button (<) or in the logo icon, the user navigates to the home page.

Build With

Technologies

🔷 React-Redux

🔷 ES6

🔷 CSS

🔷 Jest

Tools

💠VISUAL STUDIO CODE

💠GITHUB-DESKTOP

💠GITHUB-ACTIONS

💠LINTERS

💠LOOM

LOOM Video

VIDEO

Live Demo

Demo on Netlify

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• You need to have a code editor to be able to run the code. VSCode is most preferred.

Setup

• To clone the code press in the green button at the top right corner in this page
• Select the method that you want to clone

Install

• Run it in your code editor

Usage

• You can download an extension for VSCode named "Live Server" so you can see the actual project working in the browser

Authors

👤 Julio Miguel Gagliardi

• GitHub: @BregornOriginal
• Twitter: @Bregorn
• LinkedIn: @LinkedIn

Acknowledgements :sunflower:

• Nelson Sakwa I want to say thank you to for share the design!

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!