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.
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:
- Setup the design system
- Finish mobile designs
- Create a database diagram
- Setup the monorepo
- 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.
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:
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.
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.
- React Native with Expo for mobile frontend
- Apollo GraphQL client for application state management
- 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:
- Typescript to generate types
- Typescript Resolvers to generate types for the resolver functions
- Typescript React Apollo to generate React Apollo hooks for all the queries and mutations I use in the client
- Typescript MongoDB to generate types for MongoDB models
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.
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).
Feel free to reach out and connect with me on Linkedin or Twitter, I love hearing from people who read my articles :)
