IX music

 

Demo       Repository

Description
🎼 Music player application with server served playlist stored in SQL database.

IXmusic is a fullstack application which enables users to play and listen to music.
Application utilizes the Node, Express, React, SQLite as a stack.

Frontend is built with React.
Backend is powered by Node and Express.
Application utilizes Rest API.
Information about every song such as Name, Artist and Year are located in SQL database SQLite.
Song images are fetched from Apple Music.
Backend uses dependency sqlite3 to connect and communicate with SQLite database.
Backend uses library Knex.js for SQL query building.
Items are being fetched on the frontend by axios library.
Frontend utilizes React Hooks.
Styling is done with SCSS.
Icons are provided by @fortawesome library.
Playlist is in form of an animated sidedrawer, animation is done with transform property.
Application is responsive and mobile-friendly.

Table of content

• Features
• Motivation
• Installation
• Built With
• Ideas for future releases
• License
• Contact

Features

• Play songs
• Pause songs
• Change songs
• Song logo
• Basic song information
• Playlist
• Jump through a song by clicking the progress bar
• Responsive/mobile-friendly

Motivation

I wanted to build music application to practice Node, React, SQL and listen to some of my favorite music through an application. Setting up the player component and adding the playlist was fun experience. Anyway, I also hope you enjoyed the songs.

Getting Started

Installation

To run application on your local machine follow these steps:

1. Clone or download the project from the repository.

2. Install both backend and frontend dependencies with this one command:

   # with npm
   npm run iall
   
   # or with yarn
   yarn run iall

3. Start development mode with command:

   # with npm
   npm run dev
   
   # or with yarn
   yarn run dev

4. Run the application in the browser with url:

   localhost:3000
   

Built With

Frontend bootstrapped with create-react-app

Backend dependencies

• node
• express
• sqlite3
• knex
• body-parser
• compression

Frontend dependenceis

• react
• react-dom
• axios
• sass

Ideas for future releases

• Ability for users to add songs directly through the website
• User authentication
• Rating
• Favorite songs/Custom playlist
• Additional data about the song
• Artist profile

License

This project is licensed under the MIT License

Contact

With any ideas or questions...

You can contact me via email: [email protected]
Or fill the contact form at my personal website