https://github.com/minusmo/my-music-db

A single page application introducing My favorite musics
https://github.com/minusmo/my-music-db

css javascript

Last synced: about 2 months ago
JSON representation

A single page application introducing My favorite musics

• Host: GitHub
• URL: https://github.com/minusmo/my-music-db
• Owner: minusmo
• Created: 2019-12-19T12:04:47.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-07-19T10:21:29.000Z (almost 3 years ago)
• Last Synced: 2025-04-23T21:12:37.496Z (about 1 year ago)
• Topics: css, javascript
• Language: JavaScript
• Homepage:
• Size: 44.8 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# About This Project

A **Single Page Application** Introducing My favorite musics.

I really love musics and also love to make my own favorite music DB.

I think it will be great to introduce my favorite musics to my friends in the world and share my fantastic experience with the musics.

It doesn't have a living backend for serving my favorite music data.

But in the future, I will make a server for this.

Of course, my music DB will be updated whenever I find new great music.

## Built with

- HTML5

- CSS3

- Javascript(ES6)

- Web Components(custom elements)

## Tested with

- Mocha.js

- Chai.js

## Usage

Here's what you can do with this application

- See details about each music album(_ready_)

- Search a music(_not yet_)

- Sort musics By few options(_ready_)

- Filter musics By few options(_not yet_)

## To-Do

- [ ] Add Search Interface

- [x] Add Sort Interface

- [ ] Add Filter Interface

- [x] Fix Responsive Design

- [x] Add Favicon

- [ ] Update Browser Tests

## Site Performance

It is measured by lighthouse in Google Chrome Devtools

### Before Improvement

Desktop Performance

![Before Desktop](/readme_assets/dektop-before.png)

Mobile Performance

![Before Mobile](/readme_assets/mobile-before.png)

### After Improvement

Desktop Performance

![After Desktop](/readme_assets/desktop-after.png)

Mobile Performance

![After Mobile](/readme_assets/mobile-after.png)

### How was it improved

Site Performance is improved by using webpack.

I bundled the JS modules and minimized the JS code to main.js in dist directory.

But still needs to be improved for mobile Devices.

### Contact

- Email: bldolphin96@gmail.com