Skip to main content

​
What is Nadie Sabe Nada?

Nadie Sabe Nada (“Nobody Knows Anything”) is a podcast where nothing is clear, but everything is fun. This application provides a modern, feature-rich web player that allows users to listen to podcast episodes, view episode details, and share their favorite content. Built with React and modern web technologies, Nadie Sabe Nada offers a responsive, mobile-friendly experience for podcast enthusiasts.

​
Key Features

Persistent Audio Player

Listen to episodes with a persistent player that maintains playback state across navigation

Playback Memory

Automatically saves your position in each episode using localStorage and Redux state management

Episode Management

Mark episodes as completed, favorite them, or add them to your listen-later queue

Mobile Responsive

Fully responsive interface optimized for both desktop and mobile devices

Search & Filter

Quickly find episodes with real-time search functionality

Episode Sharing

Share episodes with others using the Web Share API

Sleep Timer

Set a sleep timer to automatically stop playback after a specified duration

YouTube Integration

View related YouTube videos for podcast episodes

​
Technology Stack

The application is built with a modern React stack:
  • React 18.3.1 - Core UI library
  • Redux Toolkit - State management for podcasts, player, and filters
  • React Router - Client-side routing
  • Material UI - Component library for modern UI elements
  • Framer Motion - Smooth animations and transitions
  • react-h5-audio-player - Custom audio player component
  • Axios - HTTP client for API requests
  • Styled Components - Component-level styling

​
Architecture Overview

The application follows a Redux-based architecture with the following key slices:
  • podcastSlice - Manages podcast data, favorites, listen-later queue, and completed episodes
  • playerSlice - Controls the persistent player state and current playback
  • filterSlice - Handles episode filtering and search functionality
  • audioTimeSlice - Saves and restores playback positions for each episode
// Example: Redux store configuration from src/store/store.js
import { configureStore } from '@reduxjs/toolkit';
import podcastReducer from './slices/podcastSlice';
import playerReducer from './slices/playerSlice';
import filterReducer from './slices/filterSlice';
import audioTimeReducer from './slices/audioTimeSlice';

export const store = configureStore({
  reducer: {
    podcast: podcastReducer,
    player: playerReducer,
    filter: filterReducer,
    audioTime: audioTimeReducer,
  },
});

​
What You’ll Learn

Installation

Set up the development environment and install dependencies

Quick Start

Get the app running locally in minutes

Features

Explore the app’s capabilities and how to use them

Components

Learn about the React components that power the app

​
Use Cases

This application is ideal for:
  • Podcast Listeners - Enjoy a seamless listening experience with playback memory and episode management
  • React Developers - Learn modern React patterns including Redux Toolkit, custom hooks, and component composition
  • Mobile-First Development - Study responsive design and mobile optimization techniques
  • PWA Development - Understand how to build progressive web applications with offline capabilities

​
Getting Help

If you encounter issues or have questions:
The application fetches podcast data from the API endpoint: https://nsn-podcast-api-rapidapi.netlify.app/podcast

Build docs developers (and LLMs) love

Get started for freeTalk to us