BTM PM Spec 1: Backend Setup

@Laura and I are set to kick off working on a beta tester management app tomorrow morning, with me PM'ing and her building dev skills by building everything out. Here's an overview of the first spec and how I put it together.

Instructions

1. Set up NextJS, Tailwind, and Typescript using this article I wrote

2. Set up MongoDB and write an article about it (finished article)

3. Set up NextAuth and write an article about it (finished article)

I've written snippets with more detailed instructions for Laura to turn into Postulate posts as she works through them, which I'll link here afterwards which are now linked above 😁

Meta notes

I'm planning to use a very similar stack, and many of the same patterns, for this app as I did for Updately and Postulate. After working on Updately, Laura is pretty familiar with this stack and its patterns, though this app will be a level of complexity higher than Updately and closer to that of Postulate.

One notable change, reflecting the aforementioned complexity, is that we'll be using IBM's Carbon design system instead of making our own from scratch. Good UI libraries can speed up work by a ton, and Carbon is a great fit for the vibes we're going for in this app. There's a third-party version of the design kit for Figma, where I'll put together mockups for Laura to work off of next sprint.

Process

This is my first time PM'ing for an engineer. I had a pretty good idea in my head of what the app would look like, so it was just a matter of sitting down in front of a notebook and drawing/writing it all out.

I started with the schema, as my engineer friend Saurav Pahadia does (ignore most of the left page where I was brainstorming logos):



Eventually, I came up with a tree of models like this:

Account

└── Project[]

├── User[]

│ ├── Tag[]

│ └── Note[]

│ ├── Selection[]

│ └── Text[]

├── SelectionTemplate[]

└── TextTemplate[]

Writing out the entire schema helped me visualize the rest of the app, and do some pre-emptive creative problem-solving, like using Selection and Text documents linked to Note documents to allow for completely custom fields, with SelectionTemplate and TextTemplate used to control all possible fields.

Next I started to draw out rough mockups:



And after that, the instructions above/in snippets, and at the very bottom the beginnings of some API endpoints. I was too tired to make hi-fi mockups in Figma or completely flesh out the API endpoints; I'll work those out for Laura to start building the frontend in the next round of PM specs.