How do you document your work

I was wondering, as an app gets larger and more complex it seems like it would be good to have some documentation like how many different things can modify a piece of data or what all of your custom states or URL parameters are, maybe even a flow chart of some of the more lengthy processes or paths that someone can navigate through. What do you use, or do you bother?

It would be pretty sweet if Bubble could export some type of flow chart or data, state usage document. Is there any functionality like this I missed or has anybody figured out a way?

5 Likes

Great question @matt3. I’m eager to hear what other people in the community have done.

I predominantly use the notes field for each page to summarize how the page works and to document any of the gotchas and rational for architectural decisions. I keep these high level which means they’re 1 paragraph for a simple page and maybe 10 paragraphs for a really complex page with multiple layers of content. Then, I look back at the “code” for more detailed level information on how it works when needed.

We’ve also diagramed our database and shown the links betweeen tables, etc. This was useful early on, but I’ve used the database so much now that it’s pretty well internalized. That said, the documentation has been helpful anytime we bring on a consultant to advise and will be valuable when we onboard additional team members.

A few things I would find useful are:

  1. Visual Database Diagrams that update as our database updates
  • Tools to help me clean out unused pieces of our app (e.g., unused hidden elements, unused database fields or database fields where we collect data but don’t display it anywhere, objects on page that are always hidden or haven’t been triggered/shown in over a month, etc.)

Curious to hear how other people are approaching this and any best practices / lessons learned.

7 Likes

I use trello pretty extensively for this. Every bit of functionality in my app comes from a user story, which is its own card in trello. I’ll use the description field to describe the acceptance criteria. Then, I use the comments to explain how I implemented the functionality.

2 Likes

Can you share a link to your trello board?

I use:

  • Some tools like MS Visio to draw logic and high-level workflow view for my projects;
  • Google Documents to have short but sufficient description of pages, elements, data etc.;
  • Mind maps for designing site structure;
  • A lot of paper - I really need to write my thoughts and draw some schemes on a piece of paper at first :slight_smile:.

I don’t.

I spend all day writing specs and doing Visio diagrams that developers never look at or read anyway.

So I don’t want to do it for my Bubble stuff, and to be honest I don’t think it makes that much difference.

That said, I use Trello for keep track of new stuff I want to build, and for “client” work, I will write loose features in Trello too.

8 Likes

At the very least, I make my datatypes, fields, events, and actions all self-documenting. Rather than simply naming things, I describe what they do in their name. Instead of keeping “Make changes to [thing]”, I would change it to something like, “update [field] from user input.” This way allows me to easily describe to someone else what each piece of code does, without having to refer to a separate reference or reading into every line of work, even if that someone is yourself months later after having forgotten how everything worked.

Then on top of that, I put detailed comments for any complex string of actions that are dependent on other areas.

7 Likes

Here are a few quick suggestions:

  • Make use of Bubble’s built-in notes feature. (You can make notes most types of things - elements, database fields, but not workflows). Nifty that it’s linked directly to the object.

  • Use standard naming schemas and tie container elements back with the name. (Ex. for an input: Groupname/Input/FirstName). Being able to follow a path makes references much easier, especially on bulkier pages.

  • Make use of Google’s drawing/diagraming tool. Store these in a a wiki (like Atlassian, or build your own lightweight one within your app).

  • Semi related: build in a bug tracking tool. For beta testers, I built a lightweight reporting system (popup launched from the header by clicking an Icon). Users can report bugs/feature improvements/etc easily while I also capture some structured data.

4 Likes

Apart from a naming convention in the editor (and I still want to properly start using the note feature in Bubble), I use OneNote to keep track of what Im working on.

I like to simplicity of OneNote and the fact that you can easily paste images inside a table (something harder to do in Excel)

I have a table with these headers:

Date Update Page Done? Pushed? Version

If I come across something that I need to fix or something I still need to build, I add it as a line with the date, what kind of update, the page this is located and then I keep track of whether I made the change already and if I pushed it to live. Whenever I push something to live, I use a version number to see what has been pushed.

I need to refine this, but for now it works. And I already use OneNote extensively so it made sense to incorporate.

1 Like

Does “Badly” count as a valid response…:dizzy_face:

3 Likes

That’s what I feel like I am doing. The whole thing is currently living in my head, not that I am lacking empty space.

