/top-100-podcasts

Listen Top 100 Podcasts

Primary LanguageTypeScript

Top 100 Podcasts

Netlify Status

Description

This application shows top 100 podcasts according to apple iTunes.

Component composition

  1. The main view components:

page_01

  1. Podcast details components:

page_02

  1. Podcast chapters components:

page_03

Installation

Prerequisites

While developing the following stack was used:

Technology Version Description
Node JS 19.7.0 JS engine
TypeScript 5.0.2 TypeScript
React 18.2.0 Main tech stack
Axios 1.3.4 Requests
PropTypes 15.8.1 Handle types
Sass 1.58.3 CSS
Zustand 4.35.5 State management
ESLint 8.0.1 Code formatter
Jest 29.4.3 Testing
Yarn 1.22.19 Package manager

Steps to start the project locally (dev):

  • yarn (install deps)
  • yarn start (start up local server and view/use app)

Production version

For deployment & minification NETLIFY service is used

See prod version >> click here <<

Minify JS and CSS:

image

The CORS issue

For getting podcast details we need to overcome CORS problem. It's resolved with Netlify config. See netlify.toml file in the project root.

If you still notice that some chapters/episodes of podcasts are not shown you can use this Chrome extension: Moesif Origin & CORS Changer

Tests

There're also some tests in the project. For running them just execute:

yarn test

image