https://github.com/caner-yesiltas/legacy-xi
⚽ Football legends showcase app built with React & Bootstrap. Features dynamic search, card animations, and player statistics in a responsive grid layout.
https://github.com/caner-yesiltas/legacy-xi
bootstrap-grid football-legends interactive-cards player-database react
Last synced: 7 months ago
JSON representation
⚽ Football legends showcase app built with React & Bootstrap. Features dynamic search, card animations, and player statistics in a responsive grid layout.
- Host: GitHub
- URL: https://github.com/caner-yesiltas/legacy-xi
- Owner: Caner-Yesiltas
- Created: 2024-11-14T23:54:42.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2025-02-20T18:42:19.000Z (8 months ago)
- Last Synced: 2025-02-20T19:39:05.837Z (8 months ago)
- Topics: bootstrap-grid, football-legends, interactive-cards, player-database, react
- Language: JavaScript
- Homepage: https://legacy-xi-xi.vercel.app
- Size: 24.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Football Legends App ⚽
## 📌 About The Project
An interactive football legends showcase application built with React. Users can explore legendary football players, view their career statistics, and search through the database with a dynamic filtering system.
### ✨ Key Features
- 🔍 Dynamic search functionality
- 🎯 Interactive card flipping animations
- ⚽ Detailed player statistics
- 📊 Career information display
- 📱 Responsive grid layout
- 🎨 Clean and modern UI
- 🔄 Smooth state transitions
### 🛠️ Built With
- [React](https://reactjs.org/)
- [React Bootstrap](https://react-bootstrap.github.io/)
- [React Hooks](https://reactjs.org/docs/hooks-intro.html)
- CSS Modules
- CSS3
## 💻 Project Structure
```
src/
├── components/
│ ├── header/
│ │ └── Header.jsx
│ └── legends/
│ ├── LegendCard.jsx
│ └── LegendContainer.jsx
├── helper/
│ └── data.js
├── assets/
│ └── logo.png
├── styles/
│ └── App.css
└── App.js
```
## 🔍 Core Functionality
- **Search System**: Real-time player filtering
- **Interactive Cards**: Click-to-flip card interface
- **Dynamic Content**: Conditional rendering of player info
- **Responsive Grid**: Bootstrap-based responsive layout
- **Component Architecture**: Modular and maintainable code
## 🎯 Component Details
### LegendCard Component
- Interactive flip animation
- Player image display
- Statistics presentation
- Career year information
### LegendContainer Component
- Search functionality
- Data filtering
- Grid layout management
- Card rendering
### Header Component
- Logo display
- Title presentation
- Consistent branding
## 📱 Responsive Design
- Bootstrap Grid System
- Mobile-first approach
- Responsive image sizing
- Flexible search bar
- Adaptive card layouts
## 🤝 Contributing
Contributions make the open source community an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
## 📄 License
Distributed under the MIT License. See `LICENSE` for more information.
## 📫 Contact
Caner Yesiltas - caneryesiltas1@gmail.com
Project Link: [https://legacy-xi-xi.vercel.app/](https://legacy-xi-xi.vercel.app/)
Made with ⚽ by Caner Yesiltas