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.
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.
- Add an Event > Elements > A Cotter Page Shield is loaded
- Add an Action > Plugins > Check Logged In
- Set
access_token
asThisCotterPageShield's access_token
,identifier
asThisCotterPageShield'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
- Make a log out button
- Make sure you uncheck “This element is visible on page load”
- 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
- Add another event > Element > an element is clicked. Pick the Log out Button as the element
- Add an action > Plugins > Cotter Log Out
- 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
- Make a log in button
- Make sure you uncheck “This element is visible on page load”
- 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
- Go to Workflow and add another event > Element > an element is clicked. Pick the Log In Button as the element
- 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:
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.