Full-Stack Project

DeeJayees E11Even Podcast App

A React podcast application built as a six-month portfolio journey: part interface system, part API-driven product, and part proof that code can still carry identity, story, and style.

Category Full-Stack / React App
Focus API Integration, State Management, Audio Playback
Role Frontend Developer, UI Designer & Technical Presenter
Project Type Podcast Discovery App + Portfolio Presentation

DeeJayees E11Even Podcast App is a React-based podcast discovery app created as a portfolio piece at the end of a six-month development journey. The app allows users to browse podcast shows, view show details, play episodes, and manage favorite podcast episodes.

The visual identity was built around the name itself: Dee, Jay, Ees, 11, and soundwaves. The logo system ties the personal milestone to the technical module that shaped the final project, turning the app into something that feels owned rather than generic.

On the product side, the app focuses on a user journey that feels clear and responsive. Users can search, sort, filter by genre, move between show lists and detailed views, switch between light and dark mode, and see loading states so the interface never feels frozen while data is being fetched.

Technically, the app uses React, JavaScript, CSS, the Fetch API, async/await, useState, and useEffect. Podcast data is pulled from a custom API, then managed through application state for show selection, episode playback, favorite episodes, loading states, error handling, and UI preferences.

  • Core purpose: discover shows, view show details, play episodes, and manage favorites.
  • Interface logic: search, sort, filtering, responsive grids, detailed hover states, and theme toggling.
  • App logic: async API calls, dynamic loading, error handling, React state, and component-based data flow.
  • Interaction layer: media player, close-confirmation modal, back button, scroll-up button, and dropdown controls.
React
JavaScript
CSS
Fetch API
Async/Await
useState
useEffect
API Data

The app was designed around browsing, listening, and control.

These selected slides show the project’s purpose, interface thinking, and technical structure.

Slide explaining the purpose of the DeeJayees E11Even Podcast App
The app lets users discover podcast shows, play episodes, and manage favorite podcast episodes.
UI UX slide showing mobile interface decisions
Component-specific CSS and responsive interface decisions helped make the app feel usable and personal.
Loading state and UI UX explanation slide
Loading indicators, search, sort, responsive grids, hover details, and light/dark mode support the user experience.

API data and React state hold the product together.

The technical logic is presented as the “star of the show”: the layer that fetches, stores, updates, and responds to the user’s choices.

Data fetching and state management slide
Data is fetched from a custom API through async calls while React state manages selection, playback, and favorites.
API integration slide showing fetch API and async await
The Fetch API and async/await syntax handle the request, JSON parsing, and error flow.
State management slide showing useState and useEffect
useState and useEffect keep dynamic app states updated when data loads or user choices change.

What the project proves technically.

API Integration

The app treats the API as the main data broker, pulling show information, descriptions, seasons, episodes, and update details into the interface.

State Management

React state is used to manage the current show, selected episode, favorites, loading conditions, theme choices, search queries, and error messages.

Playback UX

The media player supports episode playback and includes a close-confirmation modal so users do not lose progress accidentally.

Small interface decisions make the app feel less mechanical.

Media player interaction slide
Playback sits at the bottom of the screen, keeping audio controls accessible while the user explores the app.
Scroll-up button interaction slide
The scroll-up button appears after the user scrolls down, making long browsing sessions easier to navigate.
App.js component architecture slide
App.js orchestrates the layout, loading states, errors, child components, and app-wide preferences.

App.js

Coordinates the overall structure, shared state, loading/error states, theme preference, search query, and data flow between child components.

ShowList / ShowDetail

Display the browsable show grid and deeper show pages with seasons, episodes, descriptions, and user selection behaviour.

MediaPlayer.js

Manages episode playback, pause/play state, episode details, and the confirmation modal for closing an episode.

Search / Filters / Favorites

Gives users control over discovery through search, dropdown filters, sort options, and saved favorite episodes.

More development projects live in the archive.

Return to the full-stack development category to explore more app builds, frontend systems, tools, and interactive experiments.

Back to Development