Anybody had any good ideas for this one?
I’m trying to get a better grasp - software ideas modeler has a free version for personal usage. Otherwise genmymodel looks nice, but their pricing model doesn’t suit me. Oh yea - I’m trying to achieve a state where my data model is visually laid out for me, so I can see it as a whole. Possibilities to add connections and relations is much appreciated. The one thing that I still miss is an intuitive notetaking option to document my variables better - so that the notes would be readily available when I need to revise or review something, without the need for excessive clicking.

I use Visio … because I have to for other stuff.

But I wouldn’t, given a choice.

Balsamiq has some cool sketchy data modelling stuff in “Wireframes to go”. It is a product I pay for anyway.

Lucidchart is similarly good. Here is a simple dimensional model I created in it.

Draw.io is free.

+1 on LucidChart. Pretty flexible tool at an ok price. Also an avid Trello user.

1 Like

I love Trello, I have SO many boards :slight_smile: that I have boards about boards !

Lucidchart allows you 3 active diagrams on the free tier. And the lowest paid tier is very reasonble.

4 Likes

On the diagramming side:

I can also recommend https://www.draw.io/ which is awesome & free.

There’s also https://sketchboard.io/ that is nice and more collaborative. With Freemium.

1 Like

I have just found this post and it is such a good question.

If you are like me and not at all technical but your application is starting to grow into something far bigger than you ever imagined. Wireframes and technical drawings are probably to hard at this point in time but I can certainly see the need for them as an application grows.

From my perspective which is completely non code background and a VIRGIN until I found bubble in application development, I have found the best way to capture the logic AND documentation behind my application is to use Google Docs and write a story around Why I have built it like I have.

I completely understand that this is not best practice and probably frowned upon in the industry but from my perspective it is really effective to understand how I have got to where I have.

Just to give you an example I recently revisited a page I have not looked at for about 8 weeks and I completely forgot why and how I developed some parameters.

So I went to my comments Word document and scanned the story I have written and it completely makes sense why I set the parameters the way I did.

Anyways 99.9% of you may laugh at this but for me personally it works really well and hopefully will work for a newbie starting on bubble.

Cheers

5 Likes

That’s actually not bad as starting things up goes. There’s a distinct issue with scaling, though. And versions. There will be a crapton of notes and finding the right thing will be more and more difficult.

I myself decided to subscribe to genmymodel - quite nifty as database visualisation goes.

The idea behind reviving such an old post, though, is that I’d like to know if anyone has found any new revolutionary ways to document the work during the last year, though. And perhaps @josh or somebody from bubble team can chime in on best practices. And if there is perhaps a built-in tool for that in the pipeline. Bubble apps are getting bigger and more complex as the time goes on and work documentation is kind of crucial…

1 Like

New bubbler, 4 months in, building an app in the home improvement space, ready to launch. Have a software background so the learning curve hasn’t killed me.

Here’s how I document:

  1. Use notes within bubble extensively (I find this to be the best since the documentation lives closest to the object or page)

  2. Trello for user stories and for managing backlog

  3. Mindmup ($2.95 per month) for creating database maps which I find incredibly useful but at the same time, frustrating to update every time a change is made on my data structure. Well worth the time investment especially when building something large.

Would be awesome if a tool existed to document all bubble pages, database structures, workflows, etc. and create a map of how the pieces work together. Don’t have the skillset to build this (yet) but would love to get involved if someone is planning to make one.

2 Likes

Some great examples here I will have to check out and try.

I mainly stick to just using Trello, as its hugely flexible, easy to use, cross platform and even more extendable when using the paid plan. It keeps everything organised from things to do on a site, to things that need fixing, bug testing, document workflows/fields while easily I can screenshot a page (with good ol Greenshot, useful tool for grabbing screenshot windows or selections) and then jump over to Trello and paste that image right in, create a checklist or a quick summary of what it does or what needs doing, job done.

With that said, I sometimes will use the notes feature in Bubble, it is quick and easy to use. For example on a complex workflow, I’ll add a comment to remind myself of anything specific. Same goes for some conditions or data types that are more on the advanced side. I wish the notes side on Bubble was just slightly fleshed out a bit more, in terms of having its own section, where you can easily find notes with a search or a filter e.g. filter workflow, condition, data type, element…

1 Like