TuneIn

When I applied to Addis Software for an Internship position. They gave us this project where we basically build a fake Spotify 😂 using React, Styled Components, Redux and Redux Saga. 

I had a hard time understanding Redux Saga. What it is for? What problems it solves? still not confident on that thing. I remember the boilerplate code I wrote just to get songs list 😭.

Anyways I tried to steal something from Spotify's UI and built this project, but it was not that much fun for me. I needed to do something. So, what did I do? First, I tried to separate the layers. The UI calls the Saga, then the Saga calls the service and put data to the reducers based on the status like loading, failed and success. It was a mess, maybe I didn't really understand what was going on.

Deploying the finished project was one of the requirements. To make the project more solid I needed to have a backend, but building a whole backend with a short period of time was impossible. I could connect it to some BaaS like supabase, but there is no challenge in that. I wanted to try something new, not complicated but new. 

LSClient.ts, that was my backend !!. You have mongo-client for mongo right. I tried to use the browser's LocalStorage as a backend(no deployment, no noting if you think about it). But why the abstraction you might say, okay then let me ask you. How could I feel a sense of accomplishing something if I don't abstract it away with some shity typescript?? 😉😉🤣🤣. 

Anyhu that's what I did. I created a class with 4 static methods (corresponding to the 4 HTTP methods). and in the second screenshot you can see how I CRUD the fake backend 😉 to imitate calling a real backend. 

This is the deployed one if you want to check it out: 

https://tune-in-tracks.netlify.app (

Disclaimer: Its not responsive, don't want open it on mobile. You will hate web development. 🤣🤣🤣

And the Github Repo: https://github.com/dagimg-dot/TuneIn