https://fenerbahcelegends.netlify.app/
The primary objective of this project was to enhance and demonstrate my skills in React by focusing on state management, props, and handling forms using controlled components. The application, "Fenerbahçe Legends," aims to showcase these skills while providing information about legendary players of Fenerbahçe football club.
|--Fb_Legends(folder)
|
├── public
│ └── index.html
├── src
│ ├── components
│ │ ├── Header.jsx
│ │ ├── CardContainer.jsx
│ │ └── PlayerCard.jsx
│ ├── helper
│ │ └── data.js
│ ├── assets.js
│ │ └── [images]
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── index.css
├── .gitignore
├── package.json
├── package-lock.json
└── README.md
- Displays a list of legendary players from Fenerbahçe.
- Allows users to view detailed information about each player.
- Implements state management using React hooks (
useState
,useEffect
). - Utilizes
props
to pass data between components. - Implements controlled components for form handling (
onChange
,onClick
). - Styled with CSS to enhance the visual presentation of player cards and the overall user interface.
- HTML: Minimal usage for app structure.
- CSS: Styled components to improve UI aesthetics.
- React: Utilized for building the user interface. Key React features include:
- State management using React hooks (
useState
,useEffect
). - Props for passing data between components.
- Handling
forms with controlled components
. - Event handling (
onClick
,onChange
).
- State management using React hooks (
This project has significantly enhanced my proficiency in React state management, props handling, and form control using controlled components. By developing the "Fenerbahçe Legends" application, I have gained practical experience in building interactive user interfaces and improving UX through CSS styling. These skills are essential for developing more complex React applications in the future.
⚽ Happy Coding! 🔶🔷