GraphQL Hackathon: It's a Wrap
Tags: graphql, leadership, javascript, discuss
Published: 2021-04-28 17:08:07

This post was originally published on StepZen's blog by Helen Whelan on April 27th, 2021.

Posting on behalf of [Brian](https://twitter.com/remotesynth/), [Anthony](https://twitter.com/ajcwebdev/),  [Samuel](https://twitter.com/samuelgarretth/), [Lucia](https://twitter.com/CerchieLucia/), [Carlos](https://twitter.com/carloseberhardt/), [Anant](https://twitter.com/jhingran/), and the entire StepZen team.

---
Last week over 150 developers wrapped up a week of building and learning at the [Mintbean](https://mintbean.io/) + [StepZen](stepzen.com) [**QraphQL:Learn 'n' Hack Hackathon**](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333). In this post, we'll take a look at the projects (in alphabetical order) that our *Learn 'n' Hackers* built. You can access a demo for each project and the source code in GitHub via the links below.

We were truly inspired by everyone's energy and creativity. We know that everyone learned a lot about GraphQL. We learned a lot too and we had a blast. We are thrilled to keep working with you on the Mintbean Discord and over on the [StepZen Discord](https://discord.gg/9k2VdPn2FR)

## Bearometric Radio
![hackathon-bearometric](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/foftlw4hqsrr7n4cyv2s.png)
 

[The Bearometric Radio](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333/projects/6f13c553-b14b-4707-b981-e7eb2cd13a52) web app recommends music to listen to based on the weather. [Will Campbell](https://www.linkedin.com/in/williamkcampbell/) and
[Jay Cammarano](https://www.linkedin.com/in/jay-cammarano/) built their app around a weather-report GraphQL API and a couple of music-related APIs. The app has a React frontend (with a touch of vanilla JS).

## Get a Dog

![hackathon-dogs-api](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jdvs737rmn56k04gm4a.png)
 
[The Get a Dog](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333/projects/f4aadf68-5496-4a22-a544-56f925025bd8) web app allows you to select a dog type and returns information and a picture of a dog. [Ethan Wright](https://www.linkedin.com/in/ethan-wright-91a75270/) uses a React frontend and queries a GraphQL API for the [thedogapi](https://www.thedogapi.com/) that he built on StepZen.

## Holidays
![hackathon-holiday-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/io7zyolb9z6qenupq9e0.png)


[The Holidays app](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333/projects/f4aadf68-5496-4a22-a544-56f925025bd8) calls two REST APIs (calendarific.com and ip-api) combining the responses into a single GraphQL endpoint. The React client queries for data about this year's holidays as if it was queried from a single GraphQL API. [Erica Melo de Carvalho](https://www.linkedin.com/in/erica-melo-de-carvalho/) and [Aamir Bakhtiar](https://www.linkedin.com/in/aamir-bakhtiar-86b3551ba/).

## Eature

![hackathon-eature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfod18cwe15sinyk7ixe.png)

[Stephanie Hou](https://www.linkedin.com/in/houstephanie/?miniProfileUrn=urn%3Ali%3Afs_miniProfile%3AACoAABY8h1ABRwDdMadoTCA2e47E6m0k1R4zxQk) and 
[Michael Fuery](https://www.linkedin.com/in/michaelfuery/) give us [Eature](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333/projects/eab19d21-b59e-4e4a-8a0d-7143f1ce2d36) - an app that lets us visualize events recorded by NASA's Earth Observatory Natural Event Tracker (EONET). The team brought a good amount of data together from several APIs to create an informative yet simple UI.

## Kiki's Recipe

![hackathon-kikis-recipes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dr7ef3hy2c030iwb9fcx.png)
 

For the [Kiki's Recipe](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333/projects/f4aadf68-5496-4a22-a544-56f925025bd8) project
[Danny Serrano](https://www.linkedin.com/in/serranodanny/),
[Marjorie Mejia](https://www.linkedin.com/in/marjorie-mejia/), and
[Natalie Rojas](https://www.linkedin.com/in/natalie-o-rojas/) used the following technologies – React, Bootstrap, Spoonacular API, Apollo Client, GraphQL, StepZen, Heroku (deployment) – to build an app that allows us to provide 10 ingredients, hit submit and viola! - we are returned some amazing recipes.

## Lunch Time

For the [Lunch Time](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333/projects/f4aadf68-5496-4a22-a544-56f925025bd8) app, our developers,
[Kelsey Schroeder](https://www.linkedin.com/in/kelsey-m-schroeder/),
[Leslie Meng](https://www.linkedin.com/in/leslie-meng/), and
[Calvin Lowe](https://www.linkedin.com/in/calvin-lowe/) take a different angle on the food theme. By building a GraphQL endpoint on a couple of Google Sheets data sources, they allow us to determine how much we can afford to pay for lunch today.

## MLB Showdown

![hackathon-mlb-showdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kan33meg8dicw5l7t9wr.png) 

For the [MLB-Showdown-StepZen](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333/projects/63562e68-1a01-4621-9b26-d3b9f94997dc) app,
[John Ratanaprasatporn](https://www.linkedin.com/in/john-ratana-7aa24063/) took his love for the MLB-Showdown card game and re-created it digitally by building a GraphQL API on a REST backend. John used React, React Spring and StepZen in his project.

## React StepZen Comets (Fireballs)

![hackathon-fireballs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zle3esfi6pmtvxf179a.png)

For the [React StepZen Comets](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333/projects/68941c26-2b12-42a9-8828-3df18772f226) project,
[David Griffin](https://www.linkedin.com/in/david-griffin-117b0045/) and [Dale Sakamoto](https://www.linkedin.com/in/dalesakamoto/) built a site to track meteors using NASA's JPL Fireballs API. They generate an array of Meteor objects. Users input a location, the app queries the Google Maps API and generates longitude and latitude coordinates. By comparing the coordinates to the array of meteors, the app finds the closest recent meteor strike and returns the meteors impact energy and velocity. In a clever visualization, the app shows us how the comet's speed compares to the fastest man and car.


## Rocket-X

![hackathon-rocket-x](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctyfxrnrkmk5asx97zau.png)
 
For the [Rocket-X](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333/projects/6681028f-634d-4f5a-9d2e-0d46ecc183c0) app,
[Nara K](https://www.linkedin.com/in/hurricanenara/) and [Lauren Lee](https://www.linkedin.com/in/lauren-hyuna-lee/) created a GraphQL API in StepZen that combined data from two REST APIs, api.spacexdata.com/v4/rockets and api.spacexdata.com/v4/launches, to show us all the rocket launches. They bootstrapped the project with Create React App.


## Running Event Page Creator

![hackathon-running-event](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxosrpn34e0474kno3g7.png)
 

[Jesse Moore's](https://www.linkedin.com/in/jesse-moore-00804030/) [Running Event Page Creator](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333/projects/321818e0-b00a-4faf-afe7-b1cf2ab014c8) is a single-page app that dynamically creates event pages using data from multiple tables in an Airtable base. Using StepZen, Jesse combines multiple REST queries into one client-side GraphQL query. The app converts the race name into a readable URL slug, parses a user-provided gpx file route into an interactive map, and user-provided latitude and longitude points into respective markers.


## The Cartoon Character Quiz

![hackathon-cartoon-quiz](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15ubcubdlya2sm966xty.png)
 

Naomi C. built this [Cartoon Character Quiz](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333/projects/abe736f7-4bbf-4f87-b79c-f2447f8a3cd4) using StepZen, GraphQL, and the REST [Last Airbender API](https://github.com/paigeegorry/last-airbender-api). Give it a try - it's addictive!

## SpaceX Launch Dashboard
![hackathon-spacex-dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lnwy342drpxl1tsqxfk.png) 

[Seth Mitchell](https://www.linkedin.com/in/sethayottemitchell/) and Steven Larsen built a [SpaceX Launch Dashboard](https://github.com/sethayotte/SpaceX-Launch-Dashboard), .

> "We were able to build a comprehensive and dynamic launch dashboard utilizing SpaceX's API with minimal code using super-cool "materializers" to pare back and condense queries to only necessary response data.
![spacex app tweets](/images/blog/hackathon-spacex-tweets.png)


## The Pointless Dashboard

![hackathon-pointless-dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmyg5m992y0zltrn83pr.png)
 

[Nina Jhunjhnuwala](https://www.linkedin.com/in/ninajhunjhnuwala/),
[Jerry Ong](https://www.linkedin.com/in/jerryong89/), and
[Christopher Gitmed](https://www.linkedin.com/in/christopher-gitmed/) treat us to [The Pointless Dashboard](https://mintbean.io/meets/1210c780-f910-4511-aec8-a364420f8333/projects/f89b44e4-1687-4df3-a133-ac46a6de30d3). Well, they had a point! They determined the best way to learn GraphQL was to make the API and do a bunch of API queries. They used React.js and Bootstrap 4 on the frontend. Then StepZen to convert REST APIs into GraphQL endpoints. Then GraphQL to query the APIs and fetch the data necessary to populate the various widgets on the dashboard.

---
The [StepZen team](/about) looks forward to continuing our exploration of GraphQL with you all and can't wait to see what you build next. Hit us up anytime on the [StepZen Discord](https://discord.gg/9k2VdPn2FR).

Huge gratitude to to our friends at [Mintbean](https://mintbean.io/). We look forward to working with you all again. Not yet signed up for StepZen? [Try it free](https://stepzen.com/request-invite).