Culers API Web App ⚽️

Welcome to the Culers Web App!
This project is a web interface built with React that allows users to view information about the Culers API⚽️. The app connects to a RESTful API developed in Java using Spring Boot and MySQL (https://github.com/CoderAnchel/CulersAPI-2024), providing real-time player data. This web app offers an interactive and dynamic experience, allowing users to search for players by name, number, and nationality.

Project Structure

The project is organized as follows:

• React: The framework used to build the user interface (UI).
• Dynamic Components: Components are reusable and dynamically render data received from the API.
• Backend API: The app connects to an external API developed in Java with Spring Boot to fetch FC Barcelona player data.

Features 🌟

• View all players: Displays a complete list of all players along with their respective images and details.
• Player Images: Each player has their corresponding image that is dynamically loaded from the assets folder.

  INCOMING

• Search by name: Users can search and filter players by their name.
• Search by jersey number: Players can be looked up by entering their jersey number.
• Filter by nationality: View players based on their nationality.

Application Usage

When the app is launched, users can see a complete list of FC Barcelona players with details such as:

• Name
• Jersey Number
• Nationality
• Weight
• Height
• Goals and assists (if applicable)

Example Usage

1. View all players
   Upon loading the app, all players will be displayed.

2. Search for a player by name
   You can search for a player by typing their full or partial name in the search bar.

3. Filter by jersey number
   Using the jersey number filter, users can view the details of a specific player.

4. Search by nationality
   Filter players based on their nationality, such as Spain, France, etc.

Installation and Local Setup 🚀

Prerequisites

• Node.js (version 14.x or higher)
• npm or yarn (to manage dependencies)

Installation Instructions

1. Clone this repository to your local machine:

   git clone https://github.com/your-username/fc-barcelona-web-app.git

2. Navigate to the project directory:

   cd fc-barcelona-web-app

3. Install the dependencies:

   npm i

4. Start the app 🚀:

   npm start

Future Updates 🔮

In a future update, the Documentation section will be added under the Docs tab. This section will provide full documentation for the CULERS API, including an explanation of all available endpoints, parameters, and expected responses. This will enable other developers to easily consume the API, expanding the reach of the web app.