louisefindlay23/colorflow-player

Colorflow Player is a Node.js music streaming app (Spotify and Deezer) with a ColorFlow inspired UI and split-testing analytics.

Hi 👋, I'm Louise

A passionate web developer & technical writer

👨‍💻 About Louise

🖥 I'm a web developer and technical writer passionate about educating new developers and non-technical users about web development, demystifying complex topics, and empowering them to learn new skills and technologies they thought they couldn't.

🎓 As an RGU graduate, I'm always keen to continue learning. I've participated in the MLH Pre-Fellowship and WorldSkills Advanced Web Design Heat.

📝 In my spare time, I write guides to empower non-technical users to learn more about their websites and other technical areas such as email hosting and domains. I also write about useful developer tools and self-hosting applications.

💻 Tech Stack

Languages

HTML, CSS, and JavaScript

Back-end

Node.js and MongoDB

Frameworks

Next, Nuxt, and Express

Templating

EJS, Liquid, and Markdown

CMS

WordPress, Shopify, and Prismic

Hosting

DigitalOcean, Vercel, and Netlify

🔗 Featured Links

colorflow-player's Issues

More Metrics

Add even more metrics to the Analytics Dashboard.

• Current session views (req.session.analytics[0]) vs Overall
• Divide Song Plays or Page Views (or both?) by Type (Playlist vs Song vs Album)
• Number of sessions
• Session length

Analytics

Add analytics dashboard to compare Spotify vs Deezer. Use Passport-Local to create user accounts stored in database.

For number of views on the page, the click rate and clicks over time and compare between pages.

Responsiveness

Add responsiveness

DigitalOcean Hosting

Host on your Node.js DigitalOcean droplet and use a subdomain (coverflowplayer.louisefindlay.com).

Finish Album View

Lay out all audio tracks with metadata - similar to Spotify UI

Logging

While most console logging has been removed, use a logging package for the rest like Log4JS.

See other Node.js best practises

Refactor Code

• Remove extra node modules (that aren't being currently used)

• Refactor ColourThief to either use RGB Colour Codes or native Hex conversion (lokeshdhakar.com/projects/color-thief)

• Refactor Spotify routes into its own router (see Lab 3 notes) and then split into its own file

Branded UI

Create Branded UI for Colorflow Player (wordmark logo) for README and homepage.

• Match Spotify branding (green and black plus font) for Spotify side
• Match Apple Music branding (white and pink plus font) for Apple side

Secure User Accounts Further

Increase security on user accounts by implementing:

• Two Factor Authentication - Tutorial
• Preventing use of Pwned Password - API Docs
• Sanitize Inputs - Tutorial

Database

Setup MongoDB database (probably Atlas) for analytics user accounts (Passport-Local) and uploaded images for colour-matching album artwork.

Refactor to Vue

See what tech stacks are valid for coursework. If it requires a front-end JS framework, change EJS to Vue.

Caching

Server-side caching

Use Redis to cache data from Spotify and Deezer API to speed up song searches

Client-side caching

Bundle and minify CSS and JS

Show 30s duration

Currently using 30s preview for audio so would be nice to show the duration.

Split Testing

Use Express A/B and other analytics and split testing tools to calculate all sorts of data (number of sessions, page views, session duration etc. and access it through an admin panel (/analytics) which requires a registered account.

Create Deezer Music Coverflow

Create the Apple Music version of Coverflow Player with the MusicKit JS API.

Search Feature

Create a search form where users can search for songs/albums by artist, song name and album name. (Use Library Trackr as a basis)

Structured Data (Schema)

Implement Structured Data (Schema) for Search Engines

• Music Album
• Music Playlist