Podcast listening app built with Vue 3
Deployed app: Visit Podcastin
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.
podcastin-homepage.mp4
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.
- 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
A few of the things you can do with Podcastin:
User Authentication
podcastin-login.mp4
Uploading files, editing and deleting them
podcastin-uploading.mp4
Listening to podcasts throughout the app
podcastin-audio-playback.mp4
Leaving comments and sorting them
podcastin-commenting.mp4
VSCode + Volar (and disable Vetur).
# 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