Claire’s Ruby project: a cycle ride logging application

After four weeks of training at CodeClan, Claire started building her first project: Biked, a cycle ride logging application.

My week five blog post has wedged its way solidly into week six, as the pace of learning ramps up and we cover even more new concepts. But while it’s been great to cover so much ground in a short space of time, week five was an excellent opportunity to reflect on the last month, consolidate our Ruby learnings and build our very first web application.

With no classes or structured teaching, our Ruby project week left students to their own devices to plan, code and construct a web application that used databases and the Sinatra web framework. With twenty students in the cohort, project solutions were varied and interesting and ranged from a recipe maker to a repository for D&D spell books.

So what did I build?

A screenshot showed Claire's Biked app in a web browser

I decided to adapt a starter brief from CodeClan to build a cycle ride logging application. This used a many to many database table relationship to log bike rides of a specific route against a cyclist profile. I also wanted to add additional functionality including leaderboards, listing the latest rides, randomising route information and other bits and pieces.

I was super excited about this piece of work, because it was the first opportunity to write a bigger project, complete with a front-end that users can interact with. With a week to get stuff built, I initially thought I would have a tonne of time to build something relatively challenging. However, once I started planning and considering my strengths and weaknesses, I realised that I would need a significant amount of time on the CSS; I hardly knew any…

How I spent my time building my first web app

My week was roughly split with one full day of planning, three days to build functionality, and three days to learn some responsive CSS and pull the site together. In three days, I managed to build a good amount of Ruby functionality, and I really enjoyed piecing it together. My Ruby didn’t suffer throughout this process – in fact I deeply enjoyed solving problems and wrote so many loops I was dreaming about them. Which is probably a good thing, because loops and I sometimes don’t get along.

Screenshot of Biked App showing a cycle route and stats

CSS was much more of a slog. Without any experience of using Flexbox, I had to spend a significant amount of time wrapping my head around its behaviour. I found this guide extremely helpful, and it quickly became my Flexbox bible, alongside my pal Simon, who is a whizz with CSS and very kindly helped me with some great tips and guidance.

I suspect my final CSS files are a bit of a flaming garbage fire, but they seem to do the job and the whole frustrating process been an excellent learning experience. I am really pleased I have managed to write CSS that is responsive and will adjust the website accordingly.

Reflections on CSS and Ruby

It’s been interesting to hear other students’ perspectives on CSS – many preferred it to building functionality, because changes are visual, immediate and feel satisfying. Personally, I much preferred writing the functionality and I feel a bit unhappy that because I had to spend so long on CSS, my Ruby is pretty fragile and my methods don’t account for edge cases.

However, all in all, it’s been great to try and learn a bit of something I’ve never written before. Flexbox is well worth investing time in, because it creates responsive websites without writing media queries. My learning has been mostly solo, with support from instructors (and Simon) when I was properly stuck. I’m pleased I managed to work through my frustrations to build something that looks alright.

Go and have a look if you fancy

After a bit of a false start, I managed to deploy my web application to Heroku. So if you’re inclined, feel free to go and have a look at my first ever web app. You can add a profile, add routes and log rides.

Key takeaways from my project week

  • Spend a significant amount of time planning. I wrote wireframes for every single page of my app, did user journeys, personas and diagrammed all my classes and database tables. It made a massive difference and I’m so glad I put the effort in.
  • Responses from people who don’t program have been luke-warm. My site looks like something you could magic up with WordPress in about five seconds, but what non-programmers don’t seem to get is that I built everything from scratch, with a bit of help from Sinatra. I should get used to underwhelmed reactions, haha.
  • The usefulness of my app is minimal. I’ve built a very rubbish Strava, but despite its limits I’ve really enjoyed making it. For future projects, I’d like to focus on usefulness a bit more – if I’m going to spend a week building a thing, it shouldn’t be redundant at the end of the process.
  • Working solo has been fine, but the real value has come from peer support. Coding might seem to be a loner activity at first glance, but it’s actually far more rewarding when other people are involved, either helping you solve a problem or looking at your build and suggesting improvements. No coding project is an island.
  • I loved seeing other students’ solutions to the briefs they were set. Programming is hugely creative, and the variations in web apps just helped to prove that point. I’m so delighted that everyone in my cohort built something workable and hopefully had fun doing it. I also learned lots from seeing how others approached their apps.

More links

Here are some of the resources I used to help get my head around CSS:

This post is reproduced with permission from Claire’s original LinkedIn post.

Read more CodeClan project blogs

Learn to code

Find out more about our 16-week Professional Software Development course or come along to our next info session in Edinburgh or Glasgow.


Receive our newsletter to hear about courses, events and more.


Don’t be a stranger... Stay in touch!

Why not sign up to our newsletter? We will keep you informed about new courses and also send you information from the world of digital.

Enter a query in the search input above and hit return to see results.

We'd love your feedback!

Did you find what you were looking for?