Create Podcast Template using React and Tailwind CSS

Last Updated : 26 Sep, 2024

Podcasts have become a popular medium for sharing knowledge and entertainment. Creating a podcast application can be a fun project that not only enhances your skills in React and Tailwind CSS but also provides a platform to showcase your favourite podcasts. In this template we will build a responsive podcast app that lists episodes includes a player and allows users to explore different shows.

Prerequisites

Approach

To create a Podcast Template, start by setting up a basic React project and integrating Tailwind CSS for styling. You can create reusable components such as a header for the podcast title, an episode list component that displays individual episodes with details like title, description, and date, and a media player component for audio playback. Utilize Tailwind's utility classes to style the layout responsively, ensuring the design is clean and accessible. Extend the theme as needed for custom colors and typography, creating a modern, minimalist look that aligns with podcasting aesthetics.

Steps to Create & Configure the Project

Here we will create a sample React JS project then we will install Tailwind CSS once it is completed we will start development for Podcast Template using React and Tailwind CSS. Below are the steps to create and configure the project

Step 1: Set up a React Application

First, create a sample React JS application by using the mentioned command then navigate to the project folder

npx create-react-app react-app
cd react-app

Project Structure

Screenshot-2024-09-12-114329 — project structure

Updated Dependencies

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Step 2: Install and Configure Tailwind CSS

Once Project is created successfully Now install and configure the Tailwind css by using below commands in your project.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 3: Develop Business logic

Once Tailwind css installation and configuration is completed. Now we need to develop user interface for Podcast Template using tailwind CSS and for making it responsive we will use App.js and App.css files.

App.js ( src\App.js )
index.css ( src\index.js )
tailwind.config.js ( tailwind.config.js )

Example: This demonstrates the creation of Podcast Template using React and Tailwind CSS:

CSS

/*src/index.css*/

@tailwind base;
@tailwind components;
@tailwind utilities;

body {

    margin: 0;
    font-family: 'Times New Roman', Times, serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
        monospace;
}

h2 {
    margin-top: 2rem;
    /* Adjust top margin for spacing */
}

JavaScript

/*src/tailwind.congif.js*/

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

JavaScript

//App.js

import React from 'react';
import { FaPlay, FaPause, FaPodcast, FaClock } from 'react-icons/fa';

// Sample podcast data
const podcasts = [
    {
        title: "Tech Talk",
        description: "Latest discussions in technology and innovation.",
        cover: "https://via.placeholder.com/150",
        episodes: [
            {
                title: "Episode 1: The Rise of AI",
                audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
                duration: "30:00",
                description: "Exploring the impact of AI on society."
            },
            {
                title: "Episode 2: Blockchain Explained",
                audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
                duration: "45:00",
                description: "Understanding blockchain technology."
            },
            {
                title: "Episode 3: Future of Work",
                audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
                duration: "50:00",
                description: "How technology is shaping the future workplace."
            },
            {
                title: "Episode 4: Cybersecurity Trends",
                audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3",
                duration: "40:00",
                description: "Navigating the world of cybersecurity."
            },
            {
                title: "Episode 5: The Future of Blockchain",
                audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3",
                duration: "30:00",
                description: "Discussing future prospects of blockchain technology."
            },
            {
                title: "Episode 6: AI in Healthcare",
                audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3",
                duration: "55:00",
                description: "Impact of AI on healthcare solutions."
            },
            {
                title: "Episode 7: Data Science Explained",
                audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
                duration: "40:00",
                description: "Basics of data science for beginners."
            },
            {
                title: "Episode 8: The Rise of IoT",
                audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
                duration: "45:00",
                description: "Understanding the Internet of Things."
            },
            {
                title: "Episode 9: Cloud Computing Basics",
                audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
                duration: "50:00",
                description: "Introduction to cloud computing."
            },
            {
                title: "Episode 10: Tech for Good",
                audioUrl: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3",
                duration: "35:00",
                description: "Using technology to solve social issues."
            },
        ],
    },
];

const trendingPodcasts = Array.from({ length: 10 }, (_, idx) => ({
    title: `Trending Podcast ${idx + 1}`,
    description: `This is the description for trending podcast ${idx + 1}.`,
    cover: "https://via.placeholder.com/150",
}));

const recentPodcasts = Array.from({ length: 10 }, (_, idx) => ({
    title: `Recent Podcast ${idx + 1}`,
    description: `This is the description for recent podcast ${idx + 1}.`,
    cover: "https://via.placeholder.com/150",
}));

const favouritePodcasts = Array.from({ length: 10 }, (_, idx) => ({
    title: `Favourite Podcast ${idx + 1}`,
    description: `This is the description for favourite podcast ${idx + 1}.`,
    cover: "https://via.placeholder.com/150",
}));

