A full-stack clone of the incredible Apple Music online streaming platform, with an aim to re-create it's core features, seamless design, and excellent user experience.

Last update: May 13, 2022

Appo Music

About

Appo Music is a full-stack clone of the incredible Apple Music online streaming platform, with an aim to re-create it's core features, seamless design, and excellent user experience.

Backend:

  • Ruby on Rails

Frontend:

  • JavaScrip ES6
  • React
  • Redux

Features

Music Player

  • Fully functional music player
  • Clicking/playing a song adds song to music player and automatically creates a queue of next songs
  • Loop/shuffle functionality (setting saved for next session if logged in)
  • "LCD" display with current playback information and relevant links to song artist & album
  • 30 Second previews for logged out users
  • Space bar support to play/pause from keyboard

Search

  • Live search the entire database
  • Results seperated by appropriate categories
  • Selecting a result leads to relevant page

Artist Page

  • Displays most recent release and chronological discography
  • Live list of top songs – calculated by play count
    • Selecting a top songs leads to album that contains it, hightlights song, and brings it into view for easy selection
  • Quickplay
    • Start playback of artist's most popular songs
  • Artist description modal

Album Page

  • Displays album track listing and information
  • Ability to save individual songs or entire album to user library
  • Ability to add song to playlist

Playlist CRUD

  • User can create, rename, delete and add songs to playlist
  • Playlist page contains all playlist songs with a rotating display of their album's cover artwork

User Authentication

  • Simple, yet elegant modal for user account creation and login
  • Demo user provided with automatic login functionality

Future Features

  • Up/arrow/enter key functionality on album/playlist pages
  • Improved mobile compatibility

GitHub

https://github.com/oriravid/Appo-Music
You might also like...

X-Netflix is a streaming platform based on Netflix UI: built with ReactJS in frontend and nodeJS in backend.

X-Netflix is a streaming platform based on Netflix UI: built with ReactJS in frontend and nodeJS in backend.

X-Netflix X-Netflix is a streaming platform based on Netflix UI: built with ReactJS in frontend and nodeJS in backend. Built with FrontEnd: React.JS,

Apr 30, 2022

YouTube clone is a replica made by me from scratch of the well known online video sharing and social networking platform.

YouTube clone is a replica made by me from scratch of the well known online video sharing and social networking platform.

a replica made by me from scratch of the well known online video sharing and social networking platform.

Dec 9, 2021

Snow - social network can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Snow - social network can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Snow is a social network. Here you can create and share content! You can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Apr 29, 2022

Full Stack Netflix App Clone using React Native and AWS Amplify

Full Stack Netflix App Clone using React Native and AWS Amplify

Netflix Clone Recreated the current Netflix Application. Best part? Added the backend functionality as well.Hoping to add more functionality in future

May 10, 2022

This project is a simplified a full stack clone of Stackoverflow.

Stackoverflow Clone Live: http://clone-of-stackoverflow.vercel.app/ This project is a simplified a full stack clone of Stackoverflow. I wrote it to le

May 8, 2022

⌨️ A User-friendly, easy-to-use, scalable, and highly customizable component for automating your command+k experience.

⌨️ A User-friendly, easy-to-use, scalable, and highly customizable component for automating your command+k experience.

ScoutBar ⌨️ Spolight for your app See Demo On Codesandbox See Documentation ⚡️ Overview Users enjoy hitting CMD + K to search and perform complex acti

May 9, 2022

Shopping-cart - Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience

Shopping-cart - Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience

This simple shopping cart prototype shows how React components and Redux can be

Feb 1, 2022

A novel approach for security and user experience of Graphical Password Authentication.

A novel approach for security and user experience of Graphical Password Authentication.

Graphical Password Authentication Alohomora Harry Potter themed (not really) Graphical Password Authentication Flowchart and Architecture Solution Dem

Apr 26, 2022

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

May 14, 2022
Comments
  • 1. Readme for backend?

    Hi there, first well done for the great work. I was looking at the site you have built and think it would be great for a music project I want to try and build. I have some music files, music art images, on S3 storage on AWS. I was wondering would it be possible that this would be able to be hosted on AWS with the Backend so I could play the files from their. I haven't used Ruby on Rails as a backend before so am unsure if its even possible. I'm just starting with React and React Native currently. I'm still in college learning cloud and the various languages and methods associated with deploying content.

    Reviewed by TackleBac at 2021-04-07 23:07
Decentralized-Music-Ownership-System - A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain
Decentralized-Music-Ownership-System - A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain

Decentralized-Music-Ownership-System - A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain

Apr 22, 2022
Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)

?? Shopping App ?? Online Marketplace Built with MERN stack (MongoDB, Express, React and Node). ⚡️ ⚡️ ⚡️ Kiwi Shop ⚡️ ⚡️ ⚡️ ?? Table of contents Main

Mar 28, 2022
A ReactJS clone application of the popular Spotify music streaming service. This application utilizes the Spotify API and the Spotify Web Playback SDK
A ReactJS clone application of the popular Spotify music streaming service. This application utilizes the Spotify API and the Spotify Web Playback SDK

Spotify Clone Front-End A front-end clone project of the Spotify web player. The project was created using the create-react-app CLI. The app is meant

May 9, 2022
An opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos
An opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos

This is an opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos. It is backend gnostic and connects to decentralized backends like box, Dfinity, Filecoin and Crust.

May 9, 2022
A full E-Commerce Full Stack Amazon Clone which built using ReactJS. You can register, sign in and shop!

Amazon Clone with ReactJS In this Amazon Clone application you can register on the site, log in with your account, shop, pay for the products and see

Apr 22, 2022
A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!

A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!

May 10, 2022
Instagram MERN - Full-Stack Instgram Clone using MERN Stack and Socket.io
Instagram MERN - Full-Stack Instgram Clone using MERN Stack and Socket.io

Instagram MERN Full-Stack Instgram Clone using MERN Stack and Socket.io Visit Now ?? ??️ Tech Stack Frontend: Backend: Realtime Communication: Cloud S

May 11, 2022
Nlw2 - Proffy - An online study platform that helps people find teachers online
Nlw2 - Proffy - An online study platform that helps people find teachers online

Tecnologias | Projeto | Layout | Licença ?? Tecnologias Esse projeto foi desenvo

Jan 21, 2022
Peer-Learning-Platform - A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations
Peer-Learning-Platform - A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations

A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations. Facilitates students to look at solutions from the perspective of their peers. A platform that goes beyond learning and instils ethics and moral integrity within the community.

Apr 2, 2022
A clone of Google Keep with its original Material Design aesthetics
A clone of Google Keep with its original Material Design aesthetics

A Clone of Google Keep A minimal Clone of Google Keep written in ReactJS with Material UI Components, themed to look exactly like Google Keep, with co

May 14, 2022