1
7 Comments

How do you architecture your apps before coding?

Hey, I've been building an MVP for a project I want to launch ASAP, right now I need to build:

  • An dashboard for users to manage time availability across multiple locations

  • An dashboard for users to see a history of delivery packages and future ones

Got tired/stuck after building last feature and turned off the computer. Not sure on how to architecture it, I just started drafting on a piece of paper and it all came 10x faster than if I tried to do it just by looking at the code editor.
So I just wanted to know what technics you folks use to architecture your applications (just GO 🐴?) and getting unstuck on architectural design ideas.
By the way, I'm using TALL stack, which makes my life 10x easier.

on January 6, 2021
  1. 3

    My high level architecture outline:

    • Product goals, needs, features
    • Infrastructure (need for DB/webservers/async workers/document store)
    • Framework + dependency decisions
    • Database schema
    • Backend functions, tasks, utils
    • API endpoints
    • Frontend app URL endpoints
    • Sketched out UI (separated by high level reactjs components)

    Every project is different, and not all will require all of these written out. Also, each step doesn't specifically need a lot of detail. For example, I just often times just write out the name of the backend function, or the url of the API endpoint, instead of all of the functionality behind them.

    Even if it's barebones, having this outline gives me the confidence that I need when actually developing the application. If it's 10 minutes for a tiny project, or a full day to write out this outline for a fully-functional SAAS product, that time investment is sure to pay off in the long term.

    1. 1

      Awesome! Taking notes on this framework.

  2. 2

    Hi Bernardo,
    I ran into the same problem a couple of times as well. I first started by listing all the features I want to have in a Google Doc, but I soon realized that this doesn't do the trick. For me, creating Wireframes is the best approach (I use Adobe Xd). I think this is because seeing it visually is more relatable as writing bullet points. Once I feel confident with the Wireframes, I map out the Database architecture with a tool like diagrams.net, if the app requires a lot of backend functionality.
    After that I just GO. I'm not a fan of first completely building the backend and then switching to the frontend. I usually to both simultaneously, which should not bring too many bad surprises if the Wireframes and Database architecture are good.

    Hope this helps you at least a little bit :)

    Cheers.

    1. 1

      Thanks for the tips! I also like to build Frontend and Backend together, right now I'm in love with the TALL stack for that reason.

      1. 2

        I also love Laravel and Tailwind. I actually developed a Laravel + Next.js Starter Kit that does some heavy lifting for you when hooking up backend and frontend (especially authentication). I'd be grateful for feedback and very happy if it helps you out with future projects :)

  3. 1

    I'm a follower of 1 single file, especially for the "fast" aspect in my development. https://github.com/sawirricardo/singlefileapp It uses PHP, but I believe it can be adapted to other programming languages of your choice. It's fast, you also get to extend it the way you want.

  4. 1

    I always use Pen + Paper to come up with my architecture first.