Building a winning hackathon project in Retool

Lizzie Alvarado Ford
Lizzie Alvarado Ford
Eng @ Retool

Dec 8, 2022

The start of any company hackathon might feel like a poorly planned flashmob. Everyone’s dancing at the same time, but not necessarily to the same music or with the right moves (although we do appreciate your dedication to doing the worm, Steve). To save you from stepping on each others' toes, we’ve come up with a Retool hackathon starter pack to help you scope a winning idea that will wow both judges and end users.

While you might be tempted to kickstart your hackathon project with create-react-app, with Retool, you won’t have to import or create components, set up a CSS framework, or stress about whether you need to eject and manage webpack yourself. Always – but especially during a hackathon – every second of development time counts. Give your team a running start by building your hackathon app in Retool!

Scoping a focused hackathon project

A hackathon project should be neatly scoped, with a clear sense of what you are building, why you are building it, and who you are building it for. To help you and your team zero in on a problem you would be interested in solving, take your pick of these brainstorm questions (and maybe even adopt a hackathon team name)!

  • Goal Getters: If you think about what your organization is trying to accomplish in the next three to six months, what would hold you back from accomplishing that goal? Or, what would make the path to accomplishing that goal easier?
  • Papercut Platoon: What is something that should be really easy to accomplish in your organization, but for whatever reason is really painful to do? What can your team build that helps save time or simplifies existing pain points?
  • Defensive Line: What, if anything, is not working as it should be? What, if anything, are you worried might not hold up as things in your company change (e.g. more customers, new employees, more complicated workflows)?
  • Marie Kondos: What kind of problem would you be really excited to fix for your company? What kind of problem would spark joy to solve?

To give you some concrete examples, previous hackathon teams leveraging Retool have built a customer support tool to back new product lines, created an app that operations teams use to initiate and monitor SMS campaigns, and launched a security app to track and manage suspicious users and organizations. Utilizing our library of 90+ out of the box components in conjunction with our integrations with Snowflake, Postgres, Twilio, Google Sheets, and authenticated REST API resources to name a few, these teams solved painful problems in a matter of hours instead of the weeks or months they would have taken otherwise.

Take a look at some of these potential hackathon apps for even more inspiration:

A CRUD app for an accounting team updating client billing information using a read from a Postgres database and a write executed by a REST API endpoint. Check out a tutorial for a similar app here!
A CRUD app for an accounting team updating client billing information using a read from a Postgres database and a write executed by a REST API endpoint. Check out a tutorial for a similar app here!
An SMS app for a customer support team utilizing the Twilio conversations JS SDK and our Twilio integration. Check out this app in our app exchange here, as well as a YouTube tutorial!
An SMS app for a customer support team utilizing the Twilio conversations JS SDK and our Twilio integration. Check out this app in our app exchange here, as well as a YouTube tutorial!
A Snowflake resource optimization app to monitor and manage credit consumption using our Snowflake integration for both reads and writes. Check out this app in our app exchange here!
A Snowflake resource optimization app to monitor and manage credit consumption using our Snowflake integration for both reads and writes. Check out this app in our app exchange here!

As you might have gathered by now, there are tons of problems you can solve in Retool. As you consider which problem you want to work on, it may be helpful to answer the following questions:

  • Back to the Future: What is the story that you want to be able to tell on presentation day? Which parts of the solution are absolutely necessary to tell that story? Which are the parts that you can mock up or save for later?
  • Team Roster: Which skills does your team have? What can your team reasonably get done given the resources at your disposal in the time allotted?
  • Vibe Check: Which part of the solution would be exciting to build in a short period? Which part of the solution energizes your team?

Once you’ve decided on the song you want to play⏤ forgive us with the extended flashmob metaphor⏤ we can move on to how you can best choreograph this project in Retool.

Executing Your Hackathon Project With Retool

We’ve learned a lot helping customers run hackathons over the years, from doing necessary pre-work to dropping the mike with an impactful final presentation. Follow these steps to carry your team from concept to project completion!

