Yu-Gi-Oh! Frontend with API Integration

This project was created to enhance my frontend skills and strengthen my ability to work with API connections in React. The application serves as a search and information hub for Yu-Gi-Oh! cards, allowing users to explore a wide range of card data.

How to Run

Prerequisites

1. Node.js

Clone the Repository

git clone https://github.com/feijoes/Yu-Gi-Oh.git

Install Dependencies

Note: This project is a bit old, so using --force might be necessary 😅

npm i --force

Start the Application

npm start

Pages

Home Page

Once the application starts, navigate to http://localhost:3000/ to access the main page.

Screencast.from.27-10-24.10.50.54.webm

Card List Page

On this page, you can browse all available Yu-Gi-Oh! cards. Infinite scrolling allows you to explore the full collection.

Screencast.from.27-10-24.10.54.26.webm

Features:

• Filters: Narrow down the list by selecting filters like race, type, attribute, etc.
• Sorting: Sort cards by attributes such as attack power.
• Search: Find specific cards by entering keywords. For example, entering "blue dragons" will show all cards containing "blue dragons" in their names.

You can click on a card to view its details and see related cards.