How To Build A Medium Clone With No Code - Bubble

If you love reading written content, you’re more than likely familiar with Medium. The community blogging platform hosts one of the world's largest repositories of written articles.  Although Medium offers a seamless way to create and distribute content, you might be interested in building your own unique version as you grow a community of your own.


This is a companion discussion topic for the original entry at https://bubble.io/blog/build-medium-blog-no-code/
2 Likes

This is very helpful, I followed this to a T as a new user completely new to bubble, which I assume these are designed for.
One thing I would suggest is that you actually test from a new user perspective, curse of knowledge and all. This is definitly missing steps.
For instance, it breaks the instructions for setting up search, no idea which step is missing.
Also the comment portion of the article is incomplete, its missing the step to make changes to the post data after the comment is added. I will be honest, I was about to give up but did some external research to get it working.
Just a thought. Thanks for the tutorial!

3 Likes

Hi there and tks for sharing. I have one question : why do we have to create a “PostContent” object ? Why didn’t we simply create a “content” field ?

1 Like

I am wondering about this as well. Seems redundant.

I’d love to have an “Import Story” feature like what Medium has. Any strategies or links to instructions for how to let the user input a URL and have Bubble gather the blog article content at that web address, add that to the database, backdate the post to the original post date, and add a canonical link to make sure no one’s SEO will be penalized?

Any time you load a data object in Bubble, you load all of it’s fields. Since the content field can get quite large, you don’t want to have to load it where it’s not necessary.

For example, on the home page of medium, you’d have a repeating group of posts (latest articles, or something). If you retrieve the posts for that repeating group minus their content, you’re retrieving less data, meaning faster loading of that repeating group. You don’t need the post’s content at that stage, since you’re just showing the titles and headlines of each post.

Then when you actually want to show the post itself, like on a dedicated /post page, then you simply load the postContent object for the specific post.

cc @calicass83

1 Like

Yep, yep. This should probably be added as a little sidebar to the original blog post. It gave me a huge a-ha moment when I learned this via Petter Amlie’s book.

2 Likes

@MattN would it also download the unique id of the postContent on the home page of Medium?

I’m wondering what would happen if the postContent was actually a list of things. What if there was many postContent nested?

In the Medium example bubble created, they have a nested list of comments - so I guess it’s the correct way to structure this?

Screen Shot 2022-02-16 at 11.12.27 AM

Here’s why I’m asking:

Maybe this isnt axtually the case?

1 Like

@brad.h yes, so let’s assume you have a post object with the following fields:

  • title (text)
  • content (postContent)
  • comments (list of comments)

Any time you would load a single post, you would load:

  • the text title (“10 ways to write clickbait”)
  • the unique ID of the linked postContent object (“1628568216492x539598626487114000”)
  • the unique IDs of the linked comment objects (“1628568216492x539598626487114000, 1631496797161x973720553962602500, 1628568210822x197284960086751230…”)

If you actually wanted to retrieve data from any of the linked objects (for example the postContent’s content field), then Bubble will do an additional request to load those fields.

The high level thing to keep in mind here is: how much data am I loading?, which will be the result of the total data in all the fields for an object (What @petter would call the data weight of an object) multiplied by how many objects you’re loading.

The unique IDs of the linked data are just a few bytes of data each, as are short text strings like those in a single comment, so they’ll load fast. But thousands of comments add up, and even a single text string containing the actual article content could be thousands of bytes - this is where you might see a hit to page load speed.

This is why storing the article content itself in a separate object will speed up the load times anywhere you need to show a list of articles without their content (like on a home or browse page).

I highly recommend you read Peter Amlie’s book on Bubble performance for a deep dive into all this!

2 Likes

Hi @matthias , the “Create a post” section starts by referring to the upload page, how do we create the upload page that leads to the image below?

Has anyone successfully built a working Medium clone? I’d love to see any working examples. (cc @matthias)

It appears Bubble’s guide is handy but missing steps.

how to create a new page for that specific post with its own URL to be found and indexed in google?