Building an App From the Ground Up In Public with Figma, React, and GraphQL— PomoCat Pt. 2

Designs and Backend Development

Caelin Sutch
3 min readMay 22, 2021

If you haven’t I recommend reading part 1 here.

It’s been almost two days since I started building PomoCat, a open source and built in public Pomodoro and todo list app. In the last couple days, I’ve accomplished a few key objectives:

  1. Setup the design system
  2. Finish mobile designs
  3. Create a database diagram
  4. Setup the monorepo
  5. Start backend development

Various Links

Since this whole project is public, you can access any file mentioned with the links here:

Design System (Figma)

Mobile Designs (Figma)

Database Diagram

Github Repo

Creating a design system

If you don’t know what a design system is, it’s a combination of a component library and a style guide. It contains your application core styles like colors and fonts, as well as prebuilt UI components like buttons, inputs, tags, and other generic elements.

With the core UI elements built in a design system, it’s easier to quickly put together application screens.

I’ve picked up some practices from various companies I’ve worked with and designers in how to create a good design system. I highly recommend taking a look at this article created by Figma on design systems and some great examples from top companies.

I’ve linked the design system in the links section of this article, but I’ve created a system of prebuilt components like Buttons and organized them into pages like the one below:

Design pages for Buttons

Database Diagram

When creating applications, I often use UI designs to guide my database and diagramming process. This application is relatively simple, so I decided to skip the whole UX flow diagram stage, but I did create a database schema breakdown to make it easier to visualize what data I’d need.

Database Diagram

As you can see, I’ve broken down the user object into various fields and nested objects. I ended up just nesting this all, so the only collection in the database is Users.

The Stack

For the application itself, I ended up settling on a couple core technologies.

  1. React Native with Expo for mobile frontend
  2. Apollo GraphQL client for application state management
  3. Apollo Server with GraphQL Codegen and MongoDB for backend

I decided to use a Lerna monorepo to enable codesharing (especially since GraphQL Codegen automates much of the development process). This means I have backend, mobile, and shared packages in the monorepo.

I recommend taking a look through the application code itself as it’s all public and relatively well documented and organized.

Backend Development

The Backend stack is one of the fastest to build GraphQL stacks I’ve worked with. By using GraphQL Codegen, I can simply write a GraphQL schema and annotate it, and I’ll get Typescript, MongoDB, and Apollo GraphQL client code. I used the following plugins to do this:

I highly recommend taking a look at how I used the stack in my codegen.yaml file, it’s a super powerful way to quickly build and iterate a backend.


That’s it for this update, feel free to drop any comments or shoot me a message on Twitter if you have any questions about the build so far!

Keep in Touch

There’s a lot of content out there and I appreciate you reading mine. I’m an undergraduate student at UC Berkeley in the MET program, a software developer at Playground, and a young entrepreneur. I write about software development, startups, and failure (something I’m quite adept at).

Feel free to reach out and connect with me on Linkedin or Twitter, I love hearing from people who read my articles :)



Caelin Sutch

Founder, engineer, designer. Passionate about building cool shit.