Takeaways from building and deploying my first machine learning web app!
Learning backend for the first time was a b*tch. I thought I only needed a couple of frameworks and libraries to get the job done in a week but boy was I wrong. Allow me to explain.
Motivation 💡
Before I start, I’d like to give myself a brief introduction. Hi! My name is Evan and I’m a 16-year-old innovator at The Knowledge Society. A couple of months ago, I began my journey in AI from building machine learning models using simple regressors and then calling it a day.
That sh*t was boring. These models didn’t have much interactivity with them. Nobody could play around with my projects. I’d open up a Visual Studio Code window, import my data, build the framework of my classifier, run the code and get a prediction.
Honestly, there was no flair to the project. It seemed lazily put together. You could find endless repositories on GitHub that would look nearly identical to my code. In the real world, your results have to be presentable.
So that's when I had the idea to start deploying my machine learning models over the web.
Building the project 👷
It was about mid-January when I began learning the tools required to build a web app. I was a deer in front of headlights. Clueless and mindlessly watching tutorials on YouTube.
All I knew from needing to build this web app was just some simple HTML + CSS to build a frontend and Python to build a backend. Oh yeah, and learning how to use virtual environments, command prompt and Heroku for deployment.
So after learning Flask (a Python backend framework), in about 2 weeks alongside some refreshers in HTML and CSS, I completed my project — a classic iris flower classifier. But, I wasn’t satisfied with myself. I wasn’t aiming for high enough standards, and as a result, I never deployed the project.
I scrapped it. I knew I could do better. I knew what I had to do but I was scared to do it. I planned to make an entirely new web app project but instead of reliable ol’ HTML and CSS, I would add the React.js framework on top of that. That would mean I had to relearn Javascript.
And so I spent about 2 days learning the basics of React from this amazing resource (and you’ve likely heard of it before):
But beyond those two days, learning how to build the new web app including React took an additional 3 weeks beyond my projected completion date. The trickiest part that took me 2 weeks to figure out was that I needed a client called Axios in order to send HTTP requests between the front end of the web app and the backend of my web app. This was completely different from coding requests in traditional HTML.
Now it was time to build the actual thing, and things were finally falling into place. I really wanted to be intentional with the skills I built while making this project, especially with NLP (Natural Language Processing). After receiving an internship offer at Vocinity https://www.vocinity.com/, I thought it would be a good idea to dabble into NLP, in order to get a feel on what I could work with in the future.
That's why I chose to make a sentiment analysis web app. And to keep things simple, I used the Textblob library.
The TextBlob library includes an API that is linked to pre-trained data, so all you have to input are just phrases and text! Understanding what happens behind TextBlob isn’t the most intuitive, but as a beginner to get your feet wet into NLP, it's a good place to start!
And the web app was done! All was left is to deploy it on Heroku. I first began with the backend — and then I deployed it to Heroku using the git command line (Another thing I picked up on the fly but it was a pain in the ass). I ran into a bit of trouble when I was trying to deploy my front end to Heroku, but it wasn’t until a good friend and colleague of mine at The Knowledge Society, Nicholas Singh, enlightened me to use Vercel.
And so I deployed my front end to Vercel and I gotta say, it's a lot easier to use than Heroku. Looks like I’m using 2 different deployment services for one web app 😂.
Anyways, here are the Github repos of my front end and back end of my web app!
My Takeaways and Failures from this project 🧠
What I learned/gained familiarity with:
- HTML + CSS (refresher)
- Javascript (refresher): Learned OOP (object-oriented programming) for the first time. Took me a while to understand arrow functions.
- React.js: I find it so unique how we can reuse components and create individual .js files for different parts of a site, and then stuff them into pages and then stuff the pages into an index.js or app.js file! React states still confuse me, but I’ll keep on learning. I remember when I used to run my React folder using yarn run, but I learned afterwards that npm is better and faster. I guess npm start for the win? <- Also learned that because I had this yarn file while I was deploying my frontend and something wasn’t working but after I deleted it (because it had no use anyway), my frontend deployed successfully.
- Flask: Gained a basic understanding of how backend works locally, using localhost:3000 as frontend and localhost:5000 as backend.
- Textblob: Still pretty confused about how the sh*t works, but hey, the sh*t works.
- Learning how to use Venvs (Virtual environments): Venvs were mindblowing to use. I remember I used to have a shit ton of version control dilemmas where I needed different versions of scikit-learn or flask and I’d keep installing different versions locally. As a result, my environment paths were f*cked up. So… I wiped them all out and started using venvs! Shoutout to another one of my colleagues, Aleem Rehmtulla, for guiding me along the way with venvs!
- Command prompt (Windows): That one thing on my computer that I’d always gaze at wondering what purpose it had… and finally understanding what it did. That was the best feeling. Learning how to use pip, npm, moving in and out of directories and installing dependencies, activating venvs and starting servers. I remember being completely clueless on how to use the Windows CMD but the secret sauce is this: don’t bother watching Youtube tutorials on this. Just keep searching up errors and eventually you’ll figure out how to use the command prompt by noticing patterns!
- Heroku: A b*tch to set up. Takes longer to use than Vercel but hey, 1000 free interactive hours a month plus 100 free deployments? Count me in.
- Vercel: I love this. Super easy to set up. Not sure about the limits of Vercel tho…somebody please let me know!
- Git command line: Ahhhhh, so this is how I push my local files on my computer onto Github without using Github desktop…
Next Steps:
Here are some things I would like to learn sometime within the next few months:
- Next.js (Made by Vercel)
- Tensorflow & Keras (Reviewing)
- PyTorch (Less likely than Tensorflow but might need it for autonomous vehicles)
- Rasa NLU (A pretty new NLP framework)
- Electron.js (Making desktop apps 👀)
Again, thank you for reading this article! It means a lot to me. There’s no way you really sat through reading this entire article… unless? Anyways, I’m completely open to feedback such as what I could do to improve my code or if I poorly explained anything — I’ll be happy to learn and improve!
Hi! 👋 I’m Evan, a 16-year old that’s interested in machine learning and positively impacting communities of scale!
If you enjoyed the article, the clap button is right below! Trust me, it’ll only take a sliver of time to click it once… and a few slivers of time for a few claps 😄. Connect with me on LinkedIn or shoot me an email if you have any questions!
My LinkedIn:
My email: evanlin416@gmail.com
