Hackathon 2022 | Project Journal

By now you probably know how much we love a hackathon at Gravitywell. Our annual retreat brings us closer together as a team, teaches us new skills which we can apply to client work and gives us new internal projects to take forwards in the future. This year is no different as we’re holed up in the beautiful Cortijo El Cachete, nestled in the Andalucian countryside. 

While Livin’ la Vida Loja documents our day-to-day goings-on, this daily journal will focus on the technical aspects of our hackathon project — a realtime photo-sharing app to curate your best moments.

Monday

Our week began in earnest with a project kickoff meeting. Without a doubt one of the most important moments of the hack, this session defines the direction we’ll take and is an opportunity to discuss ideas and allocate tasks.

Lewis came up with a great idea for a realtime photo-sharing app with a focus on smart curation. While iOS creates memories from your camera roll, they’re created solely for you. And while WhatsApp is currently the defacto photo-sharing platform amongst friends, its primary purpose is messaging and doesn’t offer much in the way of image or video curation.

As is often the case during kick meetings, one of the main challenges was refining the flurry of creative ideas put forward by the team. We genuinely could’ve sat and discussed and dissected all day — hey, maybe even all week — but time is of the essence on a hack, of course.

To set ourselves up for the week, all of the devs started by designing an ERD (Entity Relationship Diagram) so we knew what models we’d need to build in the database.

Matt and Sam cracked on with refining the wireframes (al fresco, of course). Although this is a brand new project we never go into a hackathon cold, so always have wireframes ready to give everyone a day or two's worth of work. From our article How to run a hackathon:

Consider how much planning and research you want to do in advance. Although starting the conceptual process during the event can be fun, you might want to arrive with a pre-prepared topic in order to save precious time. It’s easy to lose a day exploring ideas for the event so it’s useful to have some key decisions made already, but at the other end of the scale be careful not to dictate too much otherwise the project will lose the sense of discovery and excitement.

Matt also settled on a vision for the brand. Essentially,  we're building a photo-sharing app, but it’s less about taking photos and more about capturing moments, collecting snapshots and creating memories as a group of friends. The obvious theme for us was based around scrapbooking, nothing too precious, but plenty of sentiment attached.

The name Scrappi fell into place almost straight away. We spent more time exploring the concept, as well as other themes, but we continued to circle back around to Scrappi. It ticked a lot of boxes. It’s easy to say, read, remember and has the right tone for the brand.

The idea is that you treat Scrappi as a collaborative digital scrapbook for you and your friends. We wanted the brand to feel accessible and fun. The logo design was quick, not unlike the process of using the app. It has a modern bold font combined with a strip of tape, obviously hinting at the cut paste media involved in scrapbooking.

Traditionally, orange and pink are advised not to be used together, but we were keen to combine "uncomplimentary" colours to communicate the casual nature of the app.

Meanwhile, George got started on password-less (magic link) authentication and Julian worked on our CI pipeline using CircleCI. Although typically an end-of-the-week kind of task, getting our deployment flow sorted early on means we can get the app running on our phones ASAP — we're not waiting to see updates, generate content and test functionality!

Tuesday

We want to roll up images into ‘memories’ and to do that we’ll be using Google Cloud Vision. The challenge is how we determine what’s important and meaningful to a user because while there may be objects such as clothes or cups in the image, that’s not relevant to the point of the photo itself.

Dulcie explains:

Check out Simon's take on this unique challenge in his aptly named article, The importance of cups. 🍵 👀

Meanwhile, Sam and George finished off the passwordless auth flow and user account creation and Evridiki worked on the media processor, generating optimised thumbnails and laying the foundation to hook up the Computer Vision API.

Lewis scaffolded the UI - we can now click through each screen and go back to hook it up with all the clever stuff!

Wednesday

Coffee in hand, Julian and Dulcie worked on uploading to S3 and connecting the media optimisation and machine learning tagging processes so that posts are intelligently tagged.

Meanwhile, Matt put together his UI kit so that the devs could quickly assemble screens without the need for a full design. This helped speed up the process for us - especially important during a time-sensitive event like a hackathon.

George and Lewis worked on automating the process to introspect our Prisma backend’s GraphQL schema and generate types on the frontend. Typically your GraphQL queries and mutations are not typed in the frontend without manually going through and adding them, so this speeds up ongoing dev massively yet keeps the codebase type-safe. 

After capturing some uber-Instagramable doggo pics (shout-out Lenny and Bosque), Evridiki started to build out further screens whilst skinning the app to match Matt's designs by uploading colours, fonts, logos and icons. 

Thursday

We only had a few hours of project time this morning, as we were heading off to Granada for the remainder of the day — this mainly consisted of hiking, sightseeing and eating. 

Evridiki and Sam planned how we automatically tag and select images that are suitable for a roll-up (a roll-up is a collection of images that share a theme, i.e. "by the sea", "nightlife", "Granada").

With the Alhambra beckoning us, George and Julian got to work preparing the app for testing on phones. This proved challenging because the deployment of Prisma combined with AppSync and the way we wanted to use Serverless Stack was quite complicated.

Showcasing her ability to multitask at an impressively high level 💁🏻‍♀️, Dulcie hooked up a delicious breakfast for everyone before hooking up the post creation screen.

Poolside, Hugo and Matt workshopped the tone of voice for our platform — who’s Scrappi for? What kind of language appeals to this demographic?

Friday

Picking up where we left off yesterday, Evridiki worked on automatically collating photos into rollups, using tags generated from our integration with Google Cloud Vision, as well as location and time of day. We know how to order photos because users are able to react (with emojis!) - most reactions = best content. Meanwhile, Lewis scaffolded out the corresponding UI screens for Rollups and the playback feature.

We were really hoping for a version of the app which would showcase the main user flow to use on our trip to Granada yesterday, so we could start taking photos. However, due to complications deploying our Prisma backend, it meant that today was the day to wrap up the CI/CD and get apps on phones.

Saturday

The last day, and it’s crunch time. Everybody was working hard to wrap up the core functionality of the app, including:

• Finalising the add media user journey
• Adding push notifications
• Adding the “join scrap” user journey
• Styling the app to match designs
• Reactions
• Finalising rollups and slideshows

Towards the end of the day, we decided we needed a cutoff for merging features in so that we had time to roll a final deploy, which meant some features had to be delayed. That’s not to say this functionality will never make it in, but for the first release we needed to be cutthroat.

Henry joined us for our end of day (end of project!) standup and George presented a final demo.

Sunday

While yesterday was our last ‘working’ day, our flight back to Bristol wasn’t until later this evening so we decided to spend the day in Malaga. This wind-down by the beach was the perfect opportunity to test out the app, with lots of stupid selfies (and subsequent emoji reactions, of course). 

Another memorable hackathon in the bag!

Blooper reel:

• George consistently spelling his email address "Graitywell" and wondering why auth was failing...
• Dulcie changing the case of a folder name from "icons" to "Icons", causing git (and all the devs) to freak out for 24 straight hours.
• Having to re-run Apollo’s Rover postinstall scripts manually every time you install dependencies.
• The final day was a race for everybody to merge in their branch before someone else did so that they didn’t have to resolve a hundred merge conflicts.
• "refresh_toke" is not a valid token.
• Adding over-the-air updates on the final hour of the final day without any testing... Needless to say, it crashed the app immediately. Maybe a bad call.

 

If you enjoyed this journal, you’ll love our Insights.

Also, check out our Two Minute Tuesday videos on YouTube for some top tech tips in bite-sized chunks.