📘 Courses Frontend

This is the frontend for the Courses API project — a single-page web app built with Next.js, TypeScript, Tailwind CSS, and shadcn/ui. It allows users to view and manage university-style courses.

This project is fully Dockerized and works seamlessly with the backend and database via Docker Compose.

---

🚀 Tech Stack

• Next.js with App Router
• TypeScript
• Tailwind CSS
• shadcn/ui for component styling
• Axios for API communication
• Docker for containerization

---

✨ Features

• View all courses in a responsive, card-style layout
• Hover effects with smooth UI using shadcn components
• Click on a course to view its details
• Button to create a new course (UI implemented)
• Communicates with backend API via Axios
• Environment-aware API URL (via .env)

---

🐳 Dockerized Setup (Production)

This app is prebuilt and published on Docker Hub.

It is designed to work out of the box with the following docker-compose.yml setup:

courses-frontend:
  image: ranxom/courses-frontend:latest
  container_name: courses-frontend
  ports:
    - "3000:3000"
  env_file:
    - ./frontend.env
  depends_on:
    - courses-backend

---

🔧 frontend.env

Place this file in the same folder as the compose file (in backend repo):

NEXT_PUBLIC_API_URL=http://courses-backend:8080/api

This allows the frontend to communicate with the backend inside Docker Compose using service names.

---

▶️ Running the App

Prerequisites: Docker and Docker Compose installed.

1. Ensure your docker-compose.yml contains the frontend, backend, and db services
2. Add the frontend.env file
3. Run:

docker-compose up

Visit the app at: http://localhost:3000

---

🧾 Project Structure

📦 courses-frontend
 ┣ 📂app
 ┃ ┣ layout.tsx
 ┃ ┣ page.tsx
 ┣ 📂public
 ┣ 📂components        # Custom and shadcn UI components
 ┣ 📂libs              # API logic (Axios instance)
 ┣ 📂styles
 ┣ 📂types	       # Stores the type of data returned by API
 ┣ 📄 Dockerfile
 ┣ 📄 package.json
 ┣ 📄 next.config.js
 ┣ 📄 tailwind.config.ts
 ┣ 📄 .env.local (for local dev only)
 ┣ 📄 .env.local (for docker)
 ┗ 📄 README.md

---

🧑‍💻 Author

Built with 💻 by Shizain

---

🪪 License

MIT

---

💬 Notes

• This app is fully containerized. No need to build locally.
• Uses NEXT_PUBLIC_API_URL for flexible deployment (Docker or local)