Dan

A Web Development Professional with experience in entrepreneurship, web applications and digital marketing.

The TwitchToolbox

What is the TwitchToolbox and why did I make it?

The TwitchToolbox is a repository of tools and applications for video game streamers. I originally made the TwitchToolbox to work as a marketing tool for other gaming related projects – specifically to gather a following and gain relevant traffic I could work with. I consider building a very useful tool or small website to ease a pain point to be the ultimate form of inbound marketing. Great examples of this concept are HubSpot’s website grader tool and Snappa’s free stock photo website StockSnap. Both companies built these smaller tools to complement their main paid services, and hopefully gain brand allegiance with their users.

How did I build it?

I built the TwitchToolbox when I was trying to dive deep into Sass and Bootstrap 3 structure. I originally hardcoded all of the pages, which… was not very efficient. So I asked my friend Hai to help out. He built a backend structure off of Django, a framework we had worked together with in the past, which gave us an admin section to manage all new tools. More importantly, it gave us a template system so we only had to optimize 3 main pages: the home page, list page, and detail page.

The original homepage.

A screenshot of the original list page.

A screenshot of an original detail page.

After I had it set, I was focused on a series of other projects for about a year and let it run. Bad move. It hasn’t been updated frequently and I have received many messages asking me to add a tool or update certain features. After moving back to Boston from LA and beginning to look for jobs, I decided I would finally get it out of the way. I saw it as a good opportunity to learn how to build in a JavaScript framework – ReactJS – and, once again, with the guidance of Master Dev Hai, we re-worked the front end with React and the Bootstrap 4 alpha. As of this post, the new code is not live, but it is awesome. Clean, simple, quick, all I could ask for with a rebuild. The hardest part? Figuring out how to use React Router. Still wrapping my head around it.

Oops. I’m on it!

What are some future features I will be adding?

A couple of features are in high demand, both to help me manage the website and to ease user experience concerns.

  • Allow people to directly submit new tools via a web form
  • A tag system to organize the tools a bit better
  • More updates and cleaning of the tools and data
  • Potentially a search bar
  • Actually run the Twitter or switch it over to my personal Twitter

What resources did I use in this project?

  • Hai Nguyen: Code mentor has taught me a ton over the years.
  • Git: Specifically Bitbucket to organize the code.
  • WebStorm: A great IDE from JetBrains.
  • Bootstrap 4: I don’t think it is officially released yet, but the alpha version is so much fun.
  • ReactJS: It has been a little more difficult to learn than Ember and Angular, but I am getting there. Mostly because the ES6 syntax threw me off a little.
  • Django: Hai and I had worked on previous projects with Django so we used it to make the first version of the TwitchToolbox (front and backend).
  • Django REST Framework: Hai also set this up so we could work with JSON files of our data – incredibly helpful while converting the old website and templating from a Django front end to ReactJS.

What are the next steps?

Within the next week I will be working to get the next version live. Then, I will incrementally add some of the smaller features in quicker releases. The first focus is getting new and up-to-date tools into the system in a seamless and easy manner.

Leave a Reply

Your email address will not be published. Required fields are marked *