alexbrowng/podcast-player-app

Podcast Player App is a mini-application for listening to musical podcasts. It is a Single Page Application built with TypeScript, React, and TailwindCSS.

Podcast Player App

Introduction

Podcast Player App is a mini-application for listening to musical podcasts. It is a Single Page Application built with TypeScript, React, and TailwindCSS. The application has three views:

• a main view that lists the available podcasts
• a podcast details view that displays detailed information about a selected podcast
• an episode details view that shows detailed information about a selected episode.

The application can be run in development mode, where assets are served without minification, or in production mode, where assets are served concatenated and minified.

Prerequisites

• npm >= 9.6+ Recommended 9.6.4
• node >= 16.20+ Recommended 16.20.0

Installation

Clone the project

...with HTTPS:

git clone https://github.com/alexbrowng/podcast-player-app.git

...with SSH:

git clone [email protected]:alexbrowng/podcast-player-app.git

Go to the project directory

cd podcast-player-app

Install dependencies with npm

npm install

or with makefile command

make install

Run in development mode

npm run dev

or with makefile command

make dev

Run in production mode

npm run build
npm run preview

or with makefile command

make preview

Quality code checks

Lint

npm run lint

or with makefile command

make lint

Check Format

npm run check-format

or with makefile command

make check-format

Format

  npm run lint:fix
  npm run format

or with makefile command

make format

Tech stack

• TypeScript: a strongly typed programming language that builds on JavaScript.
• React: a JavaScript library for building user interfaces.
• React Router: React Router enables "client side routing".
• React Query: data-fetching library for web applications.
• Vite: a build tool that aims to provide a faster and leaner development experience for modern web projects.
• Tailwindcss: a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. It works with a few official plugins as: Forms.
• PostCSS: a tool for transforming CSS with JavaScript plugins. It provides a way to automate CSS processing, such as adding vendor prefixes, minifying stylesheets, etc.
• Prettier: a code formatter tool that automatically formats your code to follow a consistent style, making it easier to read and maintain.
• ESLint: helps to find and fix problems with JavaScript code. It works with extensions for Typescript, React and Prettier.