MENU

Fun & Interesting

Create Your Own AI Developer: Build a Complete Realtime MERN Chat App with Google Gemini

Sheryians Coding School 158,035 4 months ago
Video Not Working? Fix It Now

In this video, we’ll guide you through building a complete real-time chat app using the MERN stack, enhanced with AI support from Google Gemini. We’ll also integrate Redis for better performance and use socket connections for smooth real-time communication. Whether you're a beginner or looking to level up your skills, this project will teach you how to create your own AI-powered web app Visit our website - https://sheryians.com/ Source Code - https://github.com/Ankur77720/soen Don't forget to LIKE 👍 this video, SUBSCRIBE 🔔 for more DSA tutorials, and COMMENT below if you have any questions or suggestions! 🚀 Socials: 📷 Instagram: https://www.instagram.com/sheryians_coding_school/ 📘 Facebook: https://www.facebook.com/sheryians.community 💌 Telegram: https://t.me/sheryiansCommunity 💼 LinkedIn: https://in.linkedin.com/company/the-sheryians-coding-school 🎮 Discord: https://discord.gg/Au3TquBarQ Peace out ✌ #MERN #AI #GoogleGemini #RealtimeChat #WebDev #Redis #sheryianscodingschool #sheryians #code #coding #jobs #reactjs #mernstack #mern #web #reactjscourse #tutorial #creativewebdevelopment #webdevelopment #functionalwebdevelopment #thebasics #mernstack #jslogic #javascriptlogics -------------------------------------------------------------------------------------------------------------------------- Timestamp: 00:00 - 02:18 - intro 02:18 - 07:08 - project Preview 07:08 - 13:36 - server setup 13:36 - 33:57 - database setup & user register endpoint 33:57 - 47:07 - user login & authuser middleware 47:07 - 53:40 - redis setup 53:40 - 01:02:39 - user logout complete user auth 01:02:39 - 01:05:36 - react setup 01:05:36 - 01:08:18 - react router dom setup 01:08:18 - 01:13:55 - login & register complete 01:13:55 - 01:27:21 - login & register integration complete 01:27:21 - 01:33:59 - user context setup 01:33:59 - 01:52:50 - project create endpoint 01:52:50 - 02:06:49 - create project ui 02:06:49 - 02:38:31 - get all user & project & add user 02:38:31 - 02:42:27 - get project by id 02:42:27 - 02:53:42 - home to project ui integration 02:53:42 - 03:02:55 - creating project ui 03:02:55 - 03:17:14 - creating messaging ui 03:17:14 - 03:32:33 - creating users sidepanel ui 03:32:33 - 03:44:47 - user select model done 03:44:47 - 04:02:38 - user added & collaborators showing 04:02:38 - 04:08:54 - socket io setup 04:08:54 - 04:13:55 - socket auth middleware done 04:13:55 - 04:20:17 - socket setup done frontend & backend 04:20:17 - 04:48:05 - implement project based socket connection and user authentication add userauth component for route protection 04:48:05 - 05:08:55 - refactor messaging system improve message handling & ui updates in project component 05:08:55 - 05:13:17 - getting gemini api key 05:13:17 - 05:21:49 - using ai for doing task 05:21:49 - 05:29:39 - using prompt engineering 05:29:39 - 05:31:55 - the good way of prompt engineering 05:31:55 - 05:45:10 - conversion with ai 05:45:10 - 05:54:43 - refactor project component & replace message hanling functions with state management for messages 05:54:43 - 06:01:19 - refactor messaging system & enhance message broadcasting & improve message alignment in project component 06:01:19 - 06:26:17 - enhance ai service & improve response structure & add example prompts for better content generation 06:26:17 - 06:46:13 - enhance project component add file tree structure & code editor functionality 06:46:13 - 06:53:59 - refactor ai service & project component clean up code structure & update file tree handling 06:53:59 - 07:15:36 - enhance project component integrate web container api for improved file handling and update syntax highlighting logic 07:15:36 - 07:41:00 - enhance project component add run fucntionality for web container and improve code editor structure 07:41:00 - 07:45:37 - add-iframe-support-for-web-container-and-update-message-box-styling 07:45:37 - 08:01:15 - add-run-process-management-and-improve-iframe-layout 08:01:15 - 08:08:30 - add-updateFileTree-functionality-and-integrate-file-tree-management 08:08:30 - 08:08:37 - outro

Comment