DEV Community: Osiris8

[Boost]

Osiris8 — Sat, 09 Aug 2025 06:46:30 +0000

Osiris8

Aug 8 '25

Build and Deploy a Fullstack AI App with Flask, React and OpenAI GPT-OSS - Milo AI

Comments

1 min read

Build and Deploy a Fullstack AI App with Flask, React and OpenAI GPT-OSS - Milo AI

Osiris8 — Fri, 08 Aug 2025 23:27:23 +0000

🧠 Milo – Fullstack AI Assistant App

Milo is a fullstack AI assistant project built with Flask (backend) and React (frontend), powered by Groq Cloud and open-source AI models like GPT-OSS, Mistral, Gemma, LLaMA, and DeepSeek.

The goal is to create a secure, modular and production-ready AI app that you can use, extend, or deploy for your own needs.

🔥 Demo

Frontend live on Vercel: https://frontend-milo.vercel.app/

Frontend Code: https://github.com/Osiris8/frontend-milo

Backend live: https://backend-milo.onrender.com

Backend Code: https://github.com/Osiris8/backend-milo

📦 Technologies Used

🖥️ Backend (Part 1)

Flask (Python)
JWT Authentication
Mistral AI (via Groq Cloud)
Groq Cloud API
Postman (for API testing)
Render (for deployment)

💻 Frontend (Part 2)

React
Tailwind CSS
Axios
JWT Auth integration
Vercel (for deployment)

✨ Features

🔐 Secure authentication system (register, login, JWT token)
🧠 Prompt-based AI assistant using Groq Cloud APIs
📤 Create / read / update / delete prompts (CRUD)
💬 Display AI responses dynamically in the UI
🚀 Deployed with Vercel and connected to live AI APIs deployed on Render

📺 More details

https://www.youtube.com/watch?v=WGZGNCanR08

Build and Deploy a Fullstack AI App with Flask, React, JWT, Neon Database, Mistral & Groq Cloud – Project Milo Part 1 (Backend)

Osiris8 — Sat, 05 Jul 2025 14:43:23 +0000

In this video, we’re building Milo, a fullstack AI assistant app using Flask, React, JWT authentication, and powerful Groq Cloud AI models like Mistral, Gemma, LLaMA, and more.

💻 On the backend, we’ll create APIs with Flask, secure them with JWT, and connect to different AI models using Groq Cloud.

🚀 Whether you want to integrate your own AI assistant or explore Mistral models in a real project, this video is for you.

Technologies used:

Flask (Python)
React (in upcoming Part 2)
JWT Authentication
Mistral AI
Groq Cloud
Postman

Chapter

Hello World with Flask
Models Concepts: Create Models (User & Prompt)
Routes Concepts: Auth Route & Test with Postman
Use Mistral AI: Create, Read, Update, Delete Prompts
OpenAI vs Groq AI API Overview
First Deployment with Mistral AI
Use Other AI Models via Groq Cloud
Install Groq Cloud, Create Routes & Test with Postman
Second Deployment & Test Groq Models (Gemma, LLaMA, Mistral, DeepSeek...)

🧠 By the end of this video, you’ll be able to:

Build a secure backend with Flask and JWT
Interact with multiple AI models via Groq Cloud
Deploy and test your app with real prompts

Ressources

Mistral API: https://console.mistral.ai/home
Groq Cloud: https://console.groq.com/home
Neon Database: https://neon.com/
Deployment: https://render.com/

[Boost]

Osiris8 — Wed, 02 Jul 2025 08:00:14 +0000

Build and Deploy a Fullstack AI App with Flask, React, JWT, Neon Database, Mistral & Groq Cloud – Project Milo Part 1 (Backend)

Osiris8 ・ Jul 2

#flask #postgressql #python #react

[Boost]

Osiris8 — Mon, 28 Apr 2025 06:07:50 +0000

Osiris8

Apr 23 '25

Build and Deploy a Full Backend API with Next.js, Drizzle ORM and Neon (PostgreSQL) | Todofy App

#nextjs #typescript #neonchallenge #postgres

Comments 3

1 min read

[Boost]

Osiris8 — Sat, 26 Apr 2025 05:56:10 +0000

Osiris8

Apr 23 '25

Build and Deploy a Full Backend API with Next.js, Drizzle ORM and Neon (PostgreSQL) | Todofy App

#nextjs #typescript #neonchallenge #postgres

Comments 3

1 min read

[Boost]

Osiris8 — Thu, 24 Apr 2025 06:16:44 +0000

Osiris8

Apr 23 '25

Build and Deploy a Full Backend API with Next.js, Drizzle ORM and Neon (PostgreSQL) | Todofy App

#nextjs #typescript #neonchallenge #postgres

Comments 3

1 min read

Build and Deploy a Full Backend API with Next.js, Drizzle ORM and Neon (PostgreSQL) | Todofy App

