(image source: freepik.com)
With all that’s going around in the world today, it only makes perfect sense why more and more people have a lot to say.
From our polarising economy to global politics, numerous stories warrant telling. That said, if you’re a creative entrepreneur looking to build a platform that fosters a community of writers and opinion leaders, you may want to develop something like Medium—a blogging avenue that allows writers to share their thoughts, all while generating a profit.
Throughout this tutorial, we’ll write about how you can build your own version of Medium without having to write a single line of code! Whether this is a brand you’d like to cultivate or you’re just interested in learning how to build the platform’s core features, this guide should tell you what to expect when building a blogging platform.
Let’s start!
Because our objective is to create a Medium clone, the core pages we’ll work on are a user profile, an upload page, a homepage, and a host page.
Establish your database
Once you’ve established your product’s display, you can move forward with establishing the appropriate data fields to let your Medium clone work. We’ll then depend on these fields to make sure your app’s workflows are functional.
Thankfully, Bubble utilizes a pre-built database, making it easy to stitch various data types. We recommend dividing bigger items into different data types when creating a database to ensure better application speed overall.
For instance, for each new post, we’ll make sure to build two separate data types. One data type will cover basic post details such as the name, the post excerpt, and an image. Oppositely, the other data type will include bigger content files like the actual essay itself.
When we approach our app by building two separate data types, we allow the app to load only what’s appropriate in the given time. Consequently, this ensures that Bubble will not have to render substantial amounts of content when it isn’t needed.
For our Medium clone, we’ll pattern after the following fields and data types:
Data type: User
Fields:
- Name
- Bio
- Profile photo
- Published posts – Note: Creating a field as a list based on a separate data type allows you to seamlessly integrate all of its relevant data fields without having to create additional fields
- Followers – List of users
- Following – List of users
Data type: Post
Fields:
- Title
- Featured image
- Excerpt
- Category
- Content – Post content
- Comments – List of comments
- Claps – List of claps
Data type: Post content
Fields:
- Content
Data type: Comment
Fields:
- Content
- Post – post
Data type: Clap
Fields:
- Post
(source: https://bubble.io/blog/build-medium-blog-no-code/)
Establish your workflows
Now that we’ve mapped out our app’s design and database, let’s move forward with connecting workflows to make sure the app works.
Bubble uses workflows to make sure the entire app is functional. In other words, workflows work when a series of events are triggered by certain actions.
Make a post
Because the platform we’re building is a blogging platform, we’ll first want to make sure that users can create and upload their articles.
The upload page should be able to accommodate input elements that let users add data to the database. These fields should comprise an image uploader, text inputs, and a dropdown option.
When relevant details have been added in each input, users should be able to click the “publish button” and have their article available on the platform.
In turn, clicking the button should trigger a workflow to make it functional. This means, on your database, you’ll then have to “create a new thing” and set the data type as “post.”
After which, we’ll have to supplement the appropriate fields in our database. This is done by arranging your on-page input elements with their appropriate fields.
We’ll begin by building the post content type, and then associate it to the actual post.
After that, we’ll supplement one more step on the workflow to “create another thing.” Here, what we’ll want to create is the post itself.
When we link this post with the initial post content, we can conveniently integrate this data across the entire application.
This means every time a user triggers this workflow, they immediately create a new post.
How to display content
When a user starts to publish their articles on the platform, we’ll have to ensure that their stories appear on the homepage as a dynamic list. This is done by using the repeating group element.
This is because repeating groups make it possible to integrate your data into your database, and then display the content on the feed.
When optimizing the repeating group feature, you’ll have to link the database data type to the element. In this context, categorize the content type as “posts.”
When done, set the data source as a list of all your database posts.
After which, you can begin by mapping out the dynamic content that you’ll want users to see in the grid.
Arrange the top row with the appropriate content you want to preview, and the element should automatically populate the succeeding columns based on the present data you have on your database.
And just like that, you’re halfway through building your own version of a blogging platform!
(Catch the next blog to find out how to finish the complete tutorial)
Interested in building your own app? We’re the agency to partner with!
