Machine Learning Model Deployment with Flask, React & NodeJS

Explore the basics of front end development by learning why NodeJS is used, why React is a great library, and how to start and review your first React project files.

Learn how Node.js runs JavaScript outside the browser with the V8 engine to build fast, scalable web apps, and how React and Create React App use npm.

Create a new React component in user.js, export it, and import it into app.js to render it. Understand default and named exports and the basic import-export workflow.

Learn how to manage data with React states using useState, and build a live counter that updates on button clicks without reloading the page.

learn to save and load neural network weights with PyTorch, using state_dict and torch.save, test net in Visual Studio Code, and prepare weights for deployment to front-end and back-end apps.

Build a flask api around your data science model by loading a weights pickle file and rendering index.html, then handle post and get requests to return predictions.

Build and deploy a diabetes prediction app by transforming form input into a pandas dataframe, using predict_proba, and formatting results in Flask, with debugging and template setup.

Explore popular build tools for front-end development, including Webpack, Rollup, esbuild, Snowpack, Vite, and Parcel; compare pros, cons, learning curves, and use cases for production and libraries.

Deploy your model to Heroku as an API by logging in, creating an app, and pushing with git; enable Flask CORS to connect with the front end.

Learn how to test your RDS model with Postman by sending get requests to the predict endpoint, verify 200 responses, and validate data flow.

Develop the React front end for the diabetes prediction app by building a form that sends inputs to the Flask API and displays results, delivering a live Heroku deployment.

Connect the front end to a Flask backend using a fetch post request with form data for the diabetes prediction model, and display the result under the form.

Enhance the form user experience by adding a loading state that disables the submit button, shows dynamic text, a clear prediction option, and required fields with basic styling updates.

Deploy the frontend to Heroku using GitHub deployment, configure the app, connect to the Flask backend, and verify by submitting the form to confirm the live app.

Deploy your React front end to GitHub Pages by building a static build and publishing via gh-pages. Ensure GitHub Pages serve static files only, so back-end apps cannot be deployed.

Deploy your frontend with Netlify by connecting your GitHub repository, configuring build and publish options, and securing HTTPS for a production-ready site.

Deploy your frontend with AWS Amplify by connecting a GitHub repo, configuring build settings and environment variables, and managing the deployment from the Amplify dashboard.