Read on Twitter
Anyone curious about this no-code thing, what is possible and how it works?
Inspired by the public builders, I've decided to raise the bar a bit. I'm going to take a concept from idea to fully functional app... today.
Feel free to follow along, I'll be tweeting as I go!
Inspired by the public builders, I've decided to raise the bar a bit. I'm going to take a concept from idea to fully functional app... today.
Feel free to follow along, I'll be tweeting as I go!
The idea...
Product
: Troop
Pitch
: Create permanent healthy habits by setting consistent, attainable goals and leveraging your troop for accountability
Solution
: An app that allows you to set simple goals, track daily, assign a partner and send daily updates.
Product
: TroopPitch
: Create permanent healthy habits by setting consistent, attainable goals and leveraging your troop for accountabilitySolution
: An app that allows you to set simple goals, track daily, assign a partner and send daily updates.
The sketches...
and of course, the logo...
Before I jump in I have to give a shout out to @estraschnov and the @bubble team. Not only have they created a game-changing product, but they have offered incredible support at every turn.
And of course, huge shout out to @thisiskp_ and the @beondeck ODNC1 crew! #buildinpublic
And of course, huge shout out to @thisiskp_ and the @beondeck ODNC1 crew! #buildinpublic
Official start: 10:06 am (MST)
Some early decisions:
- Lato family font
- Going to attempt dark mode (for the first time)
- Designing for mobile (most likely use case... will be functional on desktop but will look like early days of @instagram)
- Lato family font
- Going to attempt dark mode (for the first time)
- Designing for mobile (most likely use case... will be functional on desktop but will look like early days of @instagram)
@bubble tip #1 - Responsive page design
- Remove "fixed width" default on pages
- Set page width to 1280 (for full explanation of why, check out this awesome @makerpad talk given by @_gregoryjohn: )
- Remove "fixed width" default on pages
- Set page width to 1280 (for full explanation of why, check out this awesome @makerpad talk given by @_gregoryjohn: )
@bubble tip #2 - Name your elements correctly from the start
- Name your elements (groups, text, etc.) early and consistently. As the app builds, it will be harder and harder to untangle the spaghetti.
My model: <element><Page><Component><Name>
-> textIntroScreen1Welcome
- Name your elements (groups, text, etc.) early and consistently. As the app builds, it will be harder and harder to untangle the spaghetti.
My model: <element><Page><Component><Name>
-> textIntroScreen1Welcome
@bubble tip # 2a - Use Styles and set them early
Styles will evolve but lay the foundation early.
Tip: if you need to make a small modification to the style (like center vs. left), remove style, make change and then save as a new style (Heading 2 - Centered)
Styles will evolve but lay the foundation early.
Tip: if you need to make a small modification to the style (like center vs. left), remove style, make change and then save as a new style (Heading 2 - Centered)
Making progress
Decided not to do 2 step authentication on v1. I will probably add it later (especially to verify phone #)
Ok, now for the first challenge. I've never integrated @twilio into @bubble before so here goes.
I'm going to allow users to add to their Troop by inviting via text. By default Bubble creates users and tokens by email so I'm going to have to build an alternative.
I'm going to allow users to add to their Troop by inviting via text. By default Bubble creates users and tokens by email so I'm going to have to build an alternative.
Ok, this is getting fun. I'm already set up with @twilio and I opted to use the Copilot plugin.
Note on pre-built API plugins...
+ fast and easy
- doesn't afford much flexibility
The @bubble API plugin is super powerful and will let you take full advantage of external APIs.
Note on pre-built API plugins...
+ fast and easy
- doesn't afford much flexibility
The @bubble API plugin is super powerful and will let you take full advantage of external APIs.
Hahaha dope!!! First text away!
So here is the model:
- I created a temp user table to store the invitee's name and phone number
- When "invite" is clicked, I either add to the temp table or if they already exist as an active user, skip the entry and send them a direct invite
Now to build the Invite page.
- I created a temp user table to store the invitee's name and phone number
- When "invite" is clicked, I either add to the temp table or if they already exist as an active user, skip the entry and send them a direct invite
Now to build the Invite page.
Ran into a little nuance. Can't assume that an invited user isn't already an active user so had to create some logic using the "Only When" to juggle between the User and Temp User tables.
Ok, still moving! Invite page almost done (separate workflows based on new or existing user). Trying to make the page personalized so lots of parameter passing 
Ok... still a ways to go but sign up is complete!!!
So it's about time to step away from the screen for a minute. Quite a bit of work to do but the foundation is set.
@bubble UI framework set
Database set (mostly)
User onboarding and invite flow complete
Dashboard modeled
@bubble UI framework set Database set (mostly) User onboarding and invite flow complete Dashboard modeled
Next up:
□ Daily tracking entries and display
□ Troop (group) access
□ Goal and account configuration
□ Daily text updates
I'll be back soon and will keep posting as I continue!
□ Daily tracking entries and display
□ Troop (group) access
□ Goal and account configuration
□ Daily text updates
I'll be back soon and will keep posting as I continue!
