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.

Ori Ravid

Last update: Dec 3, 2022

Overview

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

You might also like...

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.

3 Jun 12, 2022

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

522 Dec 28, 2022

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

70 Nov 28, 2022

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.

9 Sep 24, 2022

Tinde-Chater is a Full Stack Chatting App. Uses Socket.io for real time communication and stores user details in encrypted format in Mongo DB Database.

3 Jul 26, 2022

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,

52 Aug 19, 2022

⭐ A non-SSR React starter with TypeScript / No Redux repo with the aim to implement scalable gold star standards from the get go!

A React starter repo with the aim to implement "scalable gold star" standards from the get go giving some examples with a couple of screens.

4 Aug 22, 2022

Amazon Clone Application using React JS, Context API, Firebase and Stripe with full E-Commerce Functionalities like adding to cart feature, user authorization, payment and many more.

Amazon Clone is the Fully functional Real custom made Web application that covers and entire E-commerece functionality from designing, User Authentication till Payments build using React JS, Firebase and Stripe.

18 Aug 9, 2022

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

11 Jul 24, 2022

Comments

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.

opened by TackleBac 1

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.

Related tags

Overview

Appo Music

`About`

`Features`

Music Player

Search

Artist Page

Album Page

Playlist CRUD

User Authentication

`Future Features`

You might also like...

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 clone of Google Keep with its original Material Design aesthetics

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

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

Tinde-Chater is a Full Stack Chatting App. Uses Socket.io for real time communication and stores user details in encrypted format in Mongo DB Database.

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

⭐ A non-SSR React starter with TypeScript / No Redux repo with the aim to implement scalable gold star standards from the get go!

Amazon Clone Application using React JS, Context API, Firebase and Stripe with full E-Commerce Functionalities like adding to cart feature, user authorization, payment and many more.

Full Stack Netflix App Clone using React Native and AWS Amplify

Comments

Readme for backend?

Owner

Ori Ravid

An Anime Streaming Site with minimal UI and ad-free anime streaming experience

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

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

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

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

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

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

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

Instagram MERN - Full-Stack Instgram Clone using MERN Stack and Socket.io

Nlw2 - Proffy - An online study platform that helps people find teachers online