PlotTwist

Role: UI/UX design and full-stack development
Timeline: August 2026 – present
Stack: Next.js, Supabase, SQL, Tailwind CSS

Current homepage design.

The Problem

Writing a full story on your own can feel intimidating and isolating. It's hard to know where to start, or whether what you write is worth finishing.

I built PlotTwist for myself as much as for others: a way to write fiction in small, guided steps with strangers, and to read stories other people have built together for inspiration. I wanted it to lower the activation energy needed to start or contribute to a story, sparking creativity in a small, fun, and social way.

Inspiration

PlotTwist sits at the intersection of three storytelling traditions: Surrealist games, parlor paper chains, and online serial fiction. Each one informed how turns, tone, and discovery should feel in the product.

Exquisite corpse — folded collaborative drawing passed between players — **Exquisite corpse.** A drawing activity invented in 1925 by Surrealists including Yves Tanguy, Jacques Prévert, and André Breton: one player draws a head (or top of a form), folds the paper to hide it, and passes it on; the next adds a torso, and so on, until the group unfolds a single composition—fantastical, humorous, or unsettling. Encyclopaedia Britannica.

Consequences parlor game — folded paper passed between players — **Consequences.** A Victorian parlor game where players write a line, fold the paper so the next person cannot see it, and pass it around—building a chain of “who met whom,” dialogue, and outcomes. Reading the unfolded result is the payoff; PlotTwist borrows that same one-line-at-a-time rhythm.

Wattpad — online reading and writing community for serial fiction — **Wattpad.** An online platform where people read and publish serial stories and fanfiction, follow authors, and react chapter by chapter. I browse it often but rarely post; PlotTwist aims for that sense of shared fiction without needing to ship an entire novel alone.

Planning the experience

Before writing code, I mapped how someone would actually move through the product — from landing on the homepage to starting a story, contributing a page, or reading something finished. I also noted the stack I would need and the moderation paths that had to be implemented.

PlotTwist planning whiteboard — idea, tech stack, and user journey for start, continue, and finished stories — Early planning: core idea, services, and three paths from the homepage (continue, start, read finished).

Designing the data model

Collaborative fiction only works if the product enforces the right constraints. Using Supabase as my database, I mapped a schema around three tables: users, stories, and pages. This would ensure that page limits, story status, and authorship per page were built into the data layer, not added on later.

PlotTwist data breakdown — Users, Stories, and Pages fields including genre, max pages, and status — Data breakdown — stories require a first page at creation; each page links to a story and an author.

Building in phases

As a solo builder, I phased the work so I could ship something usable early: foundation and auth first, then readable stories and the write flow, then rules that keep collaboration fair. Stretch goals like AI moderation and community features stayed explicitly out of the first MVP.

How I built PlotTwist — five phases from foundation through story system, rules, community, and stretch goals — Build timeline — MVP focused on foundation, story system, and core rules; moderation and community extras marked as later.

Version 1

Version 1 was a low-fi, end-to-end prototype. It was built using Cursor.ai to help with backend coding, Supabse database, SQL, Next.js, and Tailwind CSS. I created fake stories to test functionality without polishing every screen. A few key screens are shown below.

Homepage

Collaborative fiction, any genre

The landing page explained the concept in one line and pointed people toward continuing a story or browsing genres. The hero image represented different genre choices before users entered a flow.

PlotTwist Version 1 homepage — hero copy and genre spine wall — V1 homepage — positioning and genre discovery.

PlotTwist ongoing stories — genre filters and story cards with premise and progress — **Ongoing stories.** Cards lead with the premise to hook readers and offer preview so someone can read before they write.

PlotTwist write the next page — story so far, page timer, and writing guidelines sidebar — **Write the next page.** Guidelines stay visible on the right while drafting; a 24-hour claim timer keeps turns from stalling.

PlotTwist read story view — preview pages before contributing — **Read story.** Preview the pages so far without claiming a turn — lowers the barrier before someone commits to writing.

Reflection

Reflection in progress — check back soon.