🎓 React Faradars Courses

A React-based educational project built as a learning exercise to practice working with APIs, authentication, state management, component communication, conditional rendering, and asynchronous data fetching.

The application provides a simple interface for browsing free Faradars courses, viewing course details, and displaying the latest comments for each course.

---

📸 Screenshots

🔐 Login

🎓 Courses

---

✨ Features

• 🔐 OTP-based authentication
• 📱 Login using a mobile number
• 🔑 Token-based authentication
• 💾 Token storage using Local Storage
• 🎓 Display free Faradars courses
• 🔎 Browse available courses
• 📚 Select and view individual courses
• 👨‍🏫 Display course instructor information
• ⏱️ Display course duration
• 🏆 Display certificate availability
• 💬 Display latest course comments
• 🔄 Fetch data from REST APIs
• ⏳ Loading state while fetching data
• 🚪 Logout functionality
• 📱 Responsive layout
• 🎨 Modern UI using Tailwind CSS

---

🛠️ Technologies

• React
• JavaScript (ES6+)
• Tailwind CSS
• Vite
• Fetch API
• REST API
• Local Storage
• Async/Await
• React Hooks

---

🧠 React Concepts Practiced

This project was created as a React learning exercise.

The main concepts practiced include:

• useState
• useEffect
• Props
• Parent-to-child communication
• Passing functions through props
• Conditional rendering
• Rendering lists with .map()
• Controlled inputs
• Event handling
• API requests
• Async/Await
• Loading states
• Component-based architecture
• Local Storage
• Authentication flow
• Dynamic rendering based on API data

---

🧩 Project Structure

src/
├── Components/
│   ├── Blog.jsx
│   ├── Body.jsx
│   ├── Comments.jsx
│   ├── Loading.jsx
│   ├── Login.jsx
│   └── Sidebar.jsx
│
├── App.jsx
├── App.css
├── index.css
└── main.jsx