Building Planner

I've planned several projects for several different teams. In general, my process has been...

1. Get the general idea of what the stakeholder wants

2. Form my questions, get more information

3. Start to think about requirements

4. Think about the technical systems that need to be in place to achieve the desired functionality

5. Break down the technical systems into achievable tasks, creating proof of concepts as necessary

6. Share the breakdown of the tasks as well as the overall goal and strategy with my team and ask for feedback if I missed anything during the breakdown.

7. Evaluate the time it takes to handle each individual task, map out which tasks can be done sequentially and which can be done in parallel, and calculate a rough estimate of the project based on the sum of the tasks, as well as accounting for unknowns.

8. Execute the tasks and continuously monitor project status

In general, this has worked for me; the projects finish out and I'm typically happy with how the projects pan out. But I've never really been amazed with the project management tools I've experienced (which have largely been Jira, whiteboards, sticky notes, and sometimes random Excel spreadsheets).

Here is one of the plans I created earlier in my career. Maybe it's because I tend to stick to the "Individual Contributor" side of things and I don't have a lot of visibility into the latest and greatest for PM's or PO's. But the experience of planning a large project with these tools has generally been lackluster.

So it's why I set out to build my own tool, one that directly accounts for steps 4 through 7 of the above process. And that's what Planner became.

It's been fun building this out on the side, so I just wanted to talk through some of the tech stack decisions I made.

Tech Stack

  • NextJS
    • I'm pretty comfortable in the React ecosystem, my day jobs are typically React.
  • next-auth-js
    • Made authentication really easy. The utilities available just made it so easy when dealing with both UI routes and NextJS API routes.
  • TypeScript
    • Can't go without it these days.
  • Prisma + PostgreSQL
  • Tailwind CSS
    • You either love it or you hate it, and I love Tailwind CSS. I was a big fan of Steve Schoger when he released Refactoring UI so to have his designs available with the components from Tailwind UI and the ease of being able to stay within my markup, going with Tailwind felt really productive.
  • react-hook-form
    • Planner is largely a CRUD app with various forms throughout the app, so I was looking to ensure building forms was a breeze. I created some common form input fields that used the useFormContext hook from react-hook-form to comunicate with my high-level Form component. This meant I could easily break down my forms however I wanted and still get the onSubmit easily at the top level where I needed it. No worrying about passing around callbacks and managing state, loved it.
  • react-query
    • Easy way to handle my loading and error states as I fetch data.
  • zod
    • By validating my API responses prior to sending them out and parsing them through Zod schemas, I got end-to-end type-safety.
    • I didn't end up using any of their ecosystem integrations. They have ways of generating schemas from Prisma
  • Sanity
    • Headless CMS for authoring content used on the blog.
    • I "kind of" like it. Typically, I will author blog-like content through something like Gatsby and Markdown. I wanted to try a headless CMS and I heard good things about Sanity. But I feel like it's almost a little "too headless" and forces you to do more coding to get images and rich text rendered on the page than I cared for.
      • For consideration, they have different "recipe guides" for accomplishing different authoring aspects. So for example, here is the guide for adding a horizontal rule. Why is this not some kind of easy-to-install plugin or configuration I can just toss in?
    • The editor for authoring content is a lot more basic than I'd expect.

Technologies I did not choose

It can be easy to ask "why didn't you choose XYZ?". Here are some of the technologies I saw and thought about during my process but ultimately decided not to use:

  • Remix
    • Remix is getting really popular these days. It just feels like the NextJS ecosystem is really mature, so I didn't want to go down a rabbit hole when my goal was mostly about building the tool that I want rather than learning something new. When I saw next-auth-js, I basically made up my mind, but maybe there is an equivalent for Remix already.
  • GraphQL / Apollo
    • I've used it at work, and while it can be really nice to use with some of the type generation and introspection, it didn't really fit the use case. I was only building for one platform and my pages never needed smaller projections of the data.
  • TRPC.io
    • I have been seeing it more and more, but again, I was mostly looking to finish building the product rather than learn something brand new.

Attributions

There were several resources that I used, here are attributions to the great work these artists have provided.

Image by pch.vector on Freepik