README.md

# 🎓 Mini Course Page - Growth-0-Pedia Assignment

This is a **React.js mini project** built as part of the selection round for **Growth-0-Pedia**.  
The app demonstrates component-based development, API integration, and responsive design.

---

## 🚀 Features

- 📦 **Course Card Component** with:
  - Course Title
  - Short Description
  - Dynamic Price
  - "Enroll Now" button with success alert

- 🌐 **API Integration**  
  Courses are fetched dynamically from  
  [`https://jsonplaceholder.typicode.com/posts`](https://jsonplaceholder.typicode.com/posts).

- 📱 **Responsive Design**  
  Looks good on both **desktop and mobile**.

- 🎨 **Modern UI**  
  Clean layout, shadows, gradient buttons, and smooth hover effects.

- ⚡ **Error & Loading States**  
  Better user experience with proper feedback.

---

## 🛠️ Tech Stack

- **React.js (Vite + SWC)**
- **Axios** for API calls
- **CSS3** for styling & responsiveness

---

## 📂 Folder Structure

mini-course-page/ │── public/ │── src/ │ ├── api/ │ │ ├── axiosInstance.js │ │ └── course.js │ ├── components/ │ │ └── CourseCard.jsx │ ├── pages/ │ │ └── Courses.jsx │ ├── styles/ │ │ ├── Courses.css │ │ └── CourseCard.css │ ├── App.jsx │ └── main.jsx │── .env │── package.json │── vite.config.js

## 📸 Preview

![Course Page Screenshot](https://github.com/sufyanur-dev/mini-course-page/blob/master/preview.png?raw=true)

---

## ⚙️ Setup & Installation

1. **Clone the repo**
   ```bash
   git clone https://github.com/sufyanur-dev/mini-course-page.git
   cd mini-course-page

2. Install dependencies

   npm install

3. Add environment variable Create .env in root

4. Run locally

   npm run dev

5. Build for production

   npm run build

---

🌍 Live Demo

🔗 Deployed on Netlify

---

👨‍💻 Author

Sufyanur Rasheed 📍 Nagpur, India 💼 Frontend Developer (React.js) 🔗 LinkedIn: https://linkedin.com/in/sufyanur-rasheed

✨ This project is a demonstration of clean coding practices, responsiveness, and modern UI design.