{"id":16700647,"url":"https://github.com/bolajiayodeji/deploy-ml-web-workshop","last_synced_at":"2025-11-10T09:04:19.132Z","repository":{"id":197338996,"uuid":"695051833","full_name":"BolajiAyodeji/deploy-ml-web-workshop","owner":"BolajiAyodeji","description":"In this workshop, you will learn how to build a machine learning model using Python/Scikit-Learn, turn the model into an API using Python/Flask, test the API, build web applications using HTML/CSS/JavaScript/Nextjs, and deploy it to the web for global usage by end-users.","archived":false,"fork":false,"pushed_at":"2025-06-18T08:09:11.000Z","size":36388,"stargazers_count":23,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-18T09:23:22.050Z","etag":null,"topics":["api","flask","flyio","javascript","machine-learning","nextjs","postman","python","reactjs","serverless","workshop"],"latest_commit_sha":null,"homepage":"https://mbpti-flask-app.fly.dev","language":"Jupyter Notebook","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BolajiAyodeji.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"BolajiAyodeji","patreon":"bolajiayodeji"}},"created_at":"2023-09-22T08:48:01.000Z","updated_at":"2025-06-18T08:08:07.000Z","dependencies_parsed_at":"2023-10-11T19:02:59.320Z","dependency_job_id":"17105335-93b8-4c2d-b5b9-8583d8a0caaa","html_url":"https://github.com/BolajiAyodeji/deploy-ml-web-workshop","commit_stats":null,"previous_names":["bolajiayodeji/deploy-ml-web-workshop"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BolajiAyodeji/deploy-ml-web-workshop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BolajiAyodeji%2Fdeploy-ml-web-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BolajiAyodeji%2Fdeploy-ml-web-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BolajiAyodeji%2Fdeploy-ml-web-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BolajiAyodeji%2Fdeploy-ml-web-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BolajiAyodeji","download_url":"https://codeload.github.com/BolajiAyodeji/deploy-ml-web-workshop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BolajiAyodeji%2Fdeploy-ml-web-workshop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":283652069,"owners_count":26871286,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-10T02:00:06.292Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","flask","flyio","javascript","machine-learning","nextjs","postman","python","reactjs","serverless","workshop"],"created_at":"2024-10-12T18:11:33.973Z","updated_at":"2025-11-10T09:04:19.097Z","avatar_url":"https://github.com/BolajiAyodeji.png","language":"Jupyter Notebook","funding_links":["https://github.com/sponsors/BolajiAyodeji","https://patreon.com/bolajiayodeji"],"categories":[],"sub_categories":[],"readme":"# Deploying Machine Learning Models to the Web\n\nOne essential and last phase of the CRISP-DM data framework is deployment. The key focus in this phase is the usability of the developed model by intended users or customers. Depending on the type of solution and use case, this can involve deploying and integrating the model on any medium like the web, a mobile application, a hardware-embedded system, etc. While this might \"sound easy,” many beginner ML engineers find it daunting to deploy their projects on the web for their intended users to test and for their solutions to solve their users' problems.\n\nIn this workshop, Bolaji will introduce you to machine learning model deployment by showing you the steps and processes involved with turning a machine learning model into an API with Python and Flask,  testing the API with Postman, building a web application, and deploying it to the cloud for global usage. We would also discuss several other alternative Python/JavaScript frameworks and tools to consider.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n![](./assets/qr.png)\n\n\u003c/div\u003e\n\n---\n\n## Table of Contents\n\n- [🎧 Overview](#-overview)\n- [🛠 Prerequisites and Installation Guide](#-prerequisites-and-installation-guide)\n- [📚 Workshop Lessons](#-workshop-lessons)\n- [🚀 What's Next?](#-whats-next)\n- [📑 Further Resources](#-further-resources)\n- [👩🏽‍💻 Contributors Guide](#-contributors-guide)\n- [⚖️ License](#️-license)\n\n---\n\nThis repository contains the workshop materials, lesson notes, machine learning model notebooks, serilized models, backend API/web application code, and links to further resources. You can follow the workshop lessons and build the project yourself or use the materials to learn at your own pace.\n\nIn this workshop, we will build the following:\n\n- A minimal machine learning model that predicts the personality type of an individual using Python, Scikit-learn, and other libraries ([`/model`](./model)).\n- A backend and API for the model using Python and Flask ([`/app/flask-api`](./app/flask-api)).\n- A web application that consumes the model/API using HTML, CSS, JavaScript, and Flask ([`/app/flask-app`](./app/flask-app)).\n- A web application and API that consumes the model/API using HTML, CSS, JavaScript, Nextjs, and Flask ([`/app/nextjs-flask-app`](./app/nextjs-flask-app)).\n\nYou can test the deployed applications here:\n\n- `flask-api`: \u003chttps://mbpti-flask-api.fly.dev\u003e.\n- `flask-app`: \u003chttps://mbpti-flask-app.fly.dev\u003e.\n\n![](./assets/model-notebook.png)\n![](./assets/postman-test.png)\n![](./assets/app-home.png)\n![](./assets/app-result.png)\n\n---\n\n## 🎧 Overview\n\n**Workshop duration**: ~three (3) hours.\n\nAt the end of this workshop; you should be able to:\n\n- Explain what machine learning and a machine learning model are to your friends and family.\n- Understand how the CRISP-DM data framework works.\n- Understand the fundamentals of building a machine learning model using the Python programming language.\n- Understand how to serialize (export/import) a machine learning model.\n- Understand how to turn a machine learning model into an API using the Flask Python framework.\n- Understand how to build a web application using the Flask Python framework.\n- Understand how to build a web application using the Nextjs JavaScript framework.\n- Understand how to deploy a Python/Flask application to the cloud using Fly.\n- Understand how to deploy a Nextjs/Flask application to the cloud using Vercel.\n\n---\n\nThis workshop has been presented at the following events:\n\n- [React Alicante 2023](https://reactalicante.es/#schedule?utm_source=ba-deploy-ml-web-workshop) in Alicante, Spain 🇪🇸.\n- Your next event or conference? You can invite me by [sending a message](https://twitter.com/iambolajiayo).\n\n## 🛠 Prerequisites and Installation Guide\n\nGenerally, you need the following:\n\n- A curious mind and desire to learn.\n- An understanding of or familiarity with the first five phases of the CRISP-DM data-mining framework.\n- A working laptop running on any operating system (Windows, Linux, or macOS).\n- Ability to navigate through the command-line interface (CLI).\n- Some existing machine learning model development knowledge (or an interest at least).\n- Some basic understanding of the Python programming language.\n- Some basic understanding of the JavaScript programming language.\n- Experience using Reactjs and Nextjs frameworks.\n\nTo make the workshop a smooth process, we will use [Google Colab](https://colab.google?utm_source=ba-deploy-ml-web-workshop) for the machine learning model development. This will enable us to run a hosted Jupyter Notebook on the cloud (with GPU and TPU computing resources) and avoid issues with installing all the Python packages locally (the future is cloud!). All you have to do is create a free Google account if you don't have one already and open the Notebook in Google Colab.\n\nBut if you prefer local (I strongly advise against this; at least for this workshop), you should install [Anancoda](https://anaconda.com/download?utm_source=ba-deploy-ml-web-workshop) to use Jupyter Notebook on your local computer. You will need to install and import all the required packages yourself too and resolve any conflicts that might arise.\n\n\u003e [!NOTE]\n\u003e\n\u003e [Jupyter Notebooks](https://jupyter.org?utm_source=ba-deploy-ml-web-workshop) allow you to combine executable code and rich text in a single document, along with images, HTML, LaTeX, and more.\n\n---\n\nYou should have the following software and packages installed on your computer. Kindly follow the guide in each toggle to install them.\n\n\u003cdetails\u003e\n\n\u003csummary\u003eGit and GitHub\u003c/summary\u003e\n\u003cbr /\u003e\n\nWe will install/use the following packages:\n\n- [Git](https://github.com/pallets/flask?utm_source=ba-deploy-ml-web-workshop): a free and open-sourced distributed version control system.\n- [GitHub](https://github.com?utm_source=ba-deploy-ml-web-workshop): a code hosting platform for version control and collaboration.\n\nDownload and install Git from [this website](https://git-scm.com/downloads?utm_source=ba-deploy-ml-web-workshop) for all operating systems or follow this [installation guide](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git?utm_source=ba-deploy-ml-web-workshop).\n\nOnce installed successfully, confirm the version using the command:\n\n```bash\ngit --version\n```\n\n\u003cbr /\u003e\n\nNext, create a [free GitHub account](https://github.com/signup?utm_source=ba-deploy-ml-web-workshop) if you don't have one already.\n\n\u003e [!NOTE]\n\u003e\n\u003e Bonus: If you're a student, you should check out the [GitHub Student Developer Pack](https://education.github.com/pack?utm_source=ba-deploy-ml-web-workshop), which gives students free access to the best developer tools (paid tools/services/courses for free) in one place so they can learn by doing.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003ePostman Desktop App or VSCode Extension\u003c/summary\u003e\n\u003cbr /\u003e\n\nWe will install any of the following:\n\n- [Postman Desktop App](https://github.com/pallets/flask?utm_source=ba-deploy-ml-web-workshop): a desktop that allows you use Postman to send API requests.\n- [Postman VSCode Extension](https://github.com?utm_source=ba-deploy-ml-web-workshop): a VSCode extension that allows you use Postman to send API requests from within VS Code.\n\nDownload and install the Postman Desktop Client or VSCode Extension from [this website](https://www.postman.com/downloads?utm_source=ba-deploy-ml-web-workshop) for all operating systems.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003ePython and PIP\u003c/summary\u003e\n\u003cbr /\u003e\n\nWe will install the following packages:\n\n- [Python](https://python.org?utm_source=ba-deploy-ml-web-workshop): a general-purpose programming language that lets you work quickly and integrate systems more effectively.\n- [PIP](https://pypi.org/project/pip?utm_source=ba-deploy-ml-web-workshop): a package manager for installing Python packages or modules.\n\nDownload and install Python 3 (`\u003e3.10.12`) from [this website](https://python.org/downloads?utm_source=ba-deploy-ml-web-workshop) for all operating systems (this will come with PIP in-built).\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e Please specifically download and install a version `3.10.12` or higher (I'm using `3.11.5`). Google Colab will install version `3.10.12` which we will use to develope a machine learning model and anything less on your local machine will result in errors when using the serilized model.\n\nOnce installed successfully, confirm the version using the command:\n\n```bash\npython3 --version\n```\n\nIf Python is installed correctly, you should have PIP installed. If it isn't, follow the steps in [this guide](https://pip.pypa.io/en/stable/installation?utm_source=ba-deploy-ml-web-workshop) to install PIP.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eOther Python Packages\u003c/summary\u003e\n\u003cbr /\u003e\n\nWe will install the following packages:\n\n- [Python Dotenv](https://pypi.org/project/python-dotenv?utm_source=ba-deploy-ml-web-workshop): a package that reads key-value pairs from a `.env` file and can set them as environment variables.\n- [Scikit-Learn](https://scikit-learn.org/stable?utm_source=ba-deploy-ml-web-workshop): a free software machine learning library for the Python programming language, including various classification, regression, and clustering algorithms.\n- [Flask](https://github.com/pallets/flask?utm_source=ba-deploy-ml-web-workshop): a lightweight Python micro framework for building web applications.\n- [Gunicorn](https://gunicorn.org?utm_source=ba-deploy-ml-web-workshop): a Python WSGI HTTP Server for UNIX.\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e Eventually, we will install the above mentioned libraries in a [virtual environment](https://packaging.python.org/en/latest/guides/installing-using-pip-and-virtual-environments/#creating-a-virtual-environment?utm_source=ba-deploy-ml-web-workshop) to ensure we use independent groups of Python libraries for each project. This is a recommended practice when building Python aplications in both development and production.\n\nIn the project directory, create the environment with the command `python3 -m venv .venv` and activate the envirnment with the command `source .venv/bin/activate`.\n\nNow, install all of the packages using the command below:\n\n```bash\npip3 install python-dotenv scikit-learn flask gunicorn\n```\n\n\u003cbr /\u003e\n\nOnce installed successfully, confirm the version using the command:\n\n```bash\npip3 show python-dotenv\n\npip3 show scikit-learn\n\npip3 show flask\n\npip3 show gunicorn\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eNodejs and NPM\u003c/summary\u003e\n\u003cbr /\u003e\n\nWe will install the following packages:\n\n- [Nodejs](https://nodejs.org?utm_source=ba-deploy-ml-web-workshop): an open-source, cross-platform JavaScript runtime environment.\n- [NPM](https://npmjs.com?utm_source=ba-deploy-ml-web-workshop): a package manager for installing JavaSript packages or modules.\n\nDownload and install Nodejs and NPM from [this website](https://nodejs.org/en/download?utm_source=ba-deploy-ml-web-workshop) for all operating systems or follow this [installation guide](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm?utm_source=ba-deploy-ml-web-workshop).\n\nOnce installed successfully, confirm the version using the command:\n\n```bash\nnode --version\n\nnpm --version\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eReactjs and Nextjs\u003c/summary\u003e\n\u003cbr /\u003e\n\nWe will install the following packages:\n\n- [Reactjs](https://react.dev?utm_source=ba-deploy-ml-web-workshop): an open-source web and native JavaScript library for building user interfaces.\n- [Nextjs](https://nextjs.org?utm_source=ba-deploy-ml-web-workshop): an open-source React web development framework.\n\nAutomatically create a project with the latest version of Reactjs18 and Nextjs13 using the `create-next-app` command below:\n\n```bash\nnpx create-next-app@latest\n```\n\nConsider reading Reactjs's [installation guide](https://react.dev/learn/installation?utm_source=ba-deploy-ml-web-workshop) to learn more.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eFlyctl and Vercel\u003c/summary\u003e\n\u003cbr /\u003e\n\nWe will install the following packages:\n\n- [Flyctl](https://fly.io/docs/hands-on/install-flyctl?utm_source=ba-deploy-ml-web-workshop): the command-line utility that lets you work on Fly from your terminal locally.\n- [Vercel](https://vercel.com?utm_source=ba-deploy-ml-web-workshop): a frontend cloud platform for deploying web apps.\n\nSign up for a free account on [Fly.io](https://fly.io/app/sign-up) and [Vercel](https://vercel.com/signup?utm_source=ba-deploy-ml-web-workshop) if you haven't yet. Next, read [this guide](https://fly.io/docs/hands-on/install-flyctl) to install `flyctl` for any operating system.\n\n\u003c/details\u003e\n\n## 📚 Workshop Lessons\n\n1. [Introduction to Machine Learning](./lessons/01.md)\n2. [Building a ML Model with Python](./lessons/02.md)\n3. [Building an API for the ML Model](./lessons/03.md)\n4. [Building a Web Application for the API](./lessons/04.md)\n5. [Overview of Alternative Frameworks](./lessons/05.md)\n6. [Building a Nextjs Web Application for the ML Model](./lessons/06.md)\n7. [Deploying the API and Web Application to the Cloud](./lessons/07.md)\n8. Bonus: Building Web AI Applications with Pre-trained Models (LLMs) and Vercel AI SDK (TBA)\n\n## 🚀 What's Next?\n\n- Challenge: as discussed in [lesson seven](./lessons/07.md), update the `flask-api` app to support CORS, change how we get the request data, deploy to Fly again, and then use the live API directly in the Nextjs app.\n- Build something nice for fun to test all you've learned, open-source the code, and write about it if you want.\n- Here's a [list of different projects](https://github.com/BolajiAyodeji/deploy-ml-web-workshop/discussions/categories/projects) built by participants of this workshop. If you've built something nice, feel free to [create a new discussion](https://github.com/BolajiAyodeji/deploy-ml-web-workshop/discussions/new?category=projects) and talk about your project.\n- Tag me on X (Twitter) [@iambolajiayo](https://twitter.com/iambolajiayo) when you share your project.\n- Open an issue in this repository or DM me [@iambolajiayo](https://twitter.com/iambolajiayo) if you have any questions or need help with anything.\n\n## 📑 Further Resources\n\n- [My Weekly Newsletter](https://bawd.bolajiayodeji.com?utm_source=ba-deploy-ml-web-workshop)\n- [Myers–Briggs Type Indicator](https://en.wikipedia.org/wiki/Myers%E2%80%93Briggs_Type_Indicator?utm_source=ba-deploy-ml-web-workshop)\n- [How to Deploy a Machine Learning Model to the Web](https://blog.bolajiayodeji.com/how-to-deploy-a-machine-learning-model-to-the-web?utm_source=ba-deploy-ml-web-workshop)\n- [Google's Machine Learning Crash Course](https://developers.google.com/machine-learning/crash-course?utm_source=ba-deploy-ml-web-workshop)\n- [Google's Machine Learning Glossary](https://developers.google.com/machine-learning/glossary?utm_source=ba-deploy-ml-web-workshop)\n- [Reading and Writing Files in Python](https://docs.python.org/3/tutorial/inputoutput.html#reading-and-writing-files?utm_source=ba-deploy-ml-web-workshop)\n- [Flask Quickstart Guide](https://flask.palletsprojects.com/en/2.3.x/quickstart?utm_source=ba-deploy-ml-web-workshop)\n- [Handling Flask Application Errors](https://flask.palletsprojects.com/en/2.3.x/errorhandling?utm_source=ba-deploy-ml-web-workshop)\n- [List of HTTP status codes](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes?utm_source=ba-deploy-ml-web-workshop)\n- [Nextjs Forms and Mutations](https://nextjs.org/docs/pages/building-your-application/data-fetching/forms-and-mutations?utm_source=ba-deploy-ml-web-workshop)\n- [Using the Python Runtime with Serverless Functions](https://vercel.com/docs/functions/serverless-functions/runtimes/python?utm_source=ba-deploy-ml-web-workshop)\n- [Flask CORS Extension](https://flask-cors.readthedocs.io/en/latest/api.html?utm_source=ba-deploy-ml-web-workshop)\n- [Builders and Fly](https://fly.io/docs/reference/builders?utm_source=ba-deploy-ml-web-workshop)\n\n## 👩🏽‍💻 Contributors Guide\n\n1. Fork [this repository](https://github.com/BolajiAyodeji/deploy-ml-web-workshop) (learn how to do this [here](https://help.github.com/articles/fork-a-repo)).\n\n2. Clone the forked repository like so:\n\n```bash\ngit clone https://github.com/\u003cyour username\u003e/deploy-ml-web-workshop.git \u0026\u0026 cd deploy-ml-web-workshop\n```\n\n3. Make your changes and create a pull request ([learn how to do this](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request)).\n\n4. I will attend to your pull request, provide some feedback, request some changes, or eventually merge the PR!\n\n## ⚖️ License\n\nThe content of this repository \u0026copy; 2023 by [Bolaji Ayodeji](https://bolajiayodeji.com) is published under the [Creative Commons Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0) license and the underlying code examples are licensed under the [MIT](LICENSE) license.\n\n\u003cp xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:dct=\"http://purl.org/dc/terms/\"\u003e\u003ca href=\"https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1\" target=\"_blank\" rel=\"license noopener noreferrer\" style=\"display:inline-block;\"\u003e\u003cimg style=\"height:22px!important;margin-left:3px;vertical-align:text-bottom;\" src=\"https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1\" alt=\"\"\u003e\u003cimg style=\"height:22px!important;margin-left:3px;vertical-align:text-bottom;\" src=\"https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1\" alt=\"\"\u003e\u003cimg style=\"height:22px!important;margin-left:3px;vertical-align:text-bottom;\" src=\"https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1\" alt=\"\"\u003e\u003c/a\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbolajiayodeji%2Fdeploy-ml-web-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbolajiayodeji%2Fdeploy-ml-web-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbolajiayodeji%2Fdeploy-ml-web-workshop/lists"}