Fenerbahçe Legends React App

https://fenerbahcelegends.netlify.app/

Project Purpose

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.

Project Structure

|--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

Project Features

• 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.

Outcome

Technologies Used

• 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).

At the end of the project, will be able to;

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! 🔶🔷