As a long-time Spotify user, I love the end-of-year stats that Spotify surfaces each year. If you’re like me, you probably hate waiting till the end of each year just to see your top songs, artists, and genres. This is why I developed , a progressive web app that satisfies that curiosity! Spottr What Spottr is a PWA developed to surface your Spotify listening habits year-round rather than at the end of each year. Why The first main reason as stated above was the burning desire I had to know about how my listening habits have changed over time. The second reason was to rewrite this project again from scratch using Angular 10, Tailwind CSS, and push my design and front-end development skills. My first iteration was started back in 2018 with Angular 6, but I scrapped that since the project was not planned out properly. I am by no means an expert front-end developer (I mainly do back-end), but I wanted to see if I can produce a significantly better application just with more careful planning and research. One of the more interesting pieces of the app is the . This TTL cache was developed out of a need to keep the PWA snappy and keep data consumption low. If you think about the usage patterns of someone using Spotify, people may sometimes spend lots of time browsing different artists, albums, tracks, etc. which could result in a lot of extra round trips between the client and Spotify servers. This service was developed to provide a centralized mechanism to cache all HTTP requests. This allows for any other service to leverage the same caching strategy, resulting in faster development times. CachedHttpService The library also allows for a custom time limit to be set for the cached entries (the duration is known as TTL or time-to-live). Each request can have a unique TTL if you so desire. As a result, all other Angular services developed such as , , etc. all follow a repeatable and consistent pattern which reduces the chances for any silly bugs. ArtistService TrackService @Injectable()
export class MyService {
    // Inject the service here
    constructor(private http: CachedHttpService) {}
    
    getSomeData(id: string): Observable<GetSomeDataResponse> {
        const endpoint = new URL(ENDPOINTS.get(`get_some_data`));
        return this.http.get({
            url: endpoint.toString(),
            cacheMins: DEFAULT_CACHE_MINS,
        });
    }
    
    putSomeData(id: string, foo: Foo, bar: Bar): Observable<PutSomeDataResponse> {
        const endpoint = new URL(ENDPOINTS.get(`post_some_data`));
        const body: PutSomeDataRequest = {
            id,
            foo,
            bar,
        };
        return this.http.post({
            url: endpoint.toString(),
            body,
        });
    }
} This is just a brief overview of how it works, but I may write a more in-depth post on this in the future. On the UI side, this is my first project experimenting with Tailwind CSS which ended up being quite pleasant to use. A good chunk of the interface was built using . As a long-time Flexbox user, CSS Grid has proven to be an even more flexible way to lay out your components. CSS Grid Short self plug: If you’re looking for an extensive yet simple-to-learn SCSS framework, check out my project ! Cirrus How to Use Head over to . spottr.vercel.app Log in using your Spotify credentials. Browse Spottr! Current Features 📈 Top Stats View details for your top: Artists Tracks Genres Get data broken down for: Last 4 Weeks Last 6 Months All Time 🎶 Playlist Browse the playlists you follow or created. Get similar tracks for a given playlist. Export similar playlist to your Spotify account. 🎸 Track View track details including musical and audio features. Discover related tracks. 🎤 Artist View artist genres, follower count, and popularity. View artist's top tracks. Discover similar artists. Preview Tech Stack ⚡ - a platform for building mobile and desktop web applications. Angular 🎨 - Rapidly build modern websites without ever leaving your HTML. Tailwind 🎵 - for fetching Spotify data. Spotify API 📊 - Simple, clean and engaging HTML5 based JavaScript charts. Chart.js Planned Updates View recently played tracks. View top albums. Detailed beat analysis graph. Informational cards for each track and artist. Song lyrics. Thanks for reading! 💎 Thank you for taking the time to check out this post. For more content like this, head over to my actual . Feel free to reach out to me on and follow me on . blog LinkedIn Github

Mozilla

Progressive

Web Assembly, Automation and Cooking With Noonies Nominee Stanley Lim

Introducing Github1s: A Browser-Based VSCode Project Viewer

2021 - HackerNoon Contributor of the Year - WEBDEV

2021 - HackerNoon Contributor of the Year - ANGULAR

Nominated for 2022 - HackerNoon Contributor of the Year - Phishing

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Monitoring

Nominated for 2022 - HackerNoon Contributor of the Year - Testing

Too Long; Didn't Read

🎉 Introducing Spottr - Your Spotify Stats Year-Round

🎉 Introducing Spottr - Your Spotify Stats Year-Round

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Boosting Your Productivity and My Scrappy Approach to Getting Things Done 🚀

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

Boosting Your Productivity and My Scrappy Approach to Getting Things Done 🚀

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps