Tree House: How we got involved in the online education revolution
By: Andrés González, Andrés Campo, and Adrian Vides for Holberton School — Colombia cohort 13 final project.
Education is no longer the thing we knew before. Teachers, educators, influencers, creative people want to change the world by sharing each other experiences without boundaries. But they are struggling with a lot of unnecessary jobs. Teachers, just want to teach. That’s why we created “Tree House”, a place where teachers or educational content creators can share their knowledge easily and automatically. No more boring spreadsheets and manual jobs to keep track of their students subscriptions. We aimed to make teaching and content sharing easy, and automated for them.
This is a non-commercial web development project built for the final project of the foundation's program at Holberton School — Colombia from cohort 13. We are Andres González(Front end developer), Andres Campo(Full-Stack Developer), and Adrian Vides(Back end developer) and during April — June of 2021 we were working under the guidance of Ryan Jeon(Immigo CTO).
We were motivated to work on this because as remote students we have experienced what is taking online classes, and the fact of having several applications sometimes gets annoying since they can make the workflow decrease. Our willingness was to reinforce and learn new tech stack besides developing new skills while advancing in this process.
What is this all about?
Tree House is a Patreon implementation for Immigo that will solve the need of online instructors to help them keep track of who of their students are up to date with their payment. Focused mostly on those instructors who are using Patreon as an income-generator from generating content for their students.
Technologies overview:
Front-end:
- 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. also with React being 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”.
Back-end:
- Node.js: We decided to use Node.js that 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.
Data management:
- Firebase Firestore/Database: we decided to use Firebase since 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.
On the other side Firestore is a NoSQL document database that lets you easily store, sync, and query data for your mobile and web apps — a global scale.
This technical approach was also suggested by the CTO having in mind his experience with these technologies and also the future maintenance of the base code.
Features(focused on instructors needs):
Authenticate: Log in with the instructor's Patreon account. With Patreon API, we will track who is up to date with instructors' campaign payments.
Upload: The instructors will upload content(scripts, audios, videos, etc.) by drag and drop them.
Assign: with one-click instructors will assign which content corresponds to each campaign and voilà: each student will have automatic access to the content according to their membership.
How we overcame the unknowns
We faced two main blockers when approaching the code:
- Patreon API documentation: it is an API that does not have so much information or documentation on how a developer can connect to the API, and how to get the users of the campaign. The technology we are using is React and Node.js and all this information are in PHP. We start making a lot of local tests to realize it’s behavior, also we had to get deeper into several old forums about it.
- We found the resources to implement the drag and drop zone with the progress bar. However, understanding it on a deep level has been challenging. We want to fully understand it so we can personalize and add the important features the product needs according to the user's needs. In the end, what we are looking for is to give the user the opportunity to upload the corresponding files for each lesson he/she makes and also decide for each file which campaign it belongs to. This selection will make the job to decide who will have access to the content and who won’t. As mentioned before in this paragraph, we already found the documentation but we want to be careful not to overdevelop, meaning to just implement the things we are going to use, not more than that.
Happy ending :)
We would love to specify all the learnings we had throughout this experience:
- Learn new technologies in a short amount of time.
- Doing user research before jumping into the code! understanding the user is one of the most important stages of the process.
- Engineering workflow. It was our first time working with an official company, so we had to implement good practices by using git and GitHub in a correct way.
- Alignment: by doing weekly standups we could align on what would be the priorities.
- Teamwork: the most important thing. We could give new ideas from each corner we were working at. Every opinion was crucial when building and focusing on what was the important things.
- English practicing: we gained confidence in our English speaking. We know that this skill is (sometimes) more important than coding per se.
Get to know us better!
