I built a community platform in 7 days
Tags: webdev, opensource, ruby, rails
Published: 2020-09-16 13:48:53

---
title: I built a community platform in 7 days
published: true
description: 
tags: webdev, opensource, ruby, rails
cover_image: https://blog.flexiple.com/wp-content/uploads/2020/09/Upwork-review-16x9.png
canonical_url: https://www.remote.tools/remote-work-community/i-built-a-community-platform-in-7-days
---

I am the co-founder of Flexiple and Remote Tools. In this post, I describe how I built a community website from scratch (almost) in 7 days.

* Custom built on top of <a href="http://lobste.rs">lobste.rs</a>, computing-focussed community
* Tech stack: Ruby on Rails, Tailwind, JawsDB, Heroku
* Cost: $17/mo ($7 for Heroku dyno + $10 for JawsDB)
* Time to launch: 7 days

<!-- wp:html -->
{% youtube V-qotuePZt8 %}
<!-- /wp:html -->

<!-- wp:heading {"level":1} -->
<h2>Product Brief</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We spent ~2 yrs to build a niche remote working audience at Remote Tools. We have 4000 newsletter subscribers, 20,000 unique users monthly, 42 stories &amp; 2 seasons of podcast.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We are building an exclusive <a href="https://remoteclan.com">remote work focussed community</a> on top of this. Given we already have a sizeable audience, the community website can’t be a simple MVP.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The broad pointers are –</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Content posts &amp; user profiles are the prime focus.</li><li>UI &amp; Micro interactions are going to be a major hook for the website.</li><li>Want to stand out from traditional forum websites like&nbsp;<a href="https://tribe.so/">Tribe</a>.</li><li>Timeline for launch is 1-2 weeks. Build only that’s most essential.</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":1} -->
<h2>Basic setup &amp; Making the website live</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I didn't want any setup &amp; maintenance hassle and since I am using Rails, Heroku seemed to be the perfect choice.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lobste.rs codebase is tested with MariaDB while Heroku pairs well with Postgres. I didn't want to spend a lot of time on migration, so, I searched for Maria-based on Heroku and found JawsDB.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I was a little skeptical to use an unknown DB/ plugin. So I dropped an email to their support asking a few basic queries. I received a response in just an hour which instilled confidence in me to go ahead with JawsDB.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3197} -->
<figure class="wp-block-image"><img src="https://blog.flexiple.com/wp-content/uploads/2020/09/cb_1-1024x645.png" alt="" class="wp-image-3197"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":1} -->
<h2>User Onboarding</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We want only truly passionate &amp; interested people to join Remote Clan and engage in genuine discussions. We didn't want to restrict access by charging for membership, so instead, we had every member share information about their work, experience &amp; their thoughts around remote working.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Naturally, the website must have tiered access basis profile completion. I added user profile fields and proper redirects &amp; prompts for incomplete profiles vs. onboard users.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3198} -->
<figure class="wp-block-image"><img src="https://blog.flexiple.com/wp-content/uploads/2020/09/cb_2-1024x654.png" alt="" class="wp-image-3198"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":1} -->
<h2>User Profiles</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We already have detailed information &amp; reviews on 900+ remote working tools posted by makers over 2 years. So we wanted to leverage and seamlessly connect Remote Tools with Remote Clan.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Added an interactive dropdown as part of the profile to choose from the list of tools on Remote Tools. Data from Remote Tools in stored in Remote Clan DB and is fetched automatically once every week.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
{% youtube YOECOnyzJGo %}
<!-- /wp:html -->

<!-- wp:heading {"level":1} -->
<h2>Email Notifications</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We know it isn't realistic to expect people to log onto Remote Clan by themselves. So we needed a way to prompt users to take action.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Email notifications are the best in this regard since everyone checks their mail regularly. Lobste.rs  already had an email notification module, which I tweaked a little to send out notifications when -</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Someone comments on a post made by you</li><li>Someone replies to your comment</li><li>Someone tags you explicitly</li></ol>
<!-- /wp:list -->

<!-- wp:image {"id":3199} -->
<figure class="wp-block-image"><img src="https://blog.flexiple.com/wp-content/uploads/2020/09/cb_3-1024x267.png" alt="" class="wp-image-3199"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":1} -->
<h2>Removing unnecessary features</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We want all conversations among members to be public so that everyone can benefit from the discussion. So personal messaging as a feature didn't make sense, at least at the current stage.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Similarly, we didn't want to overload users with tons of settings &amp; features which aren't essential to core interaction on the community.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So I stripped off most of the extraneous features including hats, moderation log, browser notifications etc.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3200} -->
<figure class="wp-block-image"><img src="https://blog.flexiple.com/wp-content/uploads/2020/09/cb_4-1024x773.png" alt="" class="wp-image-3200"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":1} -->
<h2>Consistent UI across all pages</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Tailwind is amazing for many reasons, but these stood out for me -</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Creating custom components &amp; UI was super easy &amp; quick</li><li>I was able to easily replicate custom components across all pages</li><li>I also liked the components offered out-of-the-box and used it for standard pages like all login/ signup pages.</li></ul>
<!-- /wp:list -->

<!-- wp:html -->
{% youtube N8Q7fDNJ2ts %}
<!-- /wp:html -->

<!-- wp:heading {"level":1} -->
<h2>Iterations on homepage UI</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The landing screen is the most important page on the website. We wanted to put our best effort on this so as to retain all of the traffic we divert to it from Remote Tools &amp; other channels.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We spent a good amount of time discussing &amp; debating possible options for the posts, colors, buttons, hierarchy etc. and came up with 4 choices. We put up the 4 choices through our Twitter account and also sent it in our newsletter to get people's opinion on what clicks.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3201} -->
<figure class="wp-block-image"><img src="https://blog.flexiple.com/wp-content/uploads/2020/09/cb_5-904x1024.png" alt="" class="wp-image-3201"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":1} -->
<h2>Transfer early access data &amp; Initial threads</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>For ~2 weeks, we had put up a simple early access page explaining the community and having interested people sign up. This was before I wrote even a single line of code.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3202} -->
<figure class="wp-block-image"><img src="https://blog.flexiple.com/wp-content/uploads/2020/09/cb_6-1024x472.png" alt="" class="wp-image-3202"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>We had ~150 people complete our onboarding form on Typeform for early access. All of this data was sitting in AirTable and I wrote a simple script to fetch the data &amp; create these users &amp; their profiles.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
{% youtube GPkyNILF2TQ %}
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Finally, we created our initial set of threads on community guidelines, introductions &amp; coffee chat.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3203} -->
<figure class="wp-block-image"><img src="https://blog.flexiple.com/wp-content/uploads/2020/09/cb_7-1024x725.png" alt="" class="wp-image-3203"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":1} -->
<h2>Going Live</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>That's it! We were live on Day 8 😎</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I sent out welcome email to all early access users via MailMeteor.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3204} -->
<figure class="wp-block-image"><img src="https://blog.flexiple.com/wp-content/uploads/2020/09/cb_8-1024x699.png" alt="" class="wp-image-3204"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>I document my journey and write regularly about tech &amp; remote work on Twitter, you can <a rel="noreferrer noopener" href="https://twitter.com/hrishiptweets" target="_blank">follow me there</a>.</p>
<!-- /wp:paragraph -->