7,155 insertions and 3,005 deletions is definitely my record for most changes pushed to Github in one branch. Not that I should boast about it, considering standard practice is breaking up tasks and pushing them one at a time, but I’m working by myself and I never worked harder or longer than I had during this past month, so it was a cool thing to see these stats so high. I guess when your back is up against the wall, you perform your best. At least it felt like that in this case.
Why? Because my financial situation has become grimmer and grimmer, and finally the reaper has arrived. So before shifting course and seeking income-producing work, I had to get a few major things done with TipStampers before coding could go on autopilot. Or in other words, before I could turn TipStampers into a side hustle where onboarding and promoting could be done with less time and greater ease.
What this meant, was add Poll and List functionality to the platform, and add a feature to them that froze entries at a specific time, with the results permanently posted to the Blockchain thereafter—which we would call “Stampshots.”
With this, I would have an exclusive, consistent, daily event that people could participate in, and I could tailor the polls or lists or questions to the interests of specific demographics—or—ride the wave of whatever topic is trending at the time. Since people enjoy conducting and participating in polls, I could see this generating activity and catching on quicker than other sections of the platform as well. So, this became the #1 thing I needed to have finished before moving on.
This gargantuan task started by researching the best way to trigger a function in the future. I didn’t want to use a setTimeout for something over 24 hours later, so I had to do some digging. Since I use Google Cloud Platform (GCP), my options ended up being Cloud Tasks or Cloud Scheduler. Cloud Scheduler was my original inkling, but it was more expensive by a landslide, so the obvious choice ended up being Cloud Tasks.
I watched a few YouTube videos for the setup, and once I witnessed it working, I set out to solve the timing part of the equation. I needed the Cloud Task to fire “the next day at midnight PST”—a time where activity on the website and database would be minimal—so I had to learn about Dates and their conversions.
It took tinkering and plenty of research, but eventually I got what I needed:
- The number of seconds before the Cloud Task would trigger the necessary Stampshot function, as this was explicitly required by Cloud Tasks itself.
- The actual date and time the function would occur, so I could store it in the database and use it to create a countdown clock within any “Stampshot” Poll or List.
Here’s the function that did the trick.
Once I had this part of the functionality working, I was very pleased since it was the most intimidating and uncertain piece of this particular puzzle.
After that point, building Polls and Lists was put on hold, because while I knew what I needed to do for it, I also knew it would take a TON of time. There was no avoiding that. So I decided I would get everything else on my checklist completed first. And while the checklist was short originally, it ended up evolving significantly.
For example, I added the ability to embed Apple Podcasts into posts. A few months ago I added the ability to embed Tiktoks, Instagram Reels, FB Watch, YouTube, Vimeo, Spotify, and Soundcloud content, but for whatever reason, I didn’t embed Apple Podcasts at the time. Maybe being an Android user, I didn’t realize how popular they were. Anyway, here’s how it looks when you embed one into a post.
I also added a few aesthetic improvements as well. The website is much more rounded now, and the dropdown menus are one example of it looking better as a result. For additional visual enhancement, Icons were added within them too.
One constructive criticism I received by a member of the platform was that the “Create Post” button was not easy enough to find. At first, I was taken back because it’s in the same location within each category, but then I realized that’s probably not where he was looking. After logging in, your home page turns into your “Feed” and I didn’t have a “Create Post” button there. For good reason mind you, as I wanted to avoid improper category selections, but I realized he was right, and that I should include one there too. So I added the button that triggers a modal, which then prompts users to select the category to create a post in. Here’s how it turned out.
The other major aesthetic change besides larger text, a change in font, bigger category buttons, subtler
line breaks, and the roundness I previously mentioned, was doing away with Loading Spinners and replacing them with Skeletons, similar to how Facebook and YouTube does it. With animation and all. Here’s what it looks like about midway through the animation. Much cooler and sleeker than a Loading Spinner.
I also decided to store and retrieve a logged-in user’s initial data from localStorage, before hitting the database and storing it in Redux, to speedup perceived loading time. Previously, a user’s avatar would take extra time to display—along with certain conditional renderings—but now, it’s instant like other social media websites. All for the price of a few extra seconds of un-updated statistics that a user won’t even notice. A very small price to pay, I must say.
An additional functionality I added to comments, was the ability to embed media content into them, such as TikTok videos and others I previously mentioned. To keep things clean, I originally only wanted to allow embedded content within posts, but I changed my mind and programmed the extra logic into all three comment tiers. TikToks, Reels, YouTube videos and the like, can be included in any comment as of now. Here’s how it looks when you add a TikTok video through the editor.
While on the topic, my other most important update for achieving onboarding success revolved around Social Media. Specifically, it had to do with the most popular Social Media platform of all: TikTok.
What I decided to do was swap the “Fun” section for a “#TipTok” section, to highlight and emphasize the fact that people can post their TikToks and earn money from them here. By associating TipStampers with TikTok, the platform has appeal to both the younger generation, as well as a mainstream audience. It negates any crypto feel, and turns the platform into something my desired demographic is familiar with. You post TikToks and earn money from them on TipStampers.com. Simple.
So within the #TipTok category section, I brainstormed types of content a mainstream audience would be most interested in, and what would have the greatest chance to prompt users into sending voluntary tips to the creator. Category types included: Teaching, Cooking, Fitness, Gaming, Performing, Comedy, Nature, Art, Animals, Sports, and Music. Then, “TikTok Playlist” was included as a catch-all category, for any TikToks that didn’t have a home. People can share whatever TikToks that interest them there.
Note: All Media embed types can be added to posts and comments within the #TipTok section. TikTok is specifically emphasized because it’s the most important for onboarding purposes. It paints the picture that needs to be painted.
Now, for Polls and Lists. Let’s start with Lists since it was easier to code. Basically it needed minor conditional rendering updates and visual changes.
In the screenshot below, you’ll see a List post along with 1 entry to the list. You should notice it has a greyish blur, and that’s because part of the entry is hidden, to keep it as “list like” as possible. In the future, I may add the option to view it in pure, 1 line list format too. For now, this is the only option.
And when it’s expanded.
Onto Polls now… The real doozy due to many conditional rendering updates, extra inputs and logic, additional collections, extra data to display in multiple locations, tinkering with pie and bar charts from the chartjs NPM package, and making sure everything looked good on mobile too. Oh, and I had to make sure the Stampshot logic also worked flawlessly and the display rendered correctly. Like I said, gargantuan task. But, one that was accomplishable.
So, let’s walk through a Poll, which starts on the Editor Page and is found in the screenshot below.
The Editor begins with a required 2 poll options, up to a maximum of 6. Too many options makes our brains go haywire so that’s why I chose 6.
At the bottom, you’ll see the “Add Stampshot?” button and a question mark next to it. This only applies for Members of the platform, but if you ARE a Member and you click or hover over the question mark, a tooltip will be displayed with the following text.
Upon creation of a poll, the page looks a little different than your typical post. Here’s an example of how that looks.
And in light mode, for good measure.
When a user clicks “View Voters” a list of the voters will be displayed, along with their vote. Infinite Scroll Pagination was also implemented to this particular array of voters.
In addition, if there are no votes yet, the charts don’t display. And if there are votes and a person is viewing the page for the first time, the results are blurred and require a click to unblur. So if the person wants to vote before knowing the results, they can absolutely do so. No spoilers allowed here, unless they’re desired.
Moving our way to a user’s profile page, I had to add the voting-based stats and vote information for each user. This was relatively easy, because my Schema setup for Votes was similar to the other Schemas I have for Paywalls or Thumbs or Shares, for example.
As you can see, I voted for Happy 3 times here, but that’s because I allowed it while I was testing it out. Now, you won’t be able to vote more than once.
And I think that’s a wrap on this blog post. If you want to see the Stampshots in action, and how it looks in production, you’ll have to go to the actual platform to check it out. I’m sure there will be an active Stampshot Poll for you to vote on.
Hope to get your vote, and thank you for your time.
Sam
Top comments (0)