Delivering a mobile app in under 40 hours

6 minute read

The Gravitywell team enjoyed some well-earned rest over the weekend — well, after the obligatory trip to the pub on Friday evening to toast to our achievement at least. Laura was assisted in her celebrations by a conveyor belt of gin and tonics. Double figures, so I’m told. Our cause for celebration? The completion of a week-long hackathon, where our goal was to develop a hyper-local coffee delivery app for a fictional specialist cafe.

For those of you familiar with the hackathon concept, you’ll know that while it may be a case of all hands to the pump, time is always against you. If you aren’t sure what a hackathon is (don’t worry, it has nothing to do with stealing your bank details) check out this article from our most recent out-of-town adventure.

Although arguably less of an adventure than setting up camp in a Cornish retreat, our Bristol-based ‘Cafe Hack’ last week was just as intense and focused. Needless to say, our studio coffee machine was on its grind. This is an insight into delivering an app in under 40 hours.

As with most client projects, our hackathon started with a brief. Jack and Simon had decided on the concept, which was exciting but also straightforward. We’re all familiar with food delivery apps, so being able to visualise the end goal was a massive help. The unique idea of keeping it hyper-local (in every sense of the word) gave us an understanding of how the app needed to function for both the admin and the user.

Crucial to maximising precious hackathon time is planning, so as ever the developers met for a kick off meeting to agree the approach, which looked something like this:

  • Follow standard git flow.
  • Manage merges via bitbucket pull request.
  • Don't get bogged down with pull requests during setup.
  • Aim to involve a mix of front and backend teams for all PRs to better share overall knowledge.

An excellent way to maintain fast progress is to produce wireframes — simple sketches of each key screen that clearly show functionality. These wireframes give developers all the visual instruction they need to begin assembling the app. Sam produced them on Semantic UI, a UI component framework that helps create beautiful, responsive layouts.

Other resources used in our Cafe Hack:

AWS AppSync - An application development service hosted in the Amazon Web Services public cloud that synchronizes data for mobile and web apps in real time.

GraphQL - A query language for APIs and a runtime for fulfilling those queries with your existing data.

iZettle - Take card payments in-store, designed for small businesses.

One of the many benefits of the hackathon process is the opportunity to learn, and this includes new tech. Exploring new software libraries and products for the hack often results in a discovery of something we then use for client work in the future. This time was no different, with AppSync used for the first time. It took a while to get to grips with, but once we had it mastered it became central to the project.

Rapid progress was made on each day of the hackathon, and to keep up with this we held daily demos at 5pm, each member of the team showcasing work and discussing any issues they’d encountered. This was also a great opportunity to formulate a plan for the following day.

By Friday evening we had all the disparate parts assembled so that we could see an order make its way through the system (currently without our usual design layer on top). The fictional cafe isn’t actually called ‘Jesus Cafe’, but the more I think about it, the more I think that’s possibly the best cafe name I’ve ever heard. Cappuccino into Chianti? That would be cool.

Cafe app journey

How can Hackathon skills be applied to client projects?

Although we wouldn’t necessarily run client projects in exactly this way (more planning is good!) there are number of situations that would suit this general approach:

Proof of concept - We’ve had an idea but we’re not sure if it’s possible
Rapid prototyping - Let’s build a something that shows how the key features will work
Demos for clients or for investors - We need something that shows a vision of the future

So you can see that a Hack might be a piece of a larger project: a very cost efficient way of solving a problem or answering a question, before a larger commitment is made (or lost).

If you've got a problem to solve or an idea that you'd like us to produce a prototype for, then please get in touch.

Written by Hugo Walker (Head of Marketing & Digital Content). Read more in Insights by Hugo or check our their socials , Instagram