Refcode Dashboard

Setup

0 / 1 requirements met

Enroll in this course

In order to keep track of which items you have completed, please click the "Enroll" button to enroll in this course. Then you can mark items as complete as you finish them.

Get set up in the class

0 / 3 requirements met

Join the Refcode Slack Workspace

We will use Slack for communication in this bootcamp. Join using this link:https://join.slack.com/t/refcode/shared_invite/zt-6q9vg5hj-mH1em3mLYRmyL51nCbuT2g

Join the #bubble channel

Join the #bubble channel in Slack!

Send intro video via Slack

Use the Slack video feature to record a 5 minute (or less) video of yourself and send it to the Slack#bubblechannel.
Introduce yourself
What your background in technology is
Why you’re taking this course
What will you build once you know Bubble?

Project 1: Hello World!

This is your first project, and it's designed to be as simple as possible.
The video should give you all the information you need to complete this project.  After you watch the video, make sure you meet each of the requirements in this category before moving on.

CREDIT: A link to your project.

0 / 6 requirements met

0 / 1 credits granted

Create your Bubble account

Create an account at Bubble.io, as shown in the video.

Overview Video: Project 1

This video will introduce you to Bubble and give you all the information you need to complete your first project.

https://youtu.be/lRGUiStlIQo
(3.5 mins)

Create a new Bubble app

Create the app in Bubble, as shown in the video.

Add a text field

Add a text field that says "Hello world!"

Play around a bit.

The best way to learn is to play. Get to know the Bubble editor by playing around a little bit and experimenting with things.
Don't worry about breaking anything since you'll be throwing this app away later.

Share a link to the group on Slack

Share a link to the app that you created on Slack!

Bubble Intro Videos

Bubble has a lot of extremely helpful intro videos built right in! You can use these to learn the basics.

0 / 8 requirements met

Overview Video: Bubble intro videos

https://youtu.be/XI3j9CgStd4
(3.5 mins)

Video: Application Editor Walkthrough

https://vimeo.com/718078874(2 mins)

Video: Designing and Interface

https://vimeo.com/718078855(1 min)

Interactive Lessons

For this section, you will complete lessons directly in the Bubble editor. Each lesson will guide you through the steps to perform some actions.
Start by visiting this page:

https://bubble.io/lessons

CREDIT: Link to application.

0 / 15 requirements met

0 / 1 credits granted

Overview Video: Intro to Interactive Lessons Section

Watch this video:

https://youtu.be/oA2NTlVyjRY

Video: Tip for the Interactive Lessons

Optionaltip for the Interactive Lessons
https://youtu.be/CvUFDDV0-Sk

Saving data

Saving data Save addresses and display them on a map
4 minutes

Project 2: Add some simple features to your app

Practice a few design patterns that are common in Bubble.
CREDIT: Link to application.

0 / 8 requirements met

0 / 1 credits granted

Build an Item Detail page in your To Do List

https://youtu.be/6yM19AdbfQM

Make a new page with "Todo" type of content

Make a new page, and set theType of contentof that page to beTodo

Add links to your list of tasks

In your Repeating Group list of tasks, add a link to the task detail page that you created.
Make sure that this link sends the correct data by settingData to sendto theCurrent Cell's Todo

Project 3: Add a sign-in feature to your app

The last step of the interactive lessons was to create a Todo list. Now we need users to be able to sign in, so that different users can create different To Do lists.
Remember that you will likely need to get help in order to complete this section.

0 / 7 requirements met

0 / 1 credits granted

Overview Video: Project 3

https://youtu.be/cq37JSLXssk

Find a YouTube video teaching how to create a user's account in Bubble

The first feature we'll add is the ability for your website users to create an account. But before we do that, we need to learnhowto do that. For this assignment, go tohttps://youtube.comand search for a video that will show you how to let users create an account in Bubble. Once you've found the video, post a link to it in our Slack channel.

Add the ability for users to create an account

Now that you've found a video, and possibly seen some videos that others have posted as well, go ahead and build out the feature! If you need help, ask on Slack!

Deep Dives

These videos will dive a little deeper into various Bubble development areas.

0 / 3 requirements met

The Database

A video to explain how to write to the database and why it's called a "table" sometimes.

18m 35s
https://youtu.be/7emuwfjNxek

Layouts

Watch this video:

https://youtu.be/ptX4mVnR6A8

Workflows

Watch this video:

Broken Link

Bubble Crash Course

This is an incredibly comprehensive survey of the features of Bubble. Soon you'll be intimately familiar with every single topic in this video. It's a 3 hour video but worth every second. Make sure you watch the whole thing!

0 / 1 requirements met

Watch Video Bubble Crash Course for Beginners (2022) (3 hrs)

https://www.youtube.com/watch?v=CSMx0cTa6Ls
This is a 3 hour long video!

Here are the sections:

Introduction -00:00 
The Bubbling mindset -00:45 
Creating a new app -04:48 
Setting up our first page -05:36 
Adding visual elements -09:50
Collecting user input -13:01 
Your Bubble database -19:40 
Improving the UX of our form -37:30 
The debugger -39:00
Retrieving data from the database -42:26
Groups -48:58
Repeating groups -56:02
Pushing data between containers -1:01:20
Editing data things -1:09:46
Combining our edit and create forms -1:19:05
Only when rules -1:23:43
 Yes/no statements formatted as text -1:29:23
Pages -1:31:28
Inter-page navigation -1:35:53
 Reusable elements -1:38:54
 Users -1:46:22
User sign up -1:47:22
Conditional statements -1:59:25
Custom states and forking logic -2:05:22
Creating our login/signup form -2:29:48
Data relationships -2:41:03
Privacy rules -2:49:49
Creating a ‘favorite products’ list -2:56:20
Closing remarks -3:04:49

Project 4: User Chat

Building a chat feature is actually very similar to building a to do list. Your goal is to make a web page where users who are logged into your app can send messages to each other.

0 / 11 requirements met

Overview Video: Project 4

This video will walk you through all the steps for creating a chat page.

https://youtu.be/b4oLE6BdzH8
(3.5 mins)

Create new page

Create a new page in your Todo app called "Chat"

Create the Message Data Type

Create a new Data Type (a.k.a. database table) namedMessage. This will be the data type that we store chat messages in.

Project 5: Cat Market

For your final project you will build a two-sided marketplace. This is a very common type of website. Examples include Airbnb, Amazon, Uber, Thumbtack, and more. What makes it two sided is that users can put things into the marketplace, and they can also shop for them.
Your marketplace will be for trading pictures of cats. Any user will be able to list a new cat picture in the marketplace, and any other user will be able to "buy" it.

Each user profile will show a list of the cat pictures that the user owns.

To complete this project, you'll need all of the following:
Log In / Create Account pages. Users can create accounts and log in.
Cat Creator. A page where a user can upload a picture of a cat and create a new tradeable cat.
Marketplace. A page where users can browse all Cats that are available to get.
User Profile. A page which shows all of the Cats that a user owns.
Inventory Management. When a user views their own profile, they should be able to click a button to make a cat "available" or "unavailable."

0 / 5 requirements met

Log In / Create Account pages

Users can create accounts and log in. (Try to complete this on your own but if you get stuck you can watchthis.)

Make a "Cat Creator" feature

Build a page or section where a user can upload a picture of a cat and create a new tradeable cat.(Try to complete this on your own but if you get stuck you can watchthis.)

Build the Inventory Management feature

When a user views their own profile, they should be able to click a button to make a cat "available" or "unavailable."