Tree House: Easy and automated content sharing

Adrian Felipe Vides Jimenez
6 min readJun 24, 2021

Tree House is a Patreon implementation for Immigo that solves the need for independent teachers to keep track of who of their students are up to date with their payment.

Education is no longer just as we knew before. Teachers, tutors, influencers want to change the world by sharing experiences without boundaries through the Internet. But, they are struggling with a lot of unnecessary jobs; and teachers just want to teach!
And that is what we along with Immigo are doing, building an app where teachers have access to all the necessary tools, in a practical way.

How we came up with this?

I graduated from high school at E.N.S.D.B. This school allows, from a critical pedagogical reflection, the development of research practices in both urban and rural contexts, that correspond with the teachers' formation process to contribute to the educational quality, from the composition of contextualized proposals required by both local and regional community.
There I helped to fight against illiteracy through classes given to certain less favored populations, such as elderly or senior citizens and pregnant teenagers, that were not able to finish their education.

Also, our team has experienced what taking online classes is. And we have noticed that having several applications sometimes gets annoying since they could make the workflow decrease.

Having in mind that, we as a team knew that working on this project would be encouraging, giving back to education a little bit of what it had offered to us. Also, we were excited about reinforce and learn a new tech stack besides having the experience of working with an international company, and develop our skills.

How does Tree House work?

First, let’s define what Patreon is:
Patreon is a platform that allows people to support creative work via monthly memberships.
Patreon helps content creators earn extra income by providing rewards and perks to their subscribers.

Patreon allows the content creators to create different campaigns to which the students can subscribe, E.g. Basic campaign: You receive one class per week, Advanced campaign: You receive three classes per week… and so on.

Keeping in mind that, the Teacher will upload to our platform his content and select which Patreon campaign it belongs to; besides students will access the content according to their type of subscription

Data Flow

Tech Stack

Tech-Architecture

The technologies we used are:

In the Front-end we decided to use:

  • Typescript / React: TypeScript is an open-source language that builds on JavaScript, one of the world’s most used tools, by adding static type definitions. Types provide a way to describe the shape of an object, providing better documentation, and allowing TypeScript to validate that your code is working correctly.
    And also React, which is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

In the Back-end we decided to use:

  • Node: Node.js is an open-source, cross-platform runtime environment for developing server-side and networking applications. Node.js applications are written in JavaScript and can be run within the Node.js runtime on OS X, Microsoft Windows, and Linux. Node.js also provides a rich library of various JavaScript modules which simplifies the development of web applications using Node.js to a great extent.

And for Data management and deployment:

  • Firebase Firestore/Database: Firebase, the whole platform is a backend-as-a-Service (BAAS) solution both for mobile and web-based applications that include services for building, testing, and managing apps.
    Firestore is a NoSQL document database that lets you easily store, sync, and query data for your mobile and web apps — a global scale.

We opted for those technologies because of the CTO recommendation, he has experience using those, so the maintenance of the base code will be nicer in the future.

Features:

  • Upload content: The instructor will be able to upload, update and delete content
  • Assign campaign: When uploading or updating content, the instructor will be asked to which type of campaign the content is for
  • Authenticate: You will be able to Log In with your Patreon account, and depending on that, you will either access content (student side) or manage your content (Instructor side)

Into the unknown: Technical challenges we faced building the application

We decided to use Patreon because Immigo already had a customer that uses this platform. But we were not totally concern about how it could be fully implemented.
So at the moment of researching about Patreons’ API, we encountered that there is not so much documentation as we thought it would be. Also, in what we found, most of the examples and documentation were written in PHP programming language, despite the technology we were using was NodeJs.

Thus, we decided to create a Patreon account with different campaigns, then with another account subscribe to one of those campaigns. That was made with the purpose to get to know better how the instructor's side was, how a creator creates his different campaigns, and how he can manage his campaigns and his supporters.
And along with the previous aspect, we started to make a lot of local tests to understand Patreon and Patreon’s API behavior, and how we could implement it.

Besides, we found the resources to implement the drag and drop zone with the respective progress bar. However, understanding it on a deep level was challenging. What we wanted was to fully understand it, so we could personalize it and also add the important features that the product needs, according to the user’s needs. At the end what we were looking for, is to give the users (Teacher, content creator, etc) the opportunity to upload the corresponding files, and also let them decide, for each file, which campaign that file belongs to. That selection will make the job of deciding who will have access to the content and who will not. As mentioned before, we found the documentation needed, but we wanted to be careful to not overdevelop, which means to just implement the things we were going to use, not more than that.

Achievements

Throughout all process, we learned a lot, not only technical aspects.

  • We had some interviews with teachers, asking them what issues were they facing, but not as simple as literally doing that. i.e. If you are asked today, what problems do you have? You could say that you do not own a Ferrari… And well, that actually is not a problem… We went from knowing them, why they decided to teach in that way, how long they had been doing that, how they were managing their time, etc.
  • Real company workflow: As we did not just code, but went through a research and approval period. Where we identified the problem, thought about possible solutions, and took into account different risks we could face, and then how to solve them.
  • Teamwork: The most important tool we had was each of us. We discussed how was better to build this product, taking into account everyone’s opinion, for succeeding.
  • Scrum methodology: We used a Kanban Board to always measure the progress each of us was doing.
  • English: As Immigo is an international company, we developed and gain confidence in our English skills.

Know more about us!

Andrés Gonzalez: Frontend developer / @andresgfranco
Andres Campo: Full-Stack developer / @andrescampo98
Adrian Vides: Backend developer / @adrianvides56

And we worked along with:

Ryan Jeon: Immigo’s CTO / @yejunjeon

--

--

Adrian Felipe Vides Jimenez

I'm a Software Developer passionate by programming, videogames and music. Nowadays studying at Holberton School