500 Albums is a simple mobile web app that I designed and built to practice design and development. The app helps me find good albums when I am at the record store. If you visit the link above on Android, you will see a banner with an “Add to Home Screen” button. On iOS, you can tap the export icon and swipe the bottom section to the left and tap the “Add to Home Screen” button to add the app to your phone’s home screen like a native app.
Apple pioneered web apps in 2009 by adding support in Safari for special meta tags and a cache.manifest file to control what data was cached as part of the web app, Google has recently released tools including Workbox that makes creating web apps using service workers easier and Lighthouse that rates how closely a progressive web app meets Googles’s new standards. Progressive web application an important part of last year’s I/o conference.
The project was also a chance to design an app icon and I created a variety of different versions before I landed on the one above. I added the icon to the iOS splash screens.
My initial idea was to design and build the simplest functional web app possible using HTML and CSS from another project. By using a fixed width for the list box I avoided designing breakpoints. I designed and coded a responsive version but ultimately decided against moving forward with it because the larger images hurt load times on mobile. I tried out a responsive version with filter buttons but decided against moving forward with that version because it would have required adding a lot more data to my data model (a single JSON file) or even adding a back-end so that there would be attributes to filter.
I started with an older Angular JS address book project. Then I refactored it into JSX and React to get more familiar with React. Then I refactored it into ES6/Babel to learn a little of the newer syntaxes.
Designing a simple web app got complicated. Now I know why the original 500 album list was paginated. Loading a few 20k images isn’t a big deal, loading 500 20k images is slow. I didn’t want to add pagination, so that meant that the images had to be small and optimized.
Developing the idea for the project was almost as difficult as refactoring the code because I wanted to build something useful but avoid the temptation to add a new feature. I own a copy of Rolling Stone’s 500 Greatest Albums of all time, but when I am at the record store (we still have those in Austin ❤ Waterloo), chances are I didn’t bring the book with me. This filterable list could be reused with different kinds of lists such as top 500 beers, top 100 TV shows or top 100 movies, top 500 podcasts, 500 easy to prepare recipes, etc.