Music Pro X - DevSoc Project.

About

MusicProX is a app where you can search songs . Add songs to queue ,playlist and liked. And play them with the MusicProX player.

Table of Contents

• Database Schema
• Browser Support 🌐
• Installation 🐣
• Contribution Guidelines ✒
• Things learnt during project
• How to use ? 📖
• Current Implementations 👨‍💻
• Future Implementations 💻
• SnapShots

Database Schema

Browser Support

Edge	Firefox	Chrome	Safari	Opera
Edge	last 3 versions	last 3 versions	last 3 versions	last 3 versions

Installation

Follow these steps to install this project directory:

# clone the repo
$ git clone https://github.com/Rohitkk432/Music-Pro-X.git

# go into app's directory:
$ cd Music-Pro-X

Client Setup

$ cd client

# Install dependencies
$ npm install --lagacy-peer-deps

(change server link : default set to localhost:4000)
(change google oauth cleint id in ./src/index.js)

# start client
$ npm run start

Server Setup

$ cd server
$ npm install

(create local postgres db using pgadmin and configure .env as per index.js)
# Populate db
$ cd ./db_queries
$ psql -U username -d myDataBase -a -f create_tables.sql
$ psql -U username -d myDataBase -a -f add_songs.sql

# start server
$ npm run dev

Contribution Guidelines

1. Fork the repo on GitHub.
2. Clone the project to your own machine.
3. Commit changes to your own branch.
4. Push your work back up to your fork.
5. Submit a pull request. (Make sure you merge before you make a pull request!)

Pull Request Guidelines

1. The subject should be a short one line summary of the change you've made.
2. The extended description should include a deatiled description of the changes you've made and also a list of all the files you've made changes in.
3. One pull request should cater to only one change. *A change may include multiple file changes that are essential to solving the issue/change.

Things learnt during project

1. At the start of the project i only knew how to use HTML, CSS, JS. but during the project i learned PostgreSQL , express(basics), APIs, HTTP requests, Postman, ReactJS.
2. I learnt how to deploy website on Vercel(i used for client-side) and Render(i used for server-side).
3. Faced many issues with google login and atlast resorted to use React Library for it.
4. i didnt know in the start of project how to use database , that we have to deploy server and client seperately, that there is even a server side but now i have learnt about it.

How to use?

1. Login using BITS mail id (as the app is only for students of BITS).
2. After logging in you will be redirected to the app home page where you can search songs by typing in search bar (currently we have only 18 songs).
3. You can add songs to queue , playlists ( there are 3 playlists) by tapping on plus and choosing appropriate option. You can also like a song it will be added to liked songs list.
4. On home you can tap on the footer component this will bring up the music player and queue list and there are options like random,loop,autoplay,etc.
5. One can also remove songs from specific lists by tapping on minus sign .
6. you can also play whole playlist by tapping play in playlist section it will add all songs og playlist to queue and overide the queue.

Current Implementations

1. Music player with functionalities.
2. Queue,Playlists,liked features with a postgres database
3. integrated google login.

Future Implementations

1. On reload when on th app page the app is breaking so need to fix it.
2. Footer should also control the player like pause play and other features.
3. lists like playlists and queue are only rerendering when we move to another section and come back that needs to be improved.

Snapshots

Demo Video -

https://www.loom.com/share/1e2c0437f7e24dbf90c5157f44b0dac0

Login Page

App Home Page

Songs addding functionality

Queue and Music Player

Liked Songs Page

Playlist Page

Music PLayer

Social Media

Instagram: https://www.instagram.com/devsocbitsgoa

Devsoc's Website: https://devsoc.club/