Thread by @eveningloop

👋Want to learn some NoCode today?

You can follow along as I build my Sunday Project:

A Reddit style Post Voting Page 👽

created entirely without code #buildinpublic 🧰

Follow this thread to learn how 🧵👇

Reddit is great because it lets the users decide what gets to the top of each page

So why not make your own voting page for your favorite links?

I'm going to do exactly that using @bubble

The first thing to I do is create a new app

I'll give it a name and fill in some details

Reddit has grown over the years but the basic features I'll use are:

-Submission Title
-Submission URL
-Upvote
-Downvote
-Total Votes

I'm going to make some database fields to hold this information

Real easy since @bubble includes a database

Data Type: Submission
-Title(text)
-URL(text)
-Votes(Number)
-Upvoters(List of Users)
-Downvoters(List of Users)

Now I want to make a Submission "mine" when I add it

To do this I'm going to add a field in the User data type:

-Field Name is "My Submissions"
-Field Type is "Submissions" which refers to the data type I already made

and I'm checking the box for multiple entries

I can get to work on the front end design now

My page width will be 1200px

and I'll start with a simple header

-Group, Flat color BG #FFFFFF 1200x50
-Image Element (Astronaut Icon)
-Text Element( linkkit name)

The main section only requires a few elements

Base elements:

-Group container
-Popular Posts heading (text)
-Submit (Button w/text + icon)

Now the core elements for the voting submissions:

-Repeating group to display the list of submissions
-Data Source: Search for Submissions (sorted by Votes)
-Icons (Up/Down Arrows)
-Text (Submission Title)
-Text, box checked to recognize link (Submission URL)

Last thing I need is the current vote score for each submission

This will be a text element with a simple calculation:

Current Cell's Submission's Upvotes:count - Current Cells' Submission's Downvoters:count

Now I'll be left with the vote count I'm looking for

To add new submissions I'll add a popup form

-New Submission (text element)
-Add a title (input element)
-Add URL (input element)
-X (icon)
-Submit (Button w/text + icon)

That should do it for UI elements

Time to build the workflows to make everything run

To start I'll just do a simple Show Popup workflow to get the submit screen to show

-When Group Button Add is clicked → Show Popup Submission

The workflow to add a new submission is simple

-When Group Button Add is clicked → Create a new Submission

Title = Input Add title value
URL = Input Add URL value

Then I'll reset inputs to clear the boxes
and hide the Popup box

To test it out I added one of my previous Sunday Projects

I put in a title and the URL for Landing Hype and it showed right up

With the submissions working I just need to add a way to vote

I'll focus on upvoting first

There are two conditions I need to account for:

-Current user hasn't upvoted yet
-Current user has upvoted

I can have it check using the Only when...

When the current user hasn't upvoted

-Make a change to a thing... Submission
-Thing to change... Current cell's Submission
-Upvoters add Current User

I can also calculate the total votes

This could be useful if I want the number without doing a calculation

Step 2
-make change to a thing... Submission
-Thing to change... Current cell's Submission
-Votes = The Submission's Upvotes: count - Submission's Downvoters: count

The second condition allows a user to remove their vote

When...contains Current User

-make a change to a thing... Current cell's Submission
-Upvotes remove Current User

Step 2 recalculate the vote
-Votes = The Submission's Upvotes: count - Submission's Downvoters: count

For downvote I'm just repeating the same steps

this time I'm changing the Downvoters field

For a better user experience I'm going to add some conditions to the icons

When a Current User adds Upvotes I'll make the icon orange

I'll also make it so the icon isn't clickable if it was already downvoted

Later I could add more workflows to allow instant switching of votes

Repeat it again for the downvote

That should do it for all the logic necessary

Now I'll try and upvote my post...

It worked!! 🎉🥳🍾

Now I have a fully functioning post vote page like Reddit

Hopefully you learned something new

-Please RT the first post and tag someone that might find this useful!

-Follow me if you want to see more updates and projects like this

If you liked this check out some of my other Sunday projects:

Tweet Wall of Love:

https://twitter.com/eveningloop/status/1424416098489933824?s=20

Link-in-Bio Page:

https://twitter.com/eveningloop/status/1421855500027707392?s=20

Landing Page Gallery:

https://twitter.com/eveningloop/status/1419383352759656451?s=20