Summary
I recently completed a 75-minute full stack coding round at Commure, focusing on building a Connect 4 game. I utilized a FastAPI backend with a React+Vite+TypeScript frontend, emphasizing a well-structured local IDE setup to enhance efficiency during the coding task.
Full Experience
I recently completed a full stack coding round at Commure. Commure is a startup that's trying to centralize and simplify the "back office work" that clinicians have to do. As mission driven as you can get :)
After the initial Python technical screen, I had a 75 minute full stack coding round.
The actual task
Build connect 4 as per the rules.
- piece falls as far down as possible
- 6x7 board
- win condition (4 in row, diagonal, column)
- reset button to restart the game
Don't worry about setting up DBs and ORMs. Assume any data on the backend lives in memory.
Reflections
- Restate your understanding of the requirements in your own words
- Communicate what you're doing as you're coding. Make sure the interviewer follows along and isn't confused. They can't help you if you don't communicate
- Keep the prototype simple. Make it work, make it right, then make it fast.
Interview Questions (1)
Build connect 4 as per the rules.
- piece falls as far down as possible
- 6x7 board
- win condition (4 in row, diagonal, column)
- reset button to restart the game
Don't worry about setting up DBs and ORMs. Assume any data on the backend lives in memory.
Preparation Tips
Preparation
I was expected to come with a local IDE setup. I noted that AI autocomplete or AI chat in the IDE was not allowed, so I recommend vanilla VS Code. Screen sharing was required.
The full stack app needed a Python backend (FastAPI, Django, Flask options) and a framework-agnostic frontend. I took advantage of being able to set up the codebase as I wished, aiming to reduce developer friction and use good codebase structure practices given the 75-minute time limit.
I chose a FastAPI backend with a React + Vite + TypeScript frontend. My file structure included a frontend/ directory and a backend/ directory.
- The
frontend/directory was created withnpm create vite@latest frontend -- --template react-ts. I recommendedyarnas the package manager for the FE and referred to the Vite docs. I wrote a basic component to enter a key/value pair and display them below the form, usingaxiosto wrap calls to the FastAPI backend on localhost. I also created wrappers on the FE to call dummy FastAPI endpoints. - The
backend/directory was for the FastAPI code. I ranuv initin this directory for easy package management and followed the FastAPI docs to set up my directory structure and write a few basic REST endpoints. I also recommended adding Python dependencies likeblackandrequests.
Why all this setup
Realistically, this setup took me a solid hour, but I found it well worth it!
- It significantly reduced my developer friction.
- I believe I impressed the interviewer. They mentioned it was a common mistake for candidates to come with just an IDE and then struggle with dependency installation and wiring up the FE/BE.
- Best practices for structuring code were self-explanatory because I followed standard conventions.
- I had a clear pattern/blueprint for creating new BE endpoints and having the FE call them, which made maintainability and working on my own codebase easy and predictable.
- Essentially, I had a "cheat sheet" of common patterns for my framework of choice, which saved a lot of Google searches.