Genshinfy

https://genshinfy.vercel.app/

Genshinfy

Sole Developer

  • Project Scope: January 2023
  • Project Type: Solo Project
  • Tech Stack: Nuxt.js, Vue.js, TailwindCSS, Howler.js, Firebase, Pinia, Vee-Validate

<section id="project_brief">

Genshinfy is a music player web application that allows people to upload and listen to music, mainly from the game Genshin Impact. Developed the application as an individual as a solo project to explore using the framework Nuxt 3/Vue Js.

About Page for Genshinfy Music. Genshinfy is a music streaming web application

</section>

<section id="process">

To explore Nuxt 3 and Vue JS, I created a music application that allows users to upload and listen to music with Firebase. After the music is fetched from the Firebase database, it is then played through the web browser using Howler Js, in a store made by Pinia, which allows the user to play music continuously as they traverse through each page.

Pinia store, allowing music to continously play as you traverse through the application.

</section>

<section id="outcome">

I had the freedom to choose whatever tech stack to work with, so I used Vue JS along with Nuxt Js for the project. I had to learn how to script components using Vue. In the end, I was able to successfully build a fully functional web application that can be used to listen and upload your own and others music. The project still has many features I would like to add, if given more time to do so which can be seen below, and I still look forward to coding more things using Vue.

  • Improve micro interactions
  • Allow users to create playlists and share links to other users
  • Search/querying functionalities
  • Music player options (fade-in/out, better loop control, speeds)
  • Next/Back buttons to control music queue
  • Music queue page to display current song queue
  • Display what current song is playing by highlighting current song
  • Music thumbnails

Genshinfy music favourites page

</section>

View the project links.