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

Designs and Backend Development

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

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

Various Links

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

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.

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

The Stack

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

  1. Apollo GraphQL client for application state management
  2. Apollo Server with GraphQL Codegen and MongoDB for backend

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:

Conclusion

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).

Passionate about building cool shit. First-year undergrad student studying EECS and Business @ UC Berkeley MET Software developer at Carline.