Week 5 of CodeClan completed, (it’s Wednesday of Week 6 as I type this!?) and, as ever, it’s been an exhausting cognitive whirlwind. During week 5 I constructed a complete (albeit primitive) webapp from scratch, and I couldn’t be more pleased with myself! In large part this is due to the retro aesthetic and the vaporwave animated gif on the home page:

An animated screenshot of my app's homescreen

We had 4 possible briefs to choose from, and since one of them involved cataloguing music, I went for that one. Click details to see the full brief, if you’re interested:


I spent a full day on planning. I didn’t necessarily see the need to spend a full day on planning, as the project is basically rehashing the stuff we’ve spent the last 3 weeks on, but the instructors seemed quite insistent, and they’ve seemed to know what they’re talking about so far, so fine.

My natural tendency would be to make things as complicated as possible and try to stretch myself, but I was convinced by both the tutors and students from the cohort ahead of me to concentrate on getting the Minimal Viable Product completed first.

I used a bastard hybrid of MoSCoW and Kanban on a Trello board to keep myself organised. Had there been other people involved in the project I would definitely have separated these out into separate boards. I also took screenshots of the board each day, so that I could create a pleasing time-lapse animation of the project’s progression!

An animated screenshot of my Trello board during the project

As the project brief specified that the record store owner wanted some inventory management software that was not going to be made publicly viewable in any way, I decided that this was very much someone living in the past, so gave everything a very retro CRT vibe.

The finished project includes a PSQL database with full CRUD functionality and a Ruby controlled Sinatra front end that follows RESTful route conventions. (This is in preparation for when we will be introduced to Ruby on Rails, at which point, we’ve been told, we’ll be able to knock out the mechanics of this project in about 15 minutes… :/ )

As we were supposed to be concentrating on using the technologies we’ve already studied, we were strictly forbidden from incorporating any JavaScript. This turned out to be a bit of an annoyance, as every time I googled one of my ideas to see how it could be done, the answer was invariably JavaScript…

The full project is visible on github!

There’s a live version available to play with on heroku! Click here to see! Don’t try to put in anything that has apostrophes, as that will cause it to crash. And please don’t delete everything! The system will let you, as it’s functional that way. I tweeted out a link to it when I first put it on line, with those warnings, and within 20 minutes it looked like this:

Tunes_Matter index defaced with bork bork everywhere

Whoever wrote “b0rk b0rk” everywhere followed the letter of my requests, I suppose…

If you’re a fan of motion sickness, I created a prezi to present my project on the final day that includes a lot of my planning sketches. The first couple of slides are meant to be a trailer-type dealy, so imagine them read out in THAT VOICE. (I used an empty whisky tube to achieve the same effect, on the day.)

The code snippets that are displayed show how I implemented the colour-coded low inventory warnings using some sly CSS, and how I made the search boxes capable of fuzzy search, whilst still presenting the illusion that Artist and Album names are capitalised….