Build and Deploy an AI-Driven Personalized Cancer Treatment App with React.js , Vite and Gemini AI
Built with the latest Next.js. BeatCancer, an AI assistant designed to provide personalized cancer care by analyzing patient data, guidelines, and medical records. Our goal is to identify screening gaps and create tailored treatment plans to improve patient outcomes.
🎓 What You'll Learn:
-React.js fundamentals and best practices
-Full stack development with React.js
-Integrating AI (Gemini AI) into your React app
-TypeScript implementation in React
-State management with Context API
-Responsive design using Tailwind CSS
-Authentication with Privy
-Database integration using Drizzle ORM
-Deployment of React.js projects
📚 Project Highlights:
-AI-assisted cancer care planning
-Patient data analysis
-Personalized treatment recommendations
-Screening schedule management with Kanban board
👨💻 Step-by-Step Guide:
-Setting up a React.js project with Vite
-Creating a responsive layout
-Implementing authentication
-Database design and integration
-AI model integration for data analysis
-Building interactive UI components
-Deploying your React.js application
⭐ Drizzle: https://orm.drizzle.team/docs/get-sta...
⭐ Neon: https://console.neon.tech/
⭐ TailwindCSS: https://tailwindcss.com/
⭐ Aceternity UI: https://shorturl.at/3p5Dp
⭐ Gemini AI :https://aistudio.google.com/app
⭐ Privy: https://docs.privy.io/
⭐ Vite: https://vitejs.dev/guide/
📚 Materials/References:
GitHub Repo (give it a star ⭐): https://github.com/mendsalbert/beat-c...
Starter File: https://github.com/mendsalbert/beat-c...
README (assets & code): https://github.com/mendsalbert/beat-c...
Cancer report template: https://drive.google.com/file/d/1lohd...
User flow Diagrams: https://drive.google.com/file/d/16HSn...
👋 Social Media:
/ mendsalbert
/ mendsalbert_
/ mends-albert
https://t.me/albertmends
Subscribe or I turn your vs code into light mode
╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝
Timestamps
00:00:00 - intro
00:01:03 - demo
00:03:22 - requirement gathering
00:04:16 - system architecture diagram
00:05:12 - user flow diagram
00:05:50 - cloning starter file
00:06:36 - exploring starter file
00:08:50 - main.jsx
00:11:31 - privy authentication setup
00:14:40 - app.jsx + react router dom setup
00:20:51 - sidebar component
00:44:05 - navbar component
01:06:33 - navbar mobile version
01:17:11 - home page
01:19:29 - home page (displayInfo component)
01:22:36 - home page ( metrics card component )
01:32:57 - home page (displayInfo component con't)
01:48:04 - onboarding page
02:03:05 - drizzle orm intro
02:04:45 - drizzle.config.js
02:08:16 - drizzle schema.jsx
02:14:46 - dbConfig.js
02:18:46 - state management (contextAPI setup)
02:42:20 - onboarding page con't ( inserting user into db)
02:48:53 - logic to display onboarding page
02:55:20 - profile page
02:57:15 - records page
03:37:17 - records details page
04:19:35 - gemini AI docs intro
04:21:09 - records details con't
04:24:38 - records details con't (.env)
04:26:09 - records details con't (generating analysis function with gemini AI)
04:37:33 - records details con't (testing records upload + fixes)
04:43:15 - records details con't (process treatment plan function with gemini AI)
04:50:32 - screening schedule page
04:50:32 - screening schedule page (kanban component)
04:55:44 - kanban component (dnt kit intro)
04:57:16 - kanban component con't
06:01:44 - home page ( displayInfo component completion )
06:14:39 - hosting + conclusion
💼 Business inquiries: [email protected]
👨🏽💻 Tools and Tech Stack
React JS, Next.js, TailwindCSS, Typescript, Preline, OpenAI API, Tabler Icon, JavaScript, Gemini AI, Drizzle ORM, Shadcn, Neon Console, Nextjs14
Whether you're new to React.js or looking to enhance your skills, this tutorial covers everything from basic setup to advanced features. Learn how to leverage the power of React.js for building scalable, performant web applications.
Subscribe for more React.js tutorials, web development tips, and full stack development guidance!
#ReactJS #WebDevelopment #AIinHealthcare #FullStackDevelopment #TypeScript #TailwindCSS #JavaScript #CodingTutorial