All right.
Good morning.
Happy Tuesday.
We are back on for our Tuesday live stream.
We're doing our internal team training, and we're just live streaming it so you guys can
learn kind of our process.
I've got the rest of my team on here.
Maybe we'll bring them on if we have some Q&A at the end, but we do these every Tuesday
and just talk about how we're leveraging ShapeUp, how we're leveraging AI, how we are working
with clients.
We have been an agency for since 2010 and have made a lot of mistakes and have recently
been really refining our process and dialing in our systems, and so I wanted to just hop
on here.
We're doing these trainings every Tuesday, and so we're going to start sharing them more
and more on publicly.
So today, we're going to do like a workflow tour, so a series, so I'm going to start it
out today.
I'm going to take a recent project and just go top to bottom.
How did I start the project?
How did I go through each of the steps of the project?
One of some of the tools I used, we'll talk about Notion, talk about ShapeUp, talk about
breadboarding, task grids.
We'll talk about...
I'm using ShipFast from Mark Lau.
I'm using Superbase, Cloud Code, GitHub, DigitalOcean, so I'm just going to walk through all these
little steps, and we'll have this in a nice little blog post as well, so if you hit the
description eventually after this has been live, you'll see like a little blog post with
links to everything to help you out.
So hopefully, you'll learn something.
You can always drop comments and things as we go, so it'll be very, very practical.
So let me share my screen, and this is the app.
I'm going to kind of show you like the finished product.
So everything is sort of set up here.
We're still refining some of the marketing copy, and you would go in here, and you'd
register, and you'd hit a dashboard, and here, let's see how it goes.
So we can go here and we hit upload, and you pick a file.
So I'm just going to grab, let's grab this one here, and I can give it a name, and I
can just say this was from, let's say, Keith, and it pulls the date from the file, and then
what will happen is it'll go off, and it will start to send that to, we use Whisper for
AI, and it's got a little like player down here, so you can see this, and then, yeah,
just in a few seconds, this is only like maybe a two-minute audio, it gives you back a little
summary, and then it's even references, like if someone shared like a scripture or something,
it pulls those out as a little summary, and then you can just read the words here, and
it breaks it up by sentence, which is really nice, and time codes it, which is cool.
So a lot of little things happening here, we actually time code every single word, so
we can create these really nice layout transcripts here, and the thing about this is you've got
like a block of text that's coming, or audio rather, and that's kind of hard to find something,
especially if you can imagine this is like 10 minutes long, it's kind of hard to go in
and find things, so what we've made is this idea, so you can come in here and like highlight
a section, and you can click in here and say, hey, that's for like related to finances,
hey, like this right here is related to family, and then these little highlights get created
at the top, and when you go back to the dashboard, you can see all of your highlights, and if
you click on the play button, it actually plays the audio from that little section,
which is kind of cool, so it just jumps to that part of the audio, plays that audio,
and you can obviously filter things here, so we built this whole app from start to finish,
all the shaping was about 36 hours, I did have it shaped as a two-week project, so for us,
we work in kind of 25-hour weeks, and I'm still in the like final stages of getting the landing
page up, and a few little fixes going in, so there's a little bit of margin here, but this
is a little side project, and I really enjoy our process so much that even on a side project
that's nights and weekends, and I'm just doing it for the fun of it, I'm still using our
process because it actually works, and you can kind of see this is a great example of
what a side project looks like, it's like pretty intense first week, okay, four hours
the next week, seven hours, then kind of dabbled, and then nothing, right, for like a bunch
of weeks, and then picked, well, this was, must have been July, I think, and then this
comes in, I think, in here, late end of September, beginning of October, just did another little
push, and then we got it done, so this is, you know, this process works, whether you're
doing it, you know, back-to-back two weeks, or I've spent a couple months here, I still
kind of track it as, you know, one two-week project, and the important thing here, as
we'll talk through our process as well, is we set that time limit at the beginning,
I didn't just start working, and then see where it is, I said, you know what, like if
I spend 50 hours over the next couple months on this, and launched it, that's a good amount
for me, I don't want to spend 150 hours on this, like I just don't have that in my week,
or in my year, honestly, to give that, so we set the week, kind of figure out what's
it worth to me to give someone this time to, and then I kind of time boxed it that way.
Let me walk through the process here.
First up, of course, we started in Notion.
We created this document.
We had a video last week on the template
that we use for Notion and how we use this template
and kind of check things off.
But basically, what comes out of this
is we describe the problem, a few little sentences.
So in the prophetic faith Christian world,
people get these little audio recordings,
or people give verbal encouragement
or give what we call a prophetic word.
It's just something they feel like the Lord is telling them
for this other person.
And constantly, you're just pulling out your voice memo app
and you're just storing all these.
So these tend to get lost in that person's app.
And that just lists all the problems
that this whole thing creates and why this is important.
And so we said, hey, it would be great to have,
this is sort of the outcome.
Again, I'm not talking about solutions.
I'd get a little solutiony right here,
getting specific with Google Auth.
But this was a side project.
So I'm going to take some penises.
But these are just kind of dropping my thoughts.
Here's kind of, I want it to sort of end up this way.
And the reason I said Google Auth is I
wanted it to be like a one-click.
You're in.
It's not complicated to have to remember a new password
or anything like that.
Things are transcribed with AI.
And I said it'd be cool if we could
create some sort of meaningful phrases
to pull these things out, like these different tags.
And then I also listed out the two-week project.
That's where I decided, hey, I think
this is two weeks worth of my time.
Not doing, I said, automated tagging.
I did pull this out because this got a little complicated.
And sometimes you have things in the outcome
that we literally just were like, you know what?
I'm just pulling this guy.
And I'm not dropping it down there.
So you can actually just move things and make that change
as you get into it, because some things end up
being a little more complicated.
We weren't allowing a microphone.
There's no mobile app.
I said there's no place where you can hit a button
to start recording.
It's just uploading an audio file.
I actually said any kind of linking or stuff like that.
Not uploading anything but an MP3, MP4.
There's no analytics.
So I just kind of listed out things
just to kind of cut away at what this project was.
So with that, it's keeping really crisp.
Couple of bullets is the idea.
And then we got this from Shape.
So I'll link some things here as well.
You can check out Ryan Singer.
You can check out ShapeUp, learn more about the idea of framing.
Then we moved into breadboarding.
So very simple system.
It's just like there's a thing that's orange.
And that thing has other things inside of it.
And when you want to break something out,
you just take the navigation.
You break it out into a new thing.
And that has things inside of that.
And so when you click Get Started,
you can kind of see the flow here.
We're going to be login.
We have a magic link, Google Auth.
When you log in, you're going to see just a bunch of words.
And if it's a paid user, unpaid.
I did get all the billing and everything set up with this.
And I'll show you how to do that in a second.
But let me back up for just a second,
because I should have started with this.
This is really key, because you can see in 36 hours,
I basically created an entire product
that I could sell and make money from using this process.
And so if you have an idea for something,
you want to put a couple of weeks towards it,
this is actually a sellable project.
You can go put your credit card in here.
It bills it, gives me money.
This is like a sellable tool.
So this is important, because a lot of times
you have ideas for things.
And we're like, oh, one day I'll sell this.
This actually is including all the billing and the business
side of it as well.
So let me just jump back, because that's important.
So you're not like, it's kind of a full way to test it.
That's probably a whole other video on launching
little mini projects.
But anyway, so unpaid user, we're
prompting to upgrade to premium.
And here's where you can see some shortcuts,
because I was like, upgrade to premium.
And that just doesn't go anywhere.
So there's some missing pieces as I was building and coming
back and forth.
But what was really funny about this process
is every time I got stuck in the app
and things felt weird and awkward,
I would kind of go in this little loop.
And I was like, I'd eventually reach
for this tool of breadboarding again.
We had this weird, weird flow where
you would, when you were in the audio here, you could see.
Let me go back to the app.
When I clicked Upload, it goes right to the file.
You can't really see that, but it pops up my Finder window.
I choose the file, and then this thing comes up.
So for some reason, because I'm leveraging some AI tools
to build this, I would click Upload,
and it would open this pop-up with a little button that
says Choose File.
This is a very simple thing, but it's
you click Upload Audio, and then you
would land on a new screen where it's asking for a title,
it's asking for a speaker, and it's
asking for a date recorded.
And for some users, they're just not
going to know what to do with that.
And what actually happens is when you give it the audio,
it creates the title from the file name.
It creates the date recorded from when it was recorded.
So
So just by coming back to some breadboarding,
I drew out, again, you kind of draw,
like, OK, here's what it is right now.
And as I'm just the act of me drawing out what it was today,
I immediately said, why on earth am I
like putting this modal before the file picker?
So you would hit Upload File, and then it
would bring up this modal.
And then you'd have to hit Upload again, select the file,
and you'd come back to the modal.
And then you would fill out some stuff and then hit Submit.
So it's a small change, but this is
what makes the app feel very fast, is that I hit Upload,
and I'm immediately choosing a file
from my computer, which was much, much faster.
Then after I've got the file, I then
would see the modal, and then all the fields
would be filled out.
So simple little UX flow, but these things,
it's a great example of how you don't want
to trust the AI to build it.
Because the first draft of this, I was like,
this is pretty cool.
It actually works.
The file gets uploaded.
I'm pretty happy with this.
And the more I use it, it just felt off.
And so I came back.
I breadboarded what it was.
And then I started moving things around.
I did take some shortcuts.
And I actually just, when I get stuck,
you reach for some paper as well.
So this is actually me drawing the exact flow out
on some paper and just getting really just, I was like,
why is it this to this, this?
And I started to see it, and then I came back
and pulled it into FigJam here and figured it out.
And then the same thing of here is there's
some logic where you would, when you were finished doing this,
you would hit Save, and then you would just
be staring at the dashboard.
And then over here, it would say Processing, Processing
on the left.
And it was just a weird flow because it
didn't look like it did anything,
unless you saw the little processing animation
over there.
And so same thing, I said, hey, let's just
take them right into the page and then
have a processing screen there so it
feels like something changed.
Because it only took about 10 to 15 seconds most of the time
to transcribe it.
And then when it was ready, we could actually see that.
And then you would see the sidebar and everything.
So just much, much more improved user flow
just by drawing a bunch of rectangles here,
kind of seeing it.
And you're like, well, it kind of becomes obvious.
When you draw it out in this much detail,
and I would say this much detail is kind of, to me,
the right amount of detail to get to fix user flow stuff.
It's not a wireframe, which is important.
So OK, let's get back onto it.
So breadboarding, I've kind of talked through all this.
There's some more resources on that, shape up.
And then here, we went into a task grid.
So even on a personal project, it's
very helpful to do a grid like this,
where you've just got sections of the app
that we knew had authentication.
I had to do some setup stuff.
There's setting up the transcription piece,
the whole flow for the audio upload,
transcript details of actually looking at the transcript,
and then saving what we called snippets or highlights.
Then there's still the landing page.
So this piece is still being worked on.
And it's just little things as you get through.
It's like, oh, man, I've got to write a privacy policy,
get any to get the copy approved.
And there's some mockups that have to be exported.
So I'm in the final kind of 10 hours of wrapping this thing
up.
And then billing had its own flow here
of how I wanted it to work, where you would be able to
upload a few uploads as a trial.
And then it would prompt you after three
to then upgrade to a premium.
That was kind of the flow I came up with.
And then I just stuck this thing here.
We use this little tilde nomenclature
to show things that we'll do one day.
So you put this in front of that.
It's kind of like a nice to have if we have time for it.
It's like, hey, maybe.
I think of it like a maybe.
Maybe we'll do this.
And so I threw in a bunch of little things here.
Initially, I was like, I'm going to use storage for files.
I want to be able to upload a photo
and have it pull all the text out of the photo.
All cool ideas.
I just shoved it to the future.
And that way, I kept my scope.
And then if I ever want to do another part two to this,
but from a business product launch thing,
if you guys are launching side projects,
which I hope you all are experimenting with projects,
this is very helpful.
Because I have to keep that same 50-hour time box limit.
Because this is where these projects could just
sit there for months and months and months.
Because you just kind of keep adding as you see stuff.
And you haven't actually made any money on it.
You haven't actually validated the core idea yet.
So you want to get it to where people can start paying you
as fast as possible in the app.
If the thing you're solving here, which is like,
oh, I've got a problem.
I've got all these audio files.
And I need a way to kind of search them nicely
in some sort of dashboard.
That's sort of the problem we're solving.
Everything else we can add on as we go.
And then we ran into some quirky things here.
You can see there's like,
large uploads if they're over 80 megabytes,
if they're over an hour,
I ran into all kinds of like weird things.
So right now I've just kind of scoped out like the long files
because everything worked great
with my little two minute test.
And then I started putting in like,
oh, what about like a 45 minute recording?
What about something that's not compressed?
Like what if I upload a 500 megabyte uncompressed wave file?
Like what happens then?
So lots of rabbit hole stuff here
that can suck a lot of time.
And so I kind of just,
I'd say it's kind of a known thing
I'm not gonna touch right now.
So that's my task grid.
And it helped me when,
what's nice about the task grid is you kind of zoom out
and you can quickly see that this is actually done as well.
So we can mark like these big check mark things,
that's done, this is done.
And then there's two kind of things here
that are in progress.
So you can kind of quickly just see high level,
like where's Bruce at with this project?
Everybody who's watching this calls,
like I've never shown anyone this,
but you could look at this
and kind of get a sense of where we're at
and what's left to do.
So it's just a nice thing.
You can use whatever tool you want,
you can put on paper,
you can put on Asana,
you can put it wherever you want, Notion.
To me, I have not found a thing that fits my style here
because it's just enough detail
where sure I could have a lot of notes
and things about each one of these.
And so that's where it kind of breaks down.
But for me doing a personal project
where I'm the only developer on this
and the only one decision maker,
it was just enough to like note things that for my own,
to keep things fresh.
So that worked well.
So a couple of rules on this,
just make sure you're using like a verb title
or starting with a verb like fix
or create Google auth sign in.
Try not to avoid like whole feature sets
that are just like a bullet point.
Try to break those into like simple action verbs
so when you sit down, you can just start doing that.
Okay, next, something I used here,
which I highly recommend is Mark Lau,
which you should all be following.
I think he's down here.
This guy, he's on X,
kind of one of the main guys
in the sort of indie hacker space.
And so he has the template, which has Tailwind,
it has Next.js, it has Stripe hooked up,
it has Superbase hooked up,
it has all the auth for Superbase.
So when you open this project for the first time,
you already have like kind of a dashboard, a landing page.
It's pretty awesome.
And so I bought this,
you can use it for as many projects as you want,
but highly recommend it.
I mean, totally worth a couple hundred bucks
because it saved me, I would say 20 hours maybe of stuff.
And so he just ships a ton of these little features.
And yeah, like I said, if you're not following him,
go follow him on X
because he essentially just make,
he's a one man dev team
that just creates all these little products
and he shares what he's making for each one.
And he's made like 20 or 25 projects
and like three or four of them are like hitting well,
but he's doing great.
So he made this little template
cause he kept making new little startups.
So definitely check that out.
Superbase, pretty obvious.
We set up all the auth in here.
And I did set up the MCP server for Claude
to be able to manipulate Superbase.
That's one of the like most powerful things
about this workflow is that the Claude
can actually talk to this and look up rules.
And there's like in a row level security
that has to be set.
And sometimes we'd run into like,
I try to upload a thing
and it would not let you do certain things.
And so very simple.
Like we had the snippet idea,
we added categories, users, words,
and then it was like a relationship view there.
So pretty simple setup.
And then what else did we do here?
Yeah, we do have Google auth.
So when you're signing in,
very simple, sign up with Google.
It's one click.
This was very quick to get set up.
Didn't have any issues with this.
And you can see here when I start a new account,
you get these three free uploads
and then it actually does prompt you to go to do that.
Well, there's a great example.
I think this is cause I have like seven
Bruce Van Zales in there.
But click upgrade premium,
you're in the Stripe checkout flow
that comes back,
comes back, upgrades the user accounts, all that.
So it's working pretty well
where people can actually put a real credit card in.
There we go.
And then the Claude code piece,
I won't get into this
cause this could be a whole few hours on its own.
But let me see here.
Let's see.
So I'll just show you quick my flow there.
You can see it.
I have like a little instructions.
So I put all my dev notes in here.
And you can see this kind of breakdown of all the details
and just kind of some of the things that it works.
I have it make notes about things as I go along.
Some of the features had like a project requirement doc.
I think the very first one I started, I did create this
just to get that first version going to where it would have
specific things of what fields we wanted in the tables
and just got me kind of started.
And the hardest thing, I think we just had something simple
where you'd hit upload to give audio
and then it would basically send it to Whisper,
transcribe it and come back.
That was like the first maybe block or like work session
was getting it to do that.
And then everything else has been kind of putting
a workflow around those pieces.
So very simple.
I don't know if there's anything specific to show in here
other than I've got the MCP stuff set up.
I do use my workflow when I'm in here
is actually to pull Cloud into the side here.
And you do in VS Code, I switched back to VS Code.
You can push this and there's this whole thing.
I'm not sold on it just yet,
but it's kind of like a prettier UI of Cloud Code.
And they're trying to be a little bit more like cursor,
but now I'm like, I always use cursor this way.
And then I've been using the terminal so much lately
that it actually feels weird to use this.
So I typically have this
and then I have my terminal runner here
where I can run the app and see my error messages.
And then I always use shift tab
and I put it into plan mode.
We chat, we figure out all the things about it.
And then I just go into like auto approve
once I've got the plan kind of built out.
And we just work incrementally on these features.
And then I would go, that'd be my whole flow.
So let me replace this back with this guy.
And so we'd execute it.
Yeah, I'd highly recommend that.
There's some other resources I'll link to.
And then the key thing here when you're working with AI
is to like push what I call like stable features.
So I would work for a session.
I kind of get it to a point where like,
okay, I feel good about this feature.
Then I would, what I did is I like,
I committed little pieces of it to locally.
And then I actually pushed that up to the main branch
when I felt good about it.
And I would make a note in my commit messages,
like, okay, right here, we're at it.
Like I put a little emoji.
Hey, we're at a stable release right here.
Then I wouldn't be able to remember that.
Because for example, the whole rabbit hole with the upload,
I spent about two or three hours session
and we totally overhauled and refactored
the entire upload piece.
And it like kind of worked and it got way, way, way worse.
Then it, and we just went into the spiral
of two or three hours of pretty much wasted time.
And I got to the end of that session.
I was like, is this something I'm gonna like commit
or did I like the version before I started all this?
And I was like, you know what?
I actually think the version before all this
was more stable.
And I just literally disregarded the three hours of work
and didn't commit it.
And I just came back, you know,
I was left that whole feature off.
So being a little bit more specific and, you know,
controlling it with GitHub is the way to go.
I push this to auto deploy to DigitalOcean.
And so it's, you know, it's 12 bucks a month to do that.
Very simple, easy to connect.
And then it kind of manages all your deployments
and I can roll things back very easily.
We use this for all of our projects.
So I'm pretty happy with it.
And that's pretty much it.
That's the whole workflow.
I was gonna start adding a section eight here,
which was just something that I used to,
when we're doing these apps,
if you're making any kind of app,
like just be quick to share where you're at with,
you know, with your progress and stuff.
So jump on X.
I could just, we'll show you this here
where I went, made a little video.
I use screen.studio, a little app to record this.
And I made a little video that was very early,
stages just kind of showing the process of it
and how everything connects.
And I kind of talked about the problem.
And so just be quick to share things.
You see, we've got like nine comments here.
People are asking if they could test it out.
And I had actually shared something
about two years ago about this.
So I already had a couple of people that were interested.
So just be quick to share.
As soon as you got a bit version, share stuff on X,
share stuff on Facebook, wherever your friends are,
where that audience is gonna be.
And that's a great flow.
So I wanna show you one other thing we did do for this.
And we did have some design help with this
to get some initial mock-ups.
And I'll just say the UI is absolutely beautiful.
I made the mistake of hiring a designer.
And I'm not going to tag who helped us with this.
But the problem when you just go straight to UI stuff,
it's just a reference point.
So we have a whole file here where
you can go in and look at all the cool designs.
And first off, we started the whole thing thinking
we're going to do a mobile app only.
So just right off the bat, it's kind of unusable.
And so what ends up happening, you
can kind of see the way I did design
is like designer's worst nightmare
is I literally had the Figma file open.
And every now and again, I'd glance at it.
It's like a suggestion.
And so you can kind of see we did eventually.
And then when we talked about making a web app,
there's some miscommunication between me and the designer.
And they thought we were making a web,
like an app, so not a web app, like a desk.
I said, hey, let's do desktop.
And they thought desktop app.
And so it was like, oh, that's not a big deal.
It's still got a sidebar.
Still got some things here.
It's actually very different.
This is quite different than how a web app would
look versus an application.
So we kind of went off.
You can see the highlighting thing
and the idea of having some sort of play button at the bottom
is there.
Mine actually ended up being a little cooler
because I added the waveforms and I made it more colorful.
And so these things sort of evolved as to what actually
happened.
And there's a bunch of screens here
that just never got designed.
Mainly the whole mobile app got put on pause.
And then there was all kinds of UIs for settings
and tagging new categories and stuff.
So none of that got used.
Really simplified it all.
And then we did, at one point, do a quick redesign.
And so I started pulling things in and sort of taking
screenshots of what I had.
And I would just use this to quickly mock up quick ideas
because I was having trouble with some of the UI stuff.
But there's these beautifully created designs here.
And then these designs got pixel perfect match
to what happened.
It was not that at all.
If anything, it was a little bit of, hey, conceptually,
here's what an app could look like kind of got me inspired.
And then we didn't use any of this.
I would not have done this.
This was not worth the money to do this.
This was not the thing holding me back.
And for most people who are like, oh, I need the designer
because I'm only a developer, no.
Your Claude designer is going to get it to where it's usable.
It's not going to be winning design awards.
But it is going to be usable and make it user friendly.
And it's definitely good enough to get going.
And then you can, it's better to have, I'll say this,
it's better to have a well thought out,
breadboarded app than to have a beautiful UI
that's getting hundreds of thousands of impressions.
Because ironically, our designers, who's great,
very talented, I couldn't design what he did myself.
But they did get hundreds of thousands of impressions on X
and they shared our designs.
And those designs didn't actually physically work
with the flow.
It was beautiful.
And that's just a great example of how it was extremely
popular on social media.
But when it came to actually using the app,
it didn't actually work for the flow
and for the type of app we were trying to build.
So there was this kind of like, it was like the concept car
where you put out a concept car
and that concept car never gets built,
but it's cool because it stretches you
and it kind of gets you thinking a certain way
about the concept.
And then we went and actually built the real thing.
So just to get off my soapbox about designers and stuff,
because I know a lot of people, if you go on X,
the designers are the ones that get all the excitement on X.
It's so visual.
So rather have something work and be fun and easy to use
that people pay for, that's actually
what's going to make a successful project.
So that's my whole workflow.
And we'll pause for a second.
I'll just say, I don't know if our team has questions.
You can drop them in there.
I can bring you guys on, or we can go ahead and end this.
I'll give you guys a really good, yeah.
OK, sweet.
So that's it.
If you guys got questions, if you are interested
in learning more, go check out our channel and our website.
We got more content resources.
And if you're interested in working with us,
hit the link, there's in a description,
we have a link to apply.
If you guys want to join our team
and help us build cool things using ShapeUp,
using AI and just, yeah, just building some
and shipping some awesome products.
So see you guys on the next one.