// Main App component
const App = () => {
    const [playing, setPlaying] = React.useState(null);
    const audioRef = React.useRef(null);

    const handlePlay = (episode) => {
        if (playing === episode) {
            audioRef.current.pause();
            setPlaying(null);
        } else {
            audioRef.current.src = episode.audioUrl;
            audioRef.current.play();
            setPlaying(episode);
        }
    };

    return (
        <div className="bg-gray-900 text-white 
                        min-h-screen flex flex-col p-6 lg:p-10">
            <header className="mb-8 flex flex-col items-center">
                <FaPodcast className="text-green-500 text-6xl" />
                <h1 className="text-4xl font-bold
                               text-center mt-2">
                                Podcast App
                                </h1>
            </header>

            <main className="flex-1 space-y-10">

                {/* Episodes List */}
                <section>
                    <h2 className="text-3xl font-bold mb-5">
                        Episodes List
                        </h2>
                    <div className="grid grid-cols-1
                                    sm:grid-cols-2 md:grid-cols-3
                                    lg:grid-cols-4 gap-6">
                        {podcasts[0].episodes.map((episode, idx) => (
                            <div key={idx} className="bg-gray-800 p-4
                                                      rounded-lg shadow-lg">
                                <h3 className="font-semibold">{episode.title}</h3>
                                <p className="text-gray-500">{episode.description}</p>
                                <div className="flex justify-between items-center mt-3">
                                    <span className="text-gray-400">
                                        <FaClock className="inline-block mr-1" /> 
                                        {episode.duration}
                                        </span>
                                    <button className="text-green-500
                                                       hover:text-green-400" 
                                                       onClick={() => handlePlay(episode)}>
                                        {playing === episode ? <FaPause /> : <FaPlay />}
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                </section>

                {/* Trending Podcasts */}
                <section>
                    <h2 className="text-3xl font-bold mb-5">Trending Podcasts</h2>
                    <div className="grid grid-cols-2 sm:grid-cols-3
                                    md:grid-cols-4 lg:grid-cols-5 gap-6">
                        {trendingPodcasts.map((podcast, index) => (
                            <div key={index} className="bg-gray-800 p-5
                                                        rounded-lg shadow-lg
                                                        hover:shadow-xl transition">
                                <img src={podcast.cover} alt={podcast.title} className="w-full h-40
                                                                                        object-cover
                                                                                        rounded-lg mb-4" />
                                <h3 className="text-2xl font-semibold">{podcast.title}</h3>
                                <p className="text-gray-400">{podcast.description}</p>
                            </div>
                        ))}
                    </div>
                </section>

                {/* Recent Podcasts */}
                <section>
                    <h2 className="text-3xl font-bold mb-5">Recent Podcasts</h2>
                    <div className="grid grid-cols-2 sm:grid-cols-3
                                    md:grid-cols-4 lg:grid-cols-5 gap-6">
                        {recentPodcasts.map((podcast, index) => (
                            <div key={index} className="bg-gray-800 p-5
                                                        rounded-lg shadow-lg
                                                        hover:shadow-xl transition">
                                <img src={podcast.cover} alt={podcast.title} className="w-full h-40
                                                                                        object-cover
                                                                                        rounded-lg mb-4" />
                                <h3 className="text-2xl font-semibold">{podcast.title}</h3>
                                <p className="text-gray-400">{podcast.description}</p>
                            </div>
                        ))}
                    </div>
                </section>

                {/* Favourite Podcasts */}
                <section>
                    <h2 className="text-3xl font-bold mb-5">Favourite Podcasts</h2>
                    <div className="grid grid-cols-2 sm:grid-cols-3
                                    md:grid-cols-4 lg:grid-cols-5 gap-6">
                        {favouritePodcasts.map((podcast, index) => (
                            <div key={index} className="bg-gray-800 p-5
                                                        rounded-lg shadow-lg
                                                        hover:shadow-xl transition">
                                <img src={podcast.cover} alt={podcast.title} className="w-full h-40
                                                                                        object-cover
                                                                                        rounded-lg mb-4" />
                                <h3 className="text-2xl font-semibold">{podcast.title}</h3>
                                <p className="text-gray-400">{podcast.description}</p>
                            </div>
                        ))}
                    </div>
                </section>

            </main>

            <audio ref={audioRef} />
        </div>
    );
};

export default App;

Step 4: Run the Application

Once Development is completed Now we need run the react js application by using below command. By default the react js application run on port number 3000.

npm start

Output: Once Project is successfully running then open the below URL to test the output.

http://localhost:3000/

Create Documentation Template using React and Tailwind CSS

myarticzixi

Improve

Article Tags :