Win React Riot With This Tech Stack

Posted Jun 8, 2017

Hackathons are a very competitive environment where developers, designers and other creatives build cool products in a very short amount of time. Because of these time constraints, it's impossible to build out every part of the system properly - so one key advantage when attending a hackathon is knowing which parts of your application to focus on!

Our team at Graphcool is full of hackathon enthusiasts! Among others, our founder Johannes won HackZurich, Europe's biggest hackathon, in 2014 and Nikolas won the Burda Hackday twice, in 2014 and 2015. Tim saw hackathons from the other side, organizing them and as a judge.

In this post, we'll share our experience and tell you how to improve your chances of winning React Riot by following three simple rules:

  1. Focus on your product
  2. Do one thing - and do it right
  3. Use the best tool for the job

1. Focus on your product

You're working for 48 hours straight but only have a few minutes of spotlight to present the outcome - this makes it even more important that your demo is extremely polished. In the end, it's of major importance to focus on your frontend! Whether that's a mobile, web or desktop app - your frontend is what people are going to see and that's what your team will be judged by!

One thing you definitely want to avoid at a hackathon is to spend time writing backend code. Of course in real-world applications, the backend is an integral part of any major system. You might be an API Ninja, a DevOps Rockstar or a Database Guru! No matter which of these titles you'd like to claim for yourself - trying to play them out at a hackathon will likely not help you succeed.

2. Do one thing - and do it right

One thing that fundamentally distinguishes hackathons from real-world engineering is that you can (and should) completely ignore edge cases and error handling in a hackathon environment.

With the limited amount of time you have for building your app, you need to think of the single major use case that you'll showcase during the demo. (It's fine to partially or fully mock the data being used for that scenario.)

Of course it would be great if your tool had an admin panel, or an  Watch integration. But are these gimmicks really essential for your core idea?

3. Use the best tool for the job

A hackathon is not the right environment to reinvent the wheel. Try to seek for frameworks and tools that help you save time in building the functionality you envision. You can start researching for these tools before the hackathon even begins.

If your product should have a search engine, use the Algolia service for example. Authentication can be easily implemented with Auth0. When building a React Native app, you should use a tool like Expo that helps you with common functionality and lets you focus on the real important parts of your product! A tool like Graphcool completely takes any backend work off your shoulders.

The perfect Hackathon stack

In conclusion, what does your perfect stack for React Riot look like? You need a well-working and polished UI with data that shows an interesting path through your application! All that without spending much time on the backend and by taking advantage of existing tools.

Here's what we suggest:

  • Frontend: React + Apollo
  • Backend: GraphQL API & serverless functions

GraphQL is a new API standard that was developed and open-sourced by Facebook. It allows to fetch and update data from an API in a declarative manner. It thus ties in perfectly with React, where views are also composed declaratively.

Instead of having to write your own GraphQL server, you can use Graphcool that'll get you a full-blown GraphQL API right off the bat. If you need to feed data into it without user interaction, you can easily do so by using the Playground. This will save you unnecessary time, sweat and tears spent on the backend and everything will be ready so you can focus on the frontend!

Speaking of the frontend, how does the data end up in your React components? That's what you're using Apollo Client for. All you need to do is write your query next to your component, use Apollo's higher-order graphql component and the server response will be available in your component's props.

How to get started with React, GraphQL & Apollo?

The fastest way to get started is by using the React + Apollo Quickstart example. For a more comprehensive tutorial, you can read the Getting Started Guide on the Apollo Blog or watch our 5 min Tutorial video.