[00:00] (0.16s)
In this video, I'm showing you a new
[00:02] (2.24s)
workflow to build mobile apps,
[00:04] (4.32s)
specifically Expo apps. We'll be using
[00:06] (6.80s)
TempoLabs, a solid AI powered builder
[00:09] (9.84s)
that excels in building React apps.
[00:12] (12.16s)
Along with that, we'll also use Cursor.
[00:14] (14.64s)
I'll walk you through how and why you
[00:16] (16.48s)
should start in TempoLabs. It generates
[00:18] (18.32s)
your PRD and user flow, which helps
[00:20] (20.72s)
shape a better experience for your app's
[00:22] (22.56s)
users. Now, here is how cursor comes
[00:24] (24.64s)
into the workflow. If you don't want to
[00:26] (26.48s)
code directly in Tempo Labs or prefer
[00:28] (28.88s)
making changes yourself, you can open
[00:30] (30.96s)
the project in cursor. From there, you
[00:33] (33.44s)
can create context instructions and
[00:35] (35.60s)
continue building. Right now, I'm here
[00:37] (37.28s)
in Tempo and I'm giving it the prompt to
[00:39] (39.28s)
build the app. It's a pretty extensive
[00:41] (41.20s)
prompt. I generated the app details on
[00:43] (43.44s)
how it should function, not the
[00:45] (45.12s)
technical parts, just my requirements
[00:47] (47.04s)
and gave them to Tempo Labs. I've
[00:48] (48.88s)
selected the Expo framework here and
[00:50] (50.56s)
I'll give it the prompt. It's setting up
[00:52] (52.24s)
the project. The first thing it starts
[00:53] (53.60s)
with is the PRD. You can see that the
[00:55] (55.60s)
PRD has been generated. Once that's
[00:57] (57.84s)
done, it generates the user flow. This
[00:59] (59.92s)
is where Tempo Lab stands out in a
[01:01] (61.84s)
creative workflow compared to something
[01:03] (63.92s)
like Cursor or Windsurf. It's because of
[01:06] (66.48s)
what it can do. It's a builder made for
[01:08] (68.80s)
React apps and it specializes in them.
[01:11] (71.52s)
Since that's its focus, it performs
[01:13] (73.76s)
better when it comes to planning,
[01:15] (75.44s)
designing, and linking everything. If
[01:17] (77.36s)
you want to collaborate with someone
[01:18] (78.80s)
else, for example, if you're only
[01:20] (80.64s)
handling the design and someone else is
[01:22] (82.40s)
going to build the app, you can link it
[01:24] (84.24s)
with their editor. Now that the PRD is
[01:26] (86.32s)
ready, I'm reading through it and
[01:28] (88.00s)
they've outlined the essential features
[01:29] (89.84s)
we need. If you open the user flow,
[01:32] (92.24s)
you'll see how the whole experience is
[01:34] (94.24s)
structured. When the app opens, the user
[01:36] (96.80s)
sees the home screen and from there,
[01:38] (98.96s)
everything connects. Every interaction
[01:41] (101.04s)
is laid out, even down to the
[01:42] (102.88s)
animations. All the routes are listed as
[01:44] (104.88s)
well. The mermaid diagram makes the user
[01:47] (107.20s)
experience clear. You can also edit it
[01:49] (109.28s)
by just asking the agent. It's that
[01:51] (111.28s)
easy. The development server is starting
[01:53] (113.28s)
now. Expo apps take a little time to
[01:55] (115.44s)
boot up. Once it's ready, it'll generate
[01:58] (118.08s)
designs from the PRD. Open up the
[02:00] (120.16s)
storyboard, create the designs, and link
[02:02] (122.80s)
them. You'll see exactly how the app
[02:04] (124.72s)
will look. Let me show you the design
[02:06] (126.32s)
tab. You can see it's building out all
[02:08] (128.40s)
the sections on the storyboard in real
[02:10] (130.40s)
time. It starts putting them together
[02:12] (132.24s)
one by one. These wireframes are
[02:14] (134.08s)
generated based on our PRD and the
[02:16] (136.00s)
mermaid diagram. Now you can see the
[02:17] (137.84s)
storyboards haven't fully generated yet.
[02:20] (140.16s)
We've got the main homepage here and the
[02:22] (142.08s)
settings panel next to it. They're also
[02:23] (143.84s)
divided into components. The entire app
[02:26] (146.16s)
has been laid out on the storyboard. If
[02:28] (148.16s)
you want to continue in cursor or wind
[02:29] (149.84s)
surf, here's what you'll do next. Now
[02:31] (151.76s)
you'll see a little icon called local
[02:33] (153.60s)
editing. Open it up. The first thing
[02:35] (155.52s)
you'll notice is that it asks you to
[02:37] (157.44s)
install an extension. Go to your editor.
[02:39] (159.92s)
For this video, I'm using cursor. Open
[02:42] (162.32s)
the extensions tab and search for
[02:45] (165.08s)
TempoLabs. You'll see the TempoLabs
[02:47] (167.44s)
extension right there. Open it and
[02:49] (169.28s)
install
[02:54] (174.12s)
it. The extension is now installed.
[02:56] (176.88s)
Next, choose the editor you want to use
[02:58] (178.80s)
from this tab. I'll choose Cursor. Open
[03:01] (181.20s)
it up. Allow the connection and it'll
[03:03] (183.44s)
link to your
[03:06] (186.04s)
editor. It opens up a new app and
[03:08] (188.56s)
connects through SSH, which is pretty
[03:10] (190.48s)
cool. Now the app is imported into
[03:12] (192.40s)
cursor and we can start building right
[03:14] (194.56s)
here. Now that I have the app open, this
[03:16] (196.80s)
is how I continue building. I copy the
[03:19] (199.04s)
entire PRD along with the mermaid
[03:20] (200.88s)
diagram and drop it into a docs folder
[03:22] (202.96s)
I've created. Inside that folder, I've
[03:25] (205.20s)
added a PRD markdown file where I've
[03:27] (207.92s)
pasted both the PRD and the mermaid
[03:30] (210.16s)
diagram. It's already formatted and you
[03:32] (212.72s)
also don't need to do that manually.
[03:34] (214.80s)
Just ask cursor to do it or drop both
[03:37] (217.04s)
into chat GPT and have it formatted
[03:39] (219.28s)
automatically. Once it's done, cursor
[03:41] (221.68s)
can easily access it and understands the
[03:43] (223.76s)
full context. Another great part of this
[03:45] (225.76s)
sync is that it works both ways. As you
[03:48] (228.16s)
can see, the docs folder I created also
[03:50] (230.40s)
appears in tempo. Now, we're ready to
[03:52] (232.96s)
continue building the expo app. Now, you
[03:55] (235.04s)
can see the app has been built. It's a
[03:57] (237.04s)
simple mood tracker made with Expo. I
[03:59] (239.52s)
used a prompt to ask cursor to build it.
[04:01] (241.76s)
It read the PRD and continued the
[04:04] (244.08s)
process according to that. I was using
[04:06] (246.16s)
Gemini 2.5 Pro, so there weren't many
[04:08] (248.80s)
issues. There were a few UI errors
[04:10] (250.96s)
though. For example, when I enable dark
[04:13] (253.20s)
mode, you can see that the app changes
[04:15] (255.36s)
the theme, but initially this whole
[04:17] (257.44s)
section didn't adapt to the change. I
[04:19] (259.44s)
tried fixing it in cursor with Gemini
[04:21] (261.60s)
2.5, but it didn't work. In the end, I
[04:24] (264.96s)
just prompted Tempo Labs AI agent and it
[04:27] (267.84s)
fixed the issue. It's clear tempo is
[04:30] (270.00s)
really solid for Reactbased tasks. The
[04:32] (272.16s)
app is now functional. You can open any
[04:34] (274.32s)
day section you want and log on the mood
[04:36] (276.24s)
that you are feeling for that day. There
[04:37] (277.92s)
are still a few small UI bugs to sort
[04:39] (279.84s)
out, but everything works. One thing to
[04:41] (281.68s)
note, the pinch functionality doesn't
[04:43] (283.68s)
work on my desktop. I loaded the app on
[04:46] (286.16s)
my mobile using the Expo Go app, and it
[04:48] (288.56s)
worked fine there. It was also much
[04:50] (290.32s)
smoother. The jittering you see here
[04:52] (292.00s)
wasn't present on my phone. The good
[04:53] (293.84s)
thing about Tempo Labs is that it lets
[04:55] (295.68s)
you build more than just Expo apps. You
[04:58] (298.24s)
can also create full Nex.js web apps
[05:00] (300.48s)
with it. It comes with preconfigured
[05:02] (302.56s)
integrations like authentication,
[05:04] (304.80s)
database, and payments using popular
[05:07] (307.20s)
tools such as Superbase and Stripe. It
[05:09] (309.60s)
gives you a quick start if you're
[05:11] (311.20s)
setting up a SAS business. We've also
[05:13] (313.36s)
made a dedicated video that walks you
[05:15] (315.76s)
through setting up a SAS with TempoLabs
[05:18] (318.24s)
and connecting these integrations, so
[05:20] (320.56s)
make sure to check that out, too. Tempo
[05:22] (322.48s)
Labs does the heavy lifting, turning
[05:24] (324.32s)
your idea into specs, flows, and
[05:26] (326.72s)
wireframes in minutes. Cursor then lets
[05:29] (329.36s)
you refine the code locally without
[05:31] (331.36s)
breaking that AI generated structure.
[05:33] (333.68s)
Together, they cut planning and
[05:35] (335.60s)
iteration time to near zero, so you
[05:37] (337.84s)
launch apps faster and with more
[05:39] (339.52s)
confidence. That's it for this video. If
[05:41] (341.84s)
you liked it, please consider
[05:43] (343.28s)
subscribing. If you want us to keep
[05:45] (345.12s)
making these videos, please consider
[05:47] (347.20s)
donating using the link below. Thanks as
[05:49] (349.52s)
always for watching and I'll see you in
[05:51] (351.52s)
the next video.