Build A No-Code Medium Publication Clone With Magic Link Using Bubble.io

Create your own no-code collaborative blogging platform with Cotter’s magic link.

Try it!

In this post, we will guide you on how to create a collaborative blog in which only logged in users are allowed to “upload a new blog” and “read full article”.

For this tutorial, we will create 4 pages: Login Page, Upload Page, Blog Homepage, and Blog Content Page.

The Blog Homepage contains a list of articles posted by the community and a preview of each article. If a writer would like to publish their article to the collaborative blog, then he/she will have to login to access the Upload Page. If a reader would like to read the full article, then he/she will have to login to access the Blog Content Page.

Database Configuration

Go to “Data” tab > “Data types”.

Create the following data types:

• Post
• Post Content
• Clap

For data type “Post”, create the following fields:

For data type “Post Content”, create the following field:

For data type “Clap”, create the following field:

Build your workflows

Login Page

This page is where the Login form is located.

Go to “Design” tab, under “Input Forms”, click “Install More…”, then install “Cotter Passwordless Login” plugin.

Go to “Plugins” tab, click “Cotter Passwordless Login”, and enter API_KEY_ID, which you can get from Cotter’s dashboard.

Once you’ve done that, you should be able to see Cotter Login Form under Input Forms.

Drag the plugin into your page. You should be able to see the login form like this:

Upload Page

This page is where writers can collaborate by uploading their articles to the platform.

Insert the following Input forms:

• Title: Input
• Article: Install rich text editor plugin and drag Rich Text Input to your page
• Post Excerpt: Multiline Input
• Featured Image: Picture Uploader
• Category: Dropdown, don’t forget to enter the choices

Create a Publish Button. The writer will click the Publish Button once they have filled the inputs.

Add a text “Your article has been successfully published!” and a link “Go to Blog Homepage”. Set the link destination to Blog Homepage. Also, make sure to uncheck “This element is visible on page load” for both the text and the link.

Under “When Button Publish is clicked”, add an action to create a “post content” type in which we will link to the post.

Add an action > Data (Things) > Create a new thing…

Add a 2nd step to create the “post”

Add an action > Data (Things) > Create a new thing…

Next, we want to display the text “Your article has been published” and the link “Go to Blog Homepage”. Add another action after step 2.

Add an action > Element Actions > Show

Blog Homepage

This page is where the list of published blogs are displayed which contains a preview of each article. Since we want to display the same article elements in the preview, we can create a “repeating group”.

Set the repeating group “Type of content” to “Post”

Also, set the Data source to: “Do a search for” > “Post”

Now, add the article preview elements to the grid. These elements can be the Title, Post Excerpt, Featured Image, and Number of Claps

When a reader clicks on the Title of the article, we want to redirect him/her to the Blog Content Page (post_page).

Under “When Text Current cell’s Post is clicked”, add an action to redirect user to the Blog Content Page

Add an action > Navigation > Go to page…

You will receive an error on the Data to send but it will be fixed once we’ve set up the Blog Content Page.

Blog Content Page

This page, also called post_page, contains the full article.

To add a log in/log out logic to the page, add a Cotter Page Shield element and put it somewhere visible on your page. We’ll add the logic later in the tutorial.

Set the post_page “Type of content” to “Post” since it has to match the data property sent within the workflow.

Now, add the full article preview elements to the page. These elements can be the Title, Post Excerpt, Featured Image, Content, Category, and Number of Claps.

Next, we want to add a Clap count whenever the Clap icon is clicked.

Go to “Design” > “Icon” and add a workflow to the icon.

Under “Icon — Clap is clicked”, add an action to create a new clap

Add an action > Data (Things) > Create a new thing…

Add a 2nd step to update the Clap count

Add an action > Data (Things) > Make changes to thing…

Restrict Protected Page Access to Logged In Users Only

Since we want to restrict the Upload Page and Blog Content Page access to logged in users only, we want to convert these pages into “Protected Page”.

To only allow logged in users, add a Cotter Page Shield element and put it somewhere visible on your page.

Now, we want to show protected content ONLY if the user is logged in.

Add a Group, then put all of your protected content in that group. Name the group “Group Protected Content”. Make sure you uncheck “This element is visible on page load”. We’ll add some logic so that this group will only show up if the user is logged-in.

Next, we want to show error message if the user is not logged in.

Add a Text with an error message and a Link to go to the login page to login. Make sure you uncheck “This element is visible on page load”.

Add Login Logic

Login Page

When the user has successfully logged in, we want to redirect them back to the page that they were trying to access before (Previous Page).

Go to Workflow and add a new event: “Elements > A Cotter Login Form — User Pressed Login”

Add an action > Navigation > Go to previous page

Other Pages (Upload Page, Blog Homepage, and Blog Content Page)

Go to the page, and click Workflow.

1. Add an Event > Elements > A Cotter Page Shield is loaded
2. Add an Action > Plugins > Check Logged In
3. Set access_token as ThisCotterPageShield's access_token, identifier as ThisCotterPageShield's identifier

Show Protected Content (for Upload Page, Blog Content Page) if the user is logged in, and show an error message otherwise

4. Show content if logged-in: Add another Action > Element Actions > Show. Then set the element as our Group Protected Content, and set “Only when: Result of Step 1 (Check Logged-in)’s logged_in is yes”

5. Show error if not logged-in: Add another action > Element Actions > Show. Then set the element as our Text “You are not logged in…”, and set “Only when: Result of Step 1 (Check Logged-In)’s logged_in is no”

Log Out and Log In Buttons

Add log out and log in buttons to Blog Homepage, Blog Content Page, and Upload Page.

Log Out Button

Add a log out button

1. Make a log out button
2. Make sure you uncheck “This element is visible on page load”
3. We want to show this button only if the user is logged in: Continuing on the “When CotterPageShieldA is loaded” workflow
   Add an action > Element Actions > Show

Log the user out when the log out button is clicked

1. Add another event > Element > an element is clicked. Pick the Log out Button as the element
2. Add an action > Plugins > Cotter Log Out
3. Then, we want to redirect them back to the Blog Homepage.
   For Upload Page, Blog Content Page:
   Add an action > Navigation > Go to page…, set Blog Homepage as the destination page.
   For Blog Homepage:
   Add an action > Navigation > Refresh the page

Log in Button

Add a log in button

1. Make a log in button
2. Make sure you uncheck “This element is visible on page load”
3. We want to show this button only if the user is not logged-in: “When CotterPageShieldA is loaded” workflow
   Add an action > Element Actions > Show

Set Button Log In as the element, and show “Only when: Result of Step 1 (Check Logged-In)’s logged_in is no”

Navigate to the Login Page when clicked

1. Go to Workflow and add another event > Element > an element is clicked. Pick the Log In Button as the element
2. We want to redirect them to the Login Page. Add an action > Navigation > Go to page…, set Login Page as the destination page

That’s it.

Check out the demo:

Bubble - Visual Programming

Follow this tutorial to add more Medium features!

Questions & Feedback

Come and talk to the founders of Cotter and other developers who are using Cotter on Cotter’s Slack Channel.

Ready to use Cotter?

If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can create a free account and check out our documentation.

If you need help, ping us on our Slack channel or email us at team@cotter.app.

Originally published at https://blog.cotter.app on September 10, 2020.