The web-player has been hosted on : Soundemic.

Welcome to Soundemic!

Soundemic is an Music-Player Web Application which allows you to listen songs online and add them into personalized playlists.

Landing Page

• New users can Signup using their name & creating a username and password for their account to access the playlists feature of the website.

• The users already having an account can alternatively Login with their username and password.

The user can access the landing page directly by clicking the icons on the above mentioned two pages.

• Users who want to access the songs directly without logging in/ making an account can choose the feature Listen now.

Profile Page

Logged in users can acces the profile page as soon as they login. They can create a new playlist with desired name and then go to to Search page to search amongst the songs they wanna add to their playlist.

Search Page

• The search page is empty by default, and on typing text in the search bar, all the relevant songs are displayed.

• The submit button onclick reveals all the details of the song, which can then be played and added to playlist if the user has logged in.

Non-logged in users do not have the functionality of add to playlist option.

• After adding songs to the playlist, the user should return to the Profile page to access his/her playlists from the list of playlists he/she has.

The Music Player

Each song has a music-seek which displays the progress of the song in real time, which can be clicked at different places to jump to another moment of the particular song in play.

Playlist Page

This page can only be accessed by the Logged in user from the Profile Page. The Playlist page displays all the songs which the user added in his/her playlist which can be played or removed as per requirements.

This application has been made by :-

1. Anirudh Mukherjee

   Learnt: MongoDB, Gridfs, Express, Auth, Sessions, Ejs, Bulma.

   Contributions:

   • Whole backend.
   • Connecting backend with frontend via axios.
   • Helped with debugging some front end features.

2. Priyansh Vyas

   Learnt:

   • Using Express in a project.
   • Using DOM manipulation and template literals.
   • Lightweight JavaScript libraries like ScrollReveal and Particles-Js.
   • Bulma CSS framework and EJS.
   • About some new CSS attributes, event listeners and DOM selectors.
   • Implementing and working with full page background images, CSS transitions and JSON data for the first time.
   • How to solve merge conflicts using terminal.

   Contributions:

   • Music player controls and their styling across Playlist and Search pages.
   • Created the Landing, Profile, Playlist, Search pages and made them responsive.
   • Edited the layout and managed DOM manipulation of all pages.

3. Amitava Chakrabarti

   Learnt: New CSS features New Bootstrap features, Javascript, Bulma CSS Framework, Working with ejs files.

   Contributions:(Front-end)

   • Sign up page.
   • Login page.
   • Styling and responsiveness of Songcards on Search page.
   • Created and edited Profile page, added responsiveness.