Matthew Wang
← Work

Emoji Story

Full-stack · 2022 · Live ↗ · Code ↗

What it is

A web app where users pick a string of emojis and GPT-3 turns them into a short, family-friendly story they can share. Built with a UX designer for children with dyslexia who struggle to write stories themselves, so the input had to be as simple as possible.

Emoji Story on a phone

Input design

The emoji picker works like a calculator: a small random set of emojis, a refresh button, no scrolling through categories. A full emoji keyboard was too much for the audience.

Emoji input design

Stack

Next.js API routes call OpenAI server-side. Firebase Auth (Google, Facebook) on the client, with the refresh token in a cookie so the server can verify the user before generating or deleting. Firestore holds two collections, stories and users, with the author name denormalized onto each story so the featured-stories feed is one query.

{
  createdBy: "Matthew Wang",
  emojis: "🍥👎🏽👎🏽🦄",
  text: "Once upon a time, there was a magical kingdom…",
  uid: "WiGT0mYX…"
}