🎧 WaveCast – Modern Podcast Platform

WaveCast is a fully responsive podcast platform built with Next.js App Router, designed to explore podcasts, episodes, blogs, hosts, and subscriptions in a modern UI.
It focuses on clean architecture, smooth UX, and scalable frontend design.

Built as a production-ready frontend, ready for backend & audio player integration.

---

📋 Table of Contents

• 📋 Table of Contents
• ✨ Introduction
• ⚙️ Tech Stack
  • 🖥️ Frontend
  • 🔧 Libraries & Tools
• 🔋 Core Features
  • 🎙️ Podcast Episodes
  • 📰 Blogs
  • 👤 Hosts
  • 💳 Pricing
  • ❓ FAQs
  • 🧭 Layout System
• 🧱 Project Structure
• 🧠 Architecture Overview
  • 🧩 Rendering Model
  • 📦 State Management
• 🤸 Quick Start
  • Prerequisites
  • 1️⃣ Clone Repository
  • 2️⃣ Install Dependencies
  • 3️⃣ Run Development Server
• 📱 Routing Overview
• 🎨 Design System
  • 🎨 Colors
  • ✍️ Typography
• 🚀 Future Enhancements
• 🤝 Contribution
• 📄 License
• ⭐ Show Your Support

---

✨ Introduction

WaveCast is a modern podcast discovery and content platform built using Next.js App Router.
It provides a rich frontend experience for:

• Browsing podcast episodes
• Reading podcast blogs
• Exploring hosts
• Managing favorites
• Viewing pricing plans & FAQs

The project is designed with scalability in mind, making it easy to integrate:

• Backend APIs
• Authentication
• Audio playback
• CMS systems

---

⚙️ Tech Stack

🖥️ Frontend

• Next.js (App Router) – Routing & rendering
• React 19 – Component-based UI
• TypeScript – Type safety & scalability
• Tailwind CSS 4 – Utility-first styling
• Custom CSS – Animations & effects
• Bootstrap Icons & Remix Icons – Iconography
• next/font – Optimized Google fonts

🔧 Libraries & Tools

• react-hot-toast – Toast notifications
• swiper – Sliders & carousels
• react-countup – Animated counters
• localStorage – Client-side favorites storage

---

🔋 Core Features

🎙️ Podcast Episodes

• Episode listing with search & sorting
• Episode detail pages
• Favorite episodes (localStorage)
• Latest & favorite episode sections

📰 Blogs

• Blog listing with categories
• Dynamic blog detail pages
• Related blogs section

👤 Hosts

• Host profiles grid
• Social media hover interactions

💳 Pricing

• Monthly / Yearly toggle
• Multiple subscription plans

❓ FAQs

• Accordion-based FAQ pages
• Smooth open/close animations

🧭 Layout System

• Global Navbar & Footer
• ClientWrapper for layout control
• Clean handling of 404 pages

---

🧱 Project Structure

app/
├── Components/
│   ├── ClientWrapper.tsx
│   ├── Nav/
│   └── Footer/
│
├── pages/
│   ├── Index/
│   ├── Episodes/
│   ├── Blogs/
│   ├── Pricing/
│   ├── Faqs/
│   ├── Contact/
│   └── HostProfile/
│
├── JsonData/
│   ├── EpisodesData.json
│   └── BlogsData.json
│
├── layout.tsx
├── not-found.tsx
└── globals.css

---

🧠 Architecture Overview

🧩 Rendering Model

• Server Components by default

• Client Components for interactivity:

  • Navbar
  • Favorites
  • Accordions
  • Search & sorting
  • ClientWrapper

📦 State Management

• React hooks (useState, useEffect)
• localStorage for favorites
• No global state library (yet)

---

🤸 Quick Start

Prerequisites

• Node.js (18+ recommended)
• npm or yarn

1️⃣ Clone Repository

https://github.com/Itssanthoshhere/WaveCast-Podcast.git
cd WaveCast-Podcast

2️⃣ Install Dependencies

npm install

3️⃣ Run Development Server

npm run dev

Open: http://localhost:3000

---

📱 Routing Overview

/                          → Home
/pages/Episodes            → All episodes
/pages/Episodes/[id]       → Episode details
/pages/Episodes/LatestEpisode
/pages/Episodes/FavoriteEpisode
/pages/Blogs               → Blog listing
/pages/Blogs/[id]          → Blog details
/pages/About
/pages/Contact
/pages/Pricing
/pages/Faqs
/pages/HostProfile
/404                        → Custom not found page

---

🎨 Design System

🎨 Colors

--primary: #ffb340
--second: #7a6eff
--dark-color: #1c1d20
--gray-color: #3b3b3c
--gray-light: #262629

✍️ Typography

• Kanit – Primary UI font
• Metal Mania – Branding & display
• Geist / Geist Mono – System & code fonts

---

🚀 Future Enhancements

• 🎧 Real podcast audio player
• 🔐 Authentication system
• 🗄️ Backend + database integration
• ❤️ User accounts & synced favorites
• 💬 Comments & ratings
• 📰 CMS integration (Sanity / Strapi)
• 📈 SEO & analytics

---

🤝 Contribution

Contributions are welcome!

git checkout -b feature/your-feature
git commit -m "feat: add new feature"
git push origin feature/your-feature

Then open a Pull Request 🚀

---

📄 License

This project is for educational and portfolio purposes. All images and assets belong to their respective owners.

---

⭐ Show Your Support

If you like this project, give it a ⭐ on GitHub It helps a lot and keeps the motivation high ❤️

---

WaveCast – Podcasting made modern. 🎧✨

---