Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build a No-Code Web App with Softr!
You have completed Build a No-Code Web App with Softr!
Preview
In this video, we’ll walk you through the process of signing up for a free trial and using Softr's AI builder to craft a simple, expandable web app, allowing you to bring your ideas to life.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that we know what Softr
0:01
is and what we can do with it,
it's time to get hands-on.
0:03
To get started, head to Softr.io and click
the Get Started Free button.
0:06
There's a link in the teacher's
notes below.
0:11
You can sign up with an email
or a Google account, whichever you prefer.
0:14
For speed and simplicity,
I'm just going to sign in with Google.
0:18
Once you're signed in,
0:24
Softr will guide us through
creating your first project.
0:25
It will ask a series of questions,
and you'll want to answer
0:28
these based on your plans and experience.
0:31
I'm going to answer
as if I'm a complete beginner.
0:34
You can choose a data source here
if you know what you'll be using,
0:38
but you can also click
I'm not sure yet and select one later on.
0:41
I'll be using Google Sheets,
so I'll select that one.
0:45
Softr provides
a free 7-day trial of their business plan
0:50
so you can test and experience
all their awesome features.
0:53
Okay, here's where we decide
how we want to start our project.
0:57
We can start from scratch, but for your
first project, I wouldn't recommend it.
1:00
It's easier
to begin with something pre-built
1:04
that you can adjust
while learning the tools.
1:07
They offer a lot of great templates
for different types of apps.
1:10
I'm going to select Generate with AI.
1:13
This allows us to describe what we want,
and software
1:15
will generate
a working app for us in seconds.
1:18
There are application type options up top
to get an example prompt started for you.
1:21
You can also click on Suggest a Prompt
to create a new one
1:26
for the selected app type
I selecting Membership Platform
1:29
I give it a simple prompt for a tech
1:35
learning platform and click
preview your app
1:37
After a moment, software provides
an example
1:41
brand name and an option
to choose a theme and accent color.
1:43
You can always adjust these settings
later, so don't worry if you're unsure.
1:47
I'll select the modern theme
with a green accent color.
1:53
Now I'll click Generate Your App
and let it do its thing.
1:56
After a few moments,
2:02
we get an awesome
Leo GIF and an option to take a tour.
2:03
I'll cover the basics of the
UI in a moment,
2:07
but feel free to pause
and take their tour as well.
2:09
Awesome!
2:12
Here's the beginning of our app.
2:13
Let's take a look around.
2:15
In the center,
we have our work area, where we can add
2:17
and remove sections, or blocks as software
calls them.
2:20
We can close the right panel for a larger
view.
2:24
Up top, we can switch between how it looks
on desktop, tablet, and mobile.
2:27
At the top
of each block, there are these small icons
2:33
showing the access level,
or visibility, of that particular block.
2:36
If we hover over the globe
2:42
icon, it indicates visibility
for non-logged in users.
2:43
The lock icon means it's only visible
to logged in users.
2:47
This prevents the need to create
separate pages for different user types.
2:52
Clicking on a block
and going to the Visibility
2:57
tab lets us adjust these settings.
2:59
Individual elements within a block can
also have their own visibility settings
3:02
For example in the header different
elements appear based on the user
3:07
The courses button is only visible
to logged users in the admin group
3:12
while the sign link is only visible
to non-logged-in users.
3:17
This is super handy,
and we'll touch more on it later.
3:21
On the left, we have our
3:24
page structure,
where we manage and edit different pages.
3:25
Clicking a page lets us view and edit it,
and hovering over one shows its endpoint.
3:29
If I click the course's list page,
you'll see that
3:34
the AI has generated placeholder
course data based on my simple prompt.
3:37
It's even created all the pages
it thinks I'll need.
3:41
Very cool.
3:45
Next, we have the theme menu.
3:46
Here,
we can adjust font families, theme colors,
3:49
and other styles to match our preferences.
3:52
Below that is the user's menu,
3:56
where we can manage
authentication, roles, and permissions.
3:58
Here, we can enable logins
for exclusive content access, set up
4:02
authentication methods email, password,
and Google sign-in, or even magic links,
4:06
manage user accounts,
view registered users,
4:12
edit details, or remove accounts.
4:15
You can sync user data with databases
or Google Sheets, and you can assign
4:19
user roles and permissions to control
what different users can see or do.
4:23
for example, admins versus regular users.
4:28
Finally, we have the settings menu,
where we configure key
4:32
aspects of our app,
including general settings
4:35
adjusting the app name
favicon and basic details
4:38
custom domain
where you can connect your own domain
4:42
instead of using a software subdomain SEO
4:45
optimization and integrations
4:48
connecting third services
Stripe for payments and Google Analytics.
4:51
There's a lot that you can integrate
there, so I highly recommend exploring it.
4:56
The panel on the right is
5:02
our block editor
where we customize content and design.
5:03
Here we can edit text and images,
change layouts and styles,
5:06
manage actions,
and control visibility by user type
5:10
or device.
5:14
Clicking
a block element reveals a paintbrush icon,
5:18
which opens
styling options for that specific item.
5:21
Software also has a preview mode, allowing
us to interact with the app as a user.
5:25
We can test logins, navigate pages,
and see how everything works before
5:30
publishing.
5:34
Lastly,
5:39
clicking home takes us to the dashboard.
5:40
This is where
all your projects are stored,
5:43
where we can start a new project,
and where we can adjust account settings.
5:45
There are also useful links,
the video tutorials page,
5:49
which provides lessons
on using the platform.
5:53
I know, that probably felt a lot,
5:58
but you'll get used to it in no time
once you start using it.
6:00
Also, this video will always be here
if you need to reference it
6:04
for something you can't find.
6:07
In just a few minutes,
we've gone from signing up
6:09
to having a fully functional app
generated for us.
6:11
In the next video, I'll start by
showing you how to import your own data.
6:15
See you there!
6:19
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up