Planning a Vertical Slice
When building a full stack application, you have two main approaches: horizontal or vertical. Understanding the difference can save you weeks of frustration.
Horizontal vs Vertical Building
Horizontal building means completing one entire layer before moving to the next. You might build all your UI screens, then all your backend endpoints, then all your database tables. This feels organized, but there's a hidden trap — you won't know if the pieces fit together until the very end.
Vertical building means creating one thin feature that touches every layer. You build just enough UI, just enough backend, and just enough database to make one thing work completely. It's like cutting a thin slice through a layered cake — you get a taste of every layer.
Why Vertical Slices Win
Vertical slices find integration problems early. That moment when your frontend tries to talk to your backend? You'll discover connection issues, data format mismatches, and authentication problems on day one instead of day thirty.
Your first vertical slice should be the simplest possible feature that proves the architecture works.
Don't try to build something impressive. Build something that proves your frontend can send data to your backend, and your backend can store it in your database and retrieve it again.
A Practical Example
Imagine you're building a todo app. A horizontal approach might have you designing ten screens before writing any backend code. A vertical slice looks different:
Frontend: One text input, one "Add" button, one list showing todos.
Backend: Two endpoints — POST /todos to create, GET /todos to list.
Database: One table with id and text columns.
That's your entire first slice. No editing, no deleting, no categories, no due dates. Just add and display. This tiny feature proves that every layer can communicate successfully.
Working With AI on Vertical Slices
When prompting AI, be explicit about your slice boundaries. Instead of asking for a complete todo app, ask for exactly what your slice needs. This keeps AI focused and prevents it from generating features you're not ready for.
Once your slice works, you can expand confidently. Add delete functionality as your second slice. Add editing as your third. Each slice builds on proven foundations.
See More
- Defining a Minimum Viable Version
- Frontend and Backend: What's the Difference?
- Separation of Concerns
- Endpoint