Lord Of The Memes

Lord of the Memes is a fun interactive game to be played with friends where you have to react to various situations with meme gifs, and compete to be crowned as the ultimate Meme Lord.

Demo

Demo project is hosted at - https://lord-of-the-memes.flutterflow.app/

Demo video - https://youtu.be/Oh9oZDm3aO8

No instructions required. Please refer to the demo video for an example gameplay. Recommended to play with 3 or more players.

Team

I built this solo.
Github: https://github.com/mohonish/
Twitter: https://twitter.com/mohonishc
LinkedIn: https://www.linkedin.com/in/mohonish/

Motivation

The first four years of my career were spent in app development. Since then, I have pivoted to backend/full-stack engineering because I felt that with the advent of powerful frameworks such as react-native and flutter, it would not be long until no-code / low-code tools would take over the market - and I would lose my job. Looking at FlutterFlow, it seemed to me that the platform would be good for building simple CRUD applications. But I wanted to test it's limits. And with the supabase integration, it was a perfect opportunity for me to jump right in and try to break things. This was an experiment in building a non-trivial no-code app. How much can I build without writing any code myself?

Process

My first roadblock was when I realized that Supabase realtime does not work out of the box on FlutterFlow. I enquired on the supabase discord server and I was disappointed to be confirmed about that limitation. There existed workarounds but most of them required me to write code.

So as a workaround, I decided to leverage Periodic Actions in FlutterFlow, to poll a backend API every x seconds. I used this to drive the real-time or interactive features of the app. For example, updates on the Lobby page, being moved to the game page when the host starts the game, etc.

I did not want to own a backend API service for this app. I did not even want to own edge functions unless required. If I'm doing this as low-code experiment, I'm going to avoid anything that needs me to write code. So I created database functions for most of my query functionality and used the PostgREST API exposed by Supabase. For example, calculating the results of the game is a slightly complicated sql join query, which was a good candidate for a database function.

Tech Stack

Supabase

• Postgres database. My data is designed to be stored across 6 tables.
• Database functions instead of using a backend service. Used to set up non-trivial database queries with parameters, such as calculating the most happy player, or calculating the not easily impressed player.
• Used PostgREST APIs to execute database queries and defined database functions.

FlutterFlow

I built this app completely using FlutterFlow. Here are some of the features of FlutterFlow that I have used extensively in my app.

• The Action Flow Editor is the heart and soul of every logic in this app.
• Periodic Actions to poll APIs and check for results/conditions.
• Condition Actions for error-handling of API responses and for checking logic to automatically route users between pages.
• Code Expressions for making simple calculations.
• Custom Code for when code expressions were not enough. For example, append to an existing array, convert a string to a list, etc. All of the code was generated by using OpenAI's Codex API that was conveniently integrated inside Flutterflow.
• API Calls to define, and test all of my API endpoints.

Others

Tenor GIF API - for searching GIFs.