Hackathon Pre-Work

  • Choosing the Right Retool Plan: Assuming you don’t already have a plan with Retool, there’s a few things to consider here: If you need to deploy within your own virtual private cloud (VPC), you can start building on our Teams plan. Deploying Retool is fast and easy, especially by following our step by step directions. If you don’t need to deploy within your own VPC, you can start building on our Business plan. You could build on the Freetool tier, but note that you’ll be limited to 5 users, and you won’t have full access to important features like version history or releases which will come in handy to save and protect versions your work. Some teams need even more functionality, including SSO and source control, and for that you would utilize our Enterprise plan. You can initiate a free trial for Teams, Business, or Enterprise plans on our pricing page.
  • Adding Users to your Retool Organization: Once you’ve signed up for Retool or spun up an instance of Retool in your VPC, don’t forget to add your other team members before the hackathon begins. You can provision access and send invites manually in the Retool UI. Users that you anticipate will be building in Retool should be included in the “Editor” group. Unless your use case demands it, you can probably get by without configuring SSO for the purposes of a hackathon, but many of our customers leverage integrations with their IdP’s in production to enable just in time provisioning, role mapping, and using tokens to authenticate against resources.
  • Configuring and Testing all of your Resources: To save your team time and prevent potential blockers down the road, it is essential to configure and test all of the resources you plan on using during your hackathon. Retool supports connecting to almost any database, any REST or GraphQL API, as well as a swath of other native integrations. If you do run into any issues while connecting, we would recommend checking out our troubleshooting page. One last thing you should know⏤ Retool does not store any of your externally-connected data unless you enable query caching. More information can be found on our security page.
  • Getting a Hello World Working in Retool: To make sure your team feels comfortable building in Retool out of the gate, we would recommend that you do some light enablement to get your bearings ahead of day one. A good start would be watching this video tutorial on building your first Retool app. If you have a few more minutes, head over to our documentation site and read through Retool Fundamentals to get yourself off the ground on some core Retool concepts. It might also help to take a look at these templates for some Retool UI inspiration.
  • Establishing Parallelized Workflows: To avoid running into potentially blocking dependencies, it pays to put some upfront thought into parallelizing your team’s work. When dividing and conquering, pay special attention to which parts of the project can occur independent of the whole (e.g. one team member can build the interface to view and change customer data while another team member writes queries of the database). A team member working on queries, for example, can write them from a single app and save them to the query library to later be referenced in another app where a team member is building the UI. Another idea is to divide the app into distinct pieces of functionality (e.g. a lookup table as one piece, a form fill as another), have each team member work from a separate app, and combine all of these apps by saving groups of components as modules and composing a final app with all of those separate modules. This is especially important to consider, as Retool does not currently enable multiple people to concurrently edit and save changes in a single Retool app without a connection to a source control provider.

During the Hackathon

  • Designing an Intuitive, Delightful User Interface: If half of the battle of building a Retool app is writing queries of data sources, the other half is making sure that the app’s interface is simple and intuitive for end users to use. Our design and deployed engineering teams put together some great examples of common workflow patterns, Retool design best practices, and even apps you can import into your Retool instance to use as a template. Especially given that you will conceivably be presenting your hackathon project in front of an audience, your app’s UI and UX will only help you excite more people about what you’ve built!
  • Troubleshooting Throughout the Hackathon: Should you need some support as you build, there’s a few different resources you can tap into! Your first place to look should be our documentation site, which contains tons of searchable information on our components, integrations, troubleshooting guidance, best practices and libraries. If you can’t find the answer to your question there, take a look at our community forum and see if a similar question has been asked. If not, post in the forum and our support engineers will be sure to get back to you. If you are considering using Retool beyond your company’s hackathon, contact our sales team by requesting an Enterprise trial. Who knows, our Solutions Engineering team might be able to help out with some build sessions and expert guidance!
  • Delivering a Structured Final Presentation: Your team is bending over backwards to solve a problem, but you still have to stick the landing! Your presentation is an opportunity to get buy-in from your organization on why the problem you solved matters, why the solution you chose is the right one, and teach people how they might ultimately use what you built. Your presentation should cover the following topics: the problem and why you’re solving it, the solution and how it solves the problem effectively, learnings, what, if anything, you might have done differently, acknowledgements of everyone’s contributions, and, most importantly, a demo of what you’ve built. Don’t forget to practice the demo a few times from end user mode to make sure that everything is working as planned, or even record it beforehand if the team doesn’t want the added pressure of delivering a demo live.

Coming up with a compelling hackathon idea is key, but if there’s nothing but mockups at the end of the hackathon, your solution will likely fall flat. While building a UI in React or Angular in the short timeframe of a hackathon might be daunting, leveraging Retool in your company’s hackathon will not only speed up the UI build, but everything from connecting and querying data sources to managing permissions. Retool is your hackathon team’s secret weapon⎻ helping you get things done quickly, securely, and with a UI your team can use on day one.

We at Retool are excited to be a part of your team’s hackathon journey – and maybe even a part of your company’s internal tooling stack. We would say good luck, but with these strategies, we know you won’t need it.

Happy hacking!

Lizzie Alvarado Ford
Lizzie Alvarado Ford
Eng @ Retool
Dec 8, 2022
Copied