⚛️ goit-react-hw-01 — React Components

This project is part of the GoIT React curriculum. It focuses on building reusable React components, working with props, component composition, and basic project structure using Vite.

---

🎯 Project Requirements

• Create a repository named goit-react-hw-01
• Build the project using Vite
• Deploy the project and provide a Vercel live link
• No errors or warnings in the browser console
• Use default export for all components
• All components must be rendered inside the <App> component
• All props must be passed correctly
• Code must be clean, readable, and formatted with Prettier
• Styles must be implemented using CSS Modules

---

🛠️ Technologies Used

• React — Component-based UI
• Vite — Fast project setup and build tool
• JavaScript (ES6+)
• CSS Modules — Scoped component styles
• Prettier — Code formatting

---

📂 Project Structure

src/
 ├── components/
 │   ├── Profile/
 │   │   ├── Profile.jsx
 │   │   └── Profile.module.css
 │   ├── FriendList/
 │   │   ├── FriendList.jsx
 │   │   └── FriendList.module.css
 │   ├── FriendListItem/
 │   │   ├── FriendListItem.jsx
 │   │   └── FriendListItem.module.css
 │   ├── TransactionHistory/
 │   │   ├── TransactionHistory.jsx
 │   │   └── TransactionHistory.module.css
 ├── App.jsx
 ├── userData.json
 ├── friends.json
 └── transactions.json

---

📌 Task 1 — Social Media Profile

The Profile component displays user information using props:

• name — user name
• tag — social tag without @
• location — city and country
• image — avatar URL
• stats — followers, views, likes

User data is stored in userData.json and imported into App.jsx.

---

📌 Task 2 — Friend List

The FriendList component renders a list of friends based on an array of objects. Each friend is displayed using the FriendListItem component.

• avatar — avatar image
• name — friend name
• isOnline — online status (true / false)

Friend data is stored in friends.json. Online status is styled conditionally using CSS classes.

---

📌 Task 3 — Transaction History

The TransactionHistory component displays banking transactions in a table.

• id — unique transaction identifier
• type — transaction type
• amount — transaction amount
• currency — currency code

Transaction data is stored in transactions.json and rendered dynamically.

---

🚀 Deployment

• The project is deployed using Vercel
• Two links are provided for submission:
• GitHub repository (source code): https://kutluhangil.github.io/goit-react-hw-01/
• Vercel live project link: https://goit-react-hw-01-rose-one.vercel.app

---

✅ Final Notes

This project demonstrates core React fundamentals such as component composition, props usage, reusable UI blocks, and clean project structure. It serves as a foundation for more advanced React topics.

Happy coding! 🚀