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