This project is a React-based app that showcases legendary football players. Users can search for players and view their profiles, statistics, and official careers.
##Demo
Screen.Recording.2025-02-23.at.20.50.02.mov
Screen.Recording.2025-02-23.at.20.51.48.mov
Screen.Recording.2025-02-23.at.20.53.38.mov
- Header: Displays a logo and title "Football Legends."
- Search Bar: Allows users to search for players by name.
- Player Cards: Displays player information including image, statistics, and official career years. Clicking on a card reveals more details.
- Responsive Design: The app adjusts the layout based on screen size using Bootstrap’s grid system.
- Clone the repository.
- Install dependencies using
pnpm install
. - Run the app with
pnpm start
.
- On the homepage, you’ll see a list of football legends.
- Use the search bar to find specific players by name.
- Click on a player’s card to toggle detailed statistics.
- React
- React-Bootstrap
- State Management with React’s
useState
hook
- Header: Contains the logo and title of the app.
- LegendCard: Displays individual player details such as their name, image, and statistics.
- LegendContainer: Handles the search functionality and maps over filtered player data to display the cards.
The player data is sourced from a local data.js
file, containing player details such as name, image, statistics, profile link, and official career years.
This project is open-source and available under the MIT License.