No-coding required — built a simple clone of Instagram using Bubble.io
I just built a fully functional web app without writing a piece of code! Have I caught your attention fellow programmers?!
With Bubble.io I designed and created a clone of Instagram which includes a frontend, backend, and database. Just to give a bit more context, Bubble.io is a visual coding language for anyone to create and design a web or mobile application — no previous experience required . After spending some time playing around with the platform I became more and more impressed at how easy this was. It’s a game changer, considering I just finished a coding bootcamp where I learned software engineering and how to code.
Now, I’d like to share a bit about how I built this social media clone without writing any code. Here is the link to check it out.
Here is a high level overview about how the platform works…
There are three main areas in which I focused my attention on the platform — design, workflow, and data tabs. It is similar to creating a frontend, backend, and a database when building an app. I’ll share a bit about each of these tabs. There are several other tabs for users like plugins, settings, and logs. I did not experiment with any of these tabs. Next time, I’d probably trying incorporating plugins. As I was creating my app, I am able to preview it as I went along so that gave me a good feel for how my app was coming along. Also, they have an academy where users can watch tutorials or read through the manuals to better understand and use the platform. It is very user friendly, which is great for newbies.
Design
The design tab is essentially like creating a frontend for my application. I was able to choose from many design elements such as text box, button, drop down, input, icons, containers, etc. There are of course many more options, these are a few of the design elements I found myself using most of the time. Along with the design, there is a style tab which is how to style borders, colors, font, padding, etc. Honestly speaking, once I got a feel for the platform, it was very easy to navigate so designing was made easy.
Workflow
In the workflow tab, this is where I attached an action to an event element on the frontend. An event can be considered something like a “sign up” button or “log in” button, but not limited to these. For example, I created a Sign Up button on my home page. When a user clicks on that button, it then directs the user to another page which then prompts the user to enter credentials onto the platform to create an account. Normally, this would require a lot of time coding this as this is really where the functionality comes into play for an app. They definitely streamlined this part!
Data
I’m surprised at how quickly and easily I was able to get data entered to test my app. Super simple! It’s so intuitive. I had User and Post for my data types and both had attributes. Bubble uses fields for the data type like when I used Rails MVC. My User had first name, last name, email, password, etc. Similarly to Active Record migration, it has a Created Date, Modified Date, and more. When I added the fields to my User and Post, I had to assign whether it was a text, number, date, date range, etc. Again, very similar as to how I would set up my backend with Ruby on Rails.
Let me just say how easy bubble.io is to navigate. I’d highly recommend this platform to anyone who’s looking to start their own website or mobile application, to business owners, students, etc. I hope you enjoy this platform as much as I did.
Happy building!
