Creation of Music Box

20 Oct
Admin / 320 views

Today i will tell you about creation of muzicbox.net . Which is a music storage website where you can upload your songs and listen to them. It automatically downloads songs lyrics, author and other info for you. It works like your iPod but only in cloud.

 

As Bronson said "I always wanted to be famous" so i decided that i can steal idea from existing music services such as soundcloud, deezer etc. I ended up with and idea about iPod in cloud.

But there was one problem i didn't know necessary technology. My website should be able to work without reloading because people will be listening to music and at the same time navigate some other pages. I had to make a choice between Angular and React.

 

It was summer, i bought angular tutorial on udemy and started to dig in, it was boring, hard and not very intuitive, at that time i wasn't aware of the ES6, Webpack and other "front-end" shit. After a week or so i decided to split my relationships with Angular ) I think it was because it has steep learning curve and it has less freedom of movement.

 

After that i started learning React and surprisingly it was much cooler and quicker. In my first "react" week i've build first sketch of player. Of course, it didn't look like this but it was fully operational and i was happy about React. In the beginning i thought that it will take one month for the whole project but i was seriously mistaken.

 

 

My next problem was data persistence, i had two options. First one was to manually save all variables and methods to top-level component (because it will persist and we can save there data) and the second to learn redux and to do it right way.

I've read a lot of articles about that and decided to learn redux. To tell the truth i haven't struggled so hard since learning Django. Redux was at first glance hard to figure out. There were actions (wtf ?) and some reducers, and data was passing here and there you know :) but luckily i found this tutorial which helped me a lot.

 

So. I've learned React and Redux but wait, i also need to learn some design stuff. Before that i was used to writing frontend on bootstrap and jquery, and to tell the truth i was happy with that but here i needed some lighter approach, so i decided to learn flexbox and grid layouts, finally i choose flexbox because of it' popularity and better compatibility.

 

And now after three months of hardships and 3k lines of Javascript, 2k CSS and 1k Python i want to present you a beta version of muzicbox.net .

 

PS follow your dreams

PPS dream big

 

 

 

© All Rights Reserved Redux Blog