Podcast listening app built with Vue 3

Deployed app: Visit Podcastin

Introduction

Podcast listening application built with Vue, Firebase and Pinia for state management.
Some of the functionalities developed are user authentication, file uploading, audio playback, internalisation, commenting, editing, and deleting files.

https://github.com/PentekTimi/podcast-listener/assets/107998811/d89e9cbf-9d4f-4c6e-a42f-4d5f27d4ba71

The goal of the project was to create a performant app while getting familiar with the Vue.js framework. Before using the new Compositions API I wanted to understand the traditional way of building Vue components with the Options API.

Tech Stack

• Vue3 - built with Vue 3 framework and used Options API. The development environment was configured using Vite. Vue related libraries/plugins used in this project:
  • Vue Router - router to navigate the web app
  • Vee Validate - library to validate forms
  • Pinia - store library and state management framework for the app
  • Vue i18n - internationalisation plugin
  • Vite PWA - Progressive Web App (PWA) plugin for Vite
• Firebase - backend solution for the project. Firebase hosts the database for the application and manages authentication.
• Tailwind CSS
• Nprogress.js - library that shows the progress bar while the page is being loaded
• Howler.js - audio library

Features

A few of the things you can do with Podcastin:

User Authentication

https://github.com/PentekTimi/podcast-listener/assets/107998811/472c1352-2bbf-4def-9408-d72437df6b2d

Uploading files, editing and deleting them

https://github.com/PentekTimi/podcast-listener/assets/107998811/f71db6a1-cac1-4902-b4e8-0bc1265a9762

Listening to podcasts throughout the app

https://github.com/PentekTimi/podcast-listener/assets/107998811/3acaaf54-fd72-414e-af84-bb3281dd05e5

Leaving comments and sorting them

https://github.com/PentekTimi/podcast-listener/assets/107998811/9f8142d2-fcce-4ec2-b852-59e9325ccf60

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

How To Use

# Clone this repository
$ git clone https://github.com/PentekTimi/podcast-listener

# Go into the repository
$ cd podcast-listener

# Install dependencies and run the server
$ npm install
$ npm run dev

# To run the app in production mode, use
$ npm run build
$ npm run preview