Community Drawing 🎨

This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse

What I Built

For the DevCycle Feature Flag Challenge, I made a unique daily drawing app. This app challenges users to draw a daily prompt. However there’s a twist! The pen tool settings are controlled by feature flags and will be the same for all active users! When you update features like the stroke weight and color, they will change for all users 👀. All active users must work together to create something great.

The first challenge in building this was configuring a web socket API. I used an AWS API Gateway WebSocket API to broadcast pen strokes to all connected users. This involved setting up a couple lambda functions to manage connections and send messages to all connected users.

Once the API was setup, I created a Next.js app with a Canvas element. I attached some event listeners to the canvas to implement a basic drawing feature. One of the most difficult parts of building this app was figuring out how to emit a message to the WebSocket containing the pen stroke data and replicate the drawing on all connected devices. I ended up storing a stroke as an array of x-y-coordinate tuples. When the user finishes drawing a stroke (mouse up event), I broadcast the message to all users.

Then it was time to add some pen stroke options including a stroke weight and color. This is where I implemented DevCycle variables. I setup a feature in my DevCycle account for the pen stroke options. I added a “stroke-weight” number variable to this feature to manage the state of the stroke weight for all users. I also added a “stroke-color” string variable to manage the hex code used by the color picker. The DevCycle React SDK made it easy to retrieve these values using the “useVariableValue” hook. Whenever the user changes the stroke weight or color, I invoke a server action which makes a request to the DevCycle API to update the primary variation of these variables which is served to all users. I also debounced the color picker so as not to spam the API with too many requests.

To finish the app, I setup a DynamoDB table to save the contents of the drawing whenever a new stroke is added to the canvas. I also setup a cronjob that creates a new prompt every day. This cronjob utilizes the OpenAI API to generate a new prompt.

Demo

The app is live here: https://community-drawing-app.vercel.app/

Here is an example drawing:

Here is a screenshot of chaotic drawing I made while testing the app:

Here is a video demonstrating realtime drawing updates for multiple users:

My Code

https://github.com/wilstaley/community-drawing-app

My DevCycle Experience

I leveraged DevCycle’s React client SDK to retrieve the values of my pen stroke variables. I also utilized the DevCycle API to patch variations’ values as users update the settings. Overall, I had a very good experience with DevCycle. I really liked the structuring of features, variables, and variations. This allowed me to cleanly model my data. I had a “stroke-options” feature containing two variables for “stroke-weight” and “stroke-color”. The only problem I had was with one aspect of the API. I wanted to update the value of a variation for a single variable in my feature. However, when I sent a patch request to the “update variation” endpoint, if I didn’t specify the values for both variables, the one I left out was overwritten. Even though I wanted to only update the value of “stroke-weight”, I had to send a value for both “stroke-weight” and “stroke-value” in the request to ensure nothing was overwritten. This might be expected behavior, but typically I think a PATCH request would only update provided values and not overwrite existing data.

Additional Prize Categories

• OpenFeature Aficionado
• API All-Star