Skip to content

A podcast app built with Next.js and Tailwind CSS. It showcases the top 100 trending podcasts from the iTunes API

Notifications You must be signed in to change notification settings

xup3rr/podcaster

Repository files navigation

Podcaster

This is a Next.js project bootstrapped with create-next-app. It uses the iTunes API to fetch podcast data and displays it in a user-friendly interface.

Getting Started

To get started with the project, follow these steps:

  1. Clone the repository to your local machine.

  2. Install the dependencies:

  npm install
  # or
  yarn install
  # or
  pnpm install
  # or
  bun install
  1. Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
  1. Open http://localhost:3000 with your browser to see the result.

Building and Running in Production Mode

  1. Build the application:
npm run build
# or
yarn build
# or
pnpm build
# or
bun build
  1. After the build is complete, you can start the application:
npm run start
# or
yarn start
# or
pnpm start
# or
bun start
  1. Open http://localhost:3000 with your browser to see the result.

  2. To stop the application, press Ctrl C in the terminal.


Project Structure

  • src/: Contains the source code for the application.
    • app/: Contains the global layout and pages for the application.
    • components/: Contains reusable React components.
    • constants/: Contains constant values used throughout the application.
    • types/: Contains TypeScript type definitions.
    • utils/: Contains utility functions.

How it works

The application fetches data from the iTunes API using two main functions: fetchTopPodcasts and fetchPodcast, located in src/utils/fetchItunesPodcasts.ts.

fetchTopPodcasts fetches the top podcasts from the iTunes API, with an optional limit parameter that defaults to 100.

fetchPodcast fetches a single podcast by its id.

The fetched data is used in various parts of the application, such as in src/app/podcast/[podcastId]/page.tsx, where the useQueries hook from the react-query library is used to fetch the top podcasts and a specific podcast based on the podcastId parameter. The fetched data is then used to display the podcast details and its episodes.

The react-query library also provides caching out of the box. This means that if the same data is fetched multiple times, react-query will serve the cached data instead of making a new request to the iTunes API. This improves the performance of the application and reduces the load on the iTunes API.

About

A podcast app built with Next.js and Tailwind CSS. It showcases the top 100 trending podcasts from the iTunes API

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages