‍

‍

An In-depth Look at Tribe

The problem

Social media platforms lack an authentic, intimate online environment.

The majority of the content that people view on social media is on a single timeline. It is posts generated by either AI, someone you follow/is subscribed to, or have added as a friend.

The problem with this approach is that so many people have become overly identified with their online personas. All in an effort to make their post seem more exciting or appealing than it actually is and get the spotlight for most likes or views.  Problems like this make It difficult to create authentic shared intimate moments online with those you are close to. The reason is that key parts of intimacy like inclusion, authenticity, and the freedom to share vulnerabilities are hard to achieve given how social media lacks an integral environment that allows it.

‍Click here for a video demo

The Solution

Private online spaces called Tribes.

People want to be able to enjoy what they love online in an intimate fashion just like in real life. With Tribe, users can create or join multiple private spaces built like conventional social media, but only for an exclusive group of people.  It's much easier to share intimate moments this way because they're centered around a shared passion, interest, or goal within a private setting. Each Tribe will have an owner and is customizable to suit varying needs, whether that be visual or systematic.

‍

The Process

Ideation

When Tribe was being connected as an idea, it was during the 2020 pandemic where more people were online at once than ever. Social media was not a very enjoyable place to be at times. There was an influx of content pertaining to politics, misinformation, and non-relevant posts from accounts most have never heard of. 

‍

The sole objective was to create a platform that allowed people to interact online in a private space with their friends and family to avoid all the irrelevant and noisy content. By taking inspiration from two major platforms that's also provide privacy and comfort, Discord and Reddit, and incorporating their similarities and differences, Tribe was created. This seemed like the correct decision because they were quickly gaining traction & popularity as an alternative social platform. We used Trello to help manage and maintain the integrity, consistency, and wholeness of Tribe as an idea.

‍

Wireframing & UX

Once a general idea of what the app is supposed to be was established, it was time to start wireframing. To start things off, we created a rough draft on paper for the visual component of every functionality we could think of, along with multiple variations of each one. Later on, we would decide on what to use based on which components made the most sense. Miro provides us a way to bring a visual rough draft of our idea to life.

‍

‍

After we drew out all the potential components, we connected them together to grasp a better idea of how each component would be flowing and interacting within the application visually. As fun as it was to view the wireframe connected and flowing together, we soon began to realize that there was a problem. This was going to take a while to build, and we did not have the time to build Tribe with all the features we originally intended for it to have. What's the solution? Turn it into an MVP

‍

When talking about an MVP I don't necessarily mean the star of a team, even though that's what Tribe is. In this context, I'm referring to a Minimum Viable Product. A Minimum Viable Product provides a way for products, that are still in their early stages of development, to reach the eyes of the public. It's a strategic way to enter the market faster and really gauge realistically how the product will do.

So we took the time to establish what Tribe should offer at minimum functionality. What we decided on was that it needs to provide at least a closed and private space that is able to imitate an intimate environment for its members to be able to interact with one another. Inside of these spaces, users will be provided with features & functionalities that they have already been accustomed to; like a Timeline or a messaging system, but it would only be available for them as a group. This was more than enough to get things going.

If you are interested in seeing the full board more in-depth for yourself, you can check it out on Miro here: Link

Designing a Mockup (UI)

While UX has always felt natural for me, UI has always been my Achilles heel as a web developer. The issue is that every attempt leads to me having to choose between either A bland design but quick delivery or A nice design but long delivery. To avoid either one of those pitfalls I took a new approach. Meant as a means to get a good starting point for Tribe, I found “a_social_media_template_design.psd” for sale and available for commercial use, moved things around to my liking and in a way that would represent tribe best.

‍

‍

The benefit with this approach is that a lot of the icons, fonts, shapes, and other UI elements are already made. All that was left for me to do was add our own personal touch by moving, adding, editing different elements and it worked out great.

Creating a data system/Architecture that reflects the Mockup

One of the most important factors when it came to building Tribe as an application was that it had to be scalable from inception. That all is dependent on how the data is modeled and connected; as well as the functionality. To help get a better idea on what this would look like visually, we designed it all on LucidChart. 

We Did the same for a lot of the functionality as well.

If you're interested in viewing all the diagrams we’ve made, check it out on LucidChart (You do need to have a lucid chart account to view the diagram, creating one is free & easy) here

Bringing it all together and building the App

Now that a bird eye view of the visual design & architecture has been established, it was time to bring it all together. The main technology stack used to build Tribe were:

Front End

• React.Js - for rendering the front end and providing a SPA (Single Page Application) feel

• SASS - For styling

• Typescript - Helped keep debugging & testing at a minimum, implement type safety, and provide a smoother development experience than vanilla js.

• SWR - Data Fetching and Data caching for React

Back End

• Node.js - Powering the backend

• Typescript - Same reason as for the front end

• Express - Framework for NodeJS to help create Api endpoints

• Passport - For authentication

• MongoDB - A NoSQL DB to get projects up and running fast

• Socket.io - Provides an open connection for notifications and messaging without reloading the page

• Cloudinary - Storing images on the cloud

To see the code check it out on my GitHub. Api & Client

‍

Closing Thoughts

If you’ve made it this far, I want to thank you for taking the time to read my journey on this. All of my projects before this have been on the smaller scale of things like a blog, or personal archive for content. Tribe was a challenge to build, it taught me a lot, as well as helped expand my capabilities as a developer. I gained a deeper understanding of the backend through authentication, cookies, image uploading, and querying a NoSQL DB like MongoDB. As well as how to thoroughly develop a web app through Ideation -> Wireframing -> UI -> Data modeling & Flow Charts -> Coding.

 Unfortunately, due to personal circumstances, I had to do what was best for me at the time and put a pause on Tribe. Due to working on it almost every day, trying to manage a full-time job, and living on my own for the first time in an apartment; This caused me to experience burnout for the first time and it was not mixing well with my depression. Today I am in a much better headspace and will return to working on the app after about a year hiatus. To keep up to date on my progress or when the alpha variant is ready, follow me on twitter @GayflorAnthony.

‍Update: Tribe is now in its alpha version :)

‍