Osiris8 — Wed, 23 Apr 2025 07:41:41 +0000

Build a full-featured Backend API with Next.js App Router, Drizzle ORM, and Neon database ! In this step-by-step project, you’ll create a complete CRUD API for a Todo app, test it with Postman, write clean API documentation using Tailwind CSS and DaisyUI, and deploy everything on Vercel.

Perfect for beginners and intermediate devs who want to learn backend development using modern tools !

🔗 Watch Video: https://youtu.be/_JIx9qX6g9k?si=jtS2QiY8oYfPzO0J

📚 What You’ll Learn in This Video:

Create the Todo Schema with Drizzle ORM
Set Up Drizzle Config and Generate Models on Neon Database
Create and Read Todo Items – API Routes (POST & GET)
Update and Delete Todo Items – API Routes (PUT & DELETE)
Add Toggle Feature to Your Todos (Mark as Done/Undone)
Test the Full CRUD API with Postman
Build API Documentation Using Tailwind CSS and DaisyUI
Deploy Your API and Documentation to Vercel

🧠 Tech Stack:

Next.js 15 (App Router)
Drizzle ORM
Neon Database (PostgreSQL)
Tailwind CSS + DaisyUI
Postman for API testing
Vercel for Deployment

API Documentation : https://todofy-omega.vercel.app/

Github Project - Give me a star ⭐ on Github https://github.com/Osiris8/todofy

📌 Try Neon for Free:

https://neon.tech (serverless Postgres)

🌐 Deploy with Vercel:

https://vercel.com

🔥 More videos coming soon !
Subscribe and hit the bell to follow this series.
Learn modern web development with real projects!

[Boost]

Osiris8 — Sun, 02 Mar 2025 05:55:41 +0000

Part 2 | Next.js 15 for Beginners | Authentication, Database & CRUD Soccer App

Osiris8 ・ Mar 2

#nextjs #node #javascript #react

Part 2 | Next.js 15 for Beginners | Authentication, Database & CRUD Soccer App

Osiris8 — Sun, 02 Mar 2025 05:42:24 +0000

🚀 Welcome to Part 2 of our Next.js 15 Full Course! In this video, we take our Soccer App to the next level by adding authentication, database integration, and full CRUD functionalities.

You’ll learn how to store and manage users, upload player images, and implement server components!

📖 What You’ll Learn in This Video:

Setup your database
Connect to MongoDB
Start authentication with Kinde
Add authentication (Sign Up & Sign In) to Navbar
Add a user profile & customize Navbar for logged-in users
Create a page to add a new player
Install EdgeStore to upload player images
Create an API route to add a player
Create an API route to get player details
Display player details using URL ID
Add a button to edit a player
Display player data in a form
Add a PATCH route to update player data
Update player details
Add an API route to delete a player
Delete a player
Display all players on the homepage
Add an API route to fetch all players
Display all players
Add an API route to fetch only my created players
Display my created players
Server components in Next.js
Full demo of our application

🔗 Watch Video:

https://youtu.be/RS0vkGw8jYQ?si=gUF2DyovjRmKD_Fo

🔥 Why You Should Watch This Video

Learn Next.js 15 authentication with Kinde Auth
Connect and interact with MongoDB
Implement full CRUD operations (Create, Read, Update, Delete)
Use EdgeStore for player image uploads
Build a real-world app

[Boost]

Osiris8 — Wed, 26 Feb 2025 05:54:46 +0000

Next.js 15 for Beginners | Build & Deploy a Soccer App

Osiris8 ・ Feb 26

#nextjs #node #javascript #react

Next.js 15 for Beginners | Build & Deploy a Soccer App

Osiris8 — Wed, 26 Feb 2025 05:44:21 +0000

🚀 Learn Next.js 15 by building a complete application from scratch! In this hands-on course, we’ll create and deploy Soccer App, a full CRUD application that lets users add, update, and delete football players.

🔥 What You’ll Learn:

Introduction to Next.js 15
Installing Next.js and setting up the project
Understanding Next.js file structure
CSS styling and best practices
Adding metadata for SEO
Optimizing fonts and images in Next.js
Creating layouts and pages
Fetching data efficiently
Implementing search functionality
Setting up a database for dynamic data
Adding authentication with Kinde
Creating API routes
Using server components for better performance
Deploying the app on Vercel

👨‍💻 Final Project:

A modern, fully functional soccer player management app with a sleek UI and smooth user experience!

🔗 Full Video:

https://youtu.be/txeTcmivwuY?si=C7ofrhlcpqU0GZpj

💡 Why Watch This Tutorial ?

If you want to master Next.js 15 by building a real-world project, this is for you! Whether you’re a beginner or an intermediate developer, you’ll gain valuable skills through hands-on learning.