Plot Twist

Inspiration

We were inspired by the icebreaker Two Truths and a Lie and thought it could be fun to take that idea further—not just for entertainment, but as a way to help people learn. We liked the idea of mixing in history and pop culture events, while giving it a Kindle-style reading experience. It felt like a cool opportunity to let people test what they think they know, and maybe walk away having learned something new

What it does

Our daily game presents a short passage that looks like something you’d read on a Kindle, but one sentence is a lie. The player’s goal is to read carefully, think critically, and highlight the false sentence. After guessing, they’re shown the correct fact, so it becomes a quick and engaging way to learn something new. It mixes familiar events from history and pop culture with a layer of mystery, encouraging players to question what they really know.

How we built it

We started off with Stephanie designing the wireframes in Figma. We collaborated on initial designs with Sean giving feedback and suggestions, which Stephanie iterated on. Throughout the design process, Sean began implementing the screens and interactions into the development environment, debugging where needed, implementing the leaderboard, and creating the e-ink design animation to really make each page refresh feel like a kindle. Stephanie designed the splash page and sent it off to Sean to be launched into the environment. As pieces were coded into the game, Stephanie gave feedback for refinements where needed and did play tests. Both of us were large parts of the design iteration process—ensuring constant feedback and evaluation of our designs. On a more technical end, the project was built using the Devvit Web platform starting with the react template. For the frontend, we used tailwind for styling, react query for data fetching, and react router declarative for handling routing. On the backend, we used the default express for our api layer and devvit's context post data for some of heads up information and devvit's redis client for saving the rest of our game data and user scores.

Challenges we ran into

Some of the challenges we ran into included the initial splash page and trying to figure out the sizing for it. As Stephanie made the design in Figma, it didn’t look quite right when it was implemented on Reddit—and it was difficult to know how to resize without knowing the frame size. We also ran into challenges when creating the e-ink effect—at one point it was causing the back button on mobile to briefly disappear. Another challenge was debating if the e-ink effect would be understood by users, especially those who have never used an e-reader, or if the effect makes it look glitchy. So, to ensure it was clear to user and gave them control over their experience, we added a button to disable it.

Additionally, The new Devvit web platform provides a very powerful development workflow, which allows you to mostly do all development locally without needing to push it up the Reddit to do testing. Last Sunday, when Devvit was down, we built out a local backend using bun and mocking out the redis + Devvit context layer which really allowed us to move forward quickly on implementing and testing all of the features we wanted to add.

Accomplishments that we're proud of

We are extremely proud of, first and foremost, completing the creation and development of Plot Twist in just a few weeks. From the initial idea to a playable app—it is very rewarding to see it come to fruition after all of our hard work. Some of the features we are especially proud of include the overall e-reader look—from displaying the pictures with the e-reader format to adding e-ink refresh animations. To really emphasize this, it was really cool creating a splash page that gave the look of the user holding the kindle in a cozy environment. The leaderboard is also meant to resemble the New York Times to add to the reading vibe. We have so many great ideas we’ve implemented already, and it’ll be exciting to see where it goes next.

What we learned

From a design perspective, Stephanie learned a lot about game creation. How important it is to weave in guiding instructions. Incentives to return to the game. The extra touch that it provides when you have a theme and not only stick to it but add enhancements to speak to that theme. Overall, we learned what it’s like to work on a project with one another as collaborators—design and development. It was interesting bringing our own unique perspectives, Stephanie with user experience and Sean with software development. Seeing how designs get translated into an actual, working game—and how rewarding that is. Also, how important it is to hear all voices out on the team and foster an environment that encourages us both to bring out our ideas—and feel excited to do so. So many great ideas came out of just regular conversations.

On a more technical level, we got to experience great collaboration in Figma to start off—both for iterations, comments and communications, and to see exactly what we wanted our app to look like and be able to export exact styles and content. We also learned a decent amount about full stack javascript development. It was nice not having to switch contexts to continue working on a project, given previous backend experience was with other languages like java and go.

What's next for Plot Twist

We hope to work on incentives—such as stickers that users can earn to place on the e-reader, a settings button/section, making daily content, and adding a button that directs users to play a game in our lineup they have not played yet without them having to go find and search for it. And most importantly, creating a Subreddit!

Built With

• devvit
• express.js
• figma
• react
• react-query
• redis