Ramel Fields
Projects

Podcast Web App

Full-stack podcast streaming platform with subscription management and integrated audio player
Visit SiteView Source
React 18
React Router 6
Material UI
React Spring
Context API
Preview
welcomescreen.app
Welcome Screen
createaccount.app
Create Account
homedashboard.app
Home Dashboard
audioplayer.app
Audio Player
podcastdetails.app
Podcast Details
About This Project

A feature-rich podcast streaming application that brings a polished listening experience to the browser. Features 50+ curated podcasts across 20+ categories with user authentication, subscription management, and an animated audio player powered by React Spring.

Features

1

User authentication with login/signup flow and protected routes

2

Browse 50+ podcasts across 20+ categories (Technology, Business, Health, Comedy, etc.)

3

Real-time search filtering by title, publisher, or category

4

Subscribe/unsubscribe to podcasts with persistent user preferences

5

Episode favoriting and listening progress tracking

6

Animated modal audio player with playback controls, progress bar, and volume adjustment

7

Dedicated subscriptions section showing personalized content

8

Fully responsive mobile-first design

9

Smooth physics-based animations powered by React Spring

Technical Challenges

Implementing protected route architecture with React Router 6 and persistent authentication

Managing global state with Context API for users, subscriptions, favorites, and playback

Creating smooth, performant animations with React Spring for the player modal

Building a reusable search system with real-time filtering across multiple data fields

Integrating Material-UI components while maintaining custom design requirements

Developer

Full-Stack Developer

Outcomes

Fully functional streaming platform with 50+ podcasts and 200+ episodes

Persistent user sessions with localStorage integration

Smooth, responsive UI with physics-based animations throughout

Clean component architecture with reusable patterns and proper separation of concerns

Type-safe routing with protected and public route patterns

Responsibilities

React component architecture with Context API for global state management

User authentication system with protected routes and persistent sessions

Real-time search and filtering across podcasts, publishers, and categories

Audio player integration with playback controls and progress tracking

React Spring animations for smooth UI transitions and modal interactions

Like what you see?

Let's collaborate on your next project and create something amazing together.

Get in Touch