🔥 Integrating React Frontend with Spring Boot Backend for a Real-Time Chat Application
n this final part of the Room-Based Chat Application series, we bring everything together! Watch as we integrate the React frontend with the Spring Boot backend to create a fully functional chat application. We’ll set up WebSocket communication, connect the backend APIs with the frontend, and ensure smooth real-time messaging with MongoDB for persistent Chat Application full Series : https://www.youtube.com/playlist?list=PL0zysOflRCek-LfeO_s7aoMRMMWYQI8hX Source Code: https://github.com/LearnCodeWithDurgesh/chat-app Complete NextJs Series: https://www.youtube.com/playlist?list=PL0zysOflRCemKr4NHzNgrfZAUjDzlQtO5 Premium Course Library: https://courses.learncodewithdurgesh.com/ React JS Course : https://courses.learncodewithdurgesh.com/learn/Ecommerce-using-React-js Master Spring Boot Course : https://courses.learncodewithdurgesh.com/learn/Master-Spring-Boot-With-Project Telegram Link for Doubt: https://t.me/learncodewithdurgesh Important Videos: ➡️React JS with Project : https://youtu.be/TjnWtDWFZFc ➡️Learn JDBC in one video:https://youtu.be/lZbl7Q21t4s ➡️Learn Python in One Video: https://youtu.be/7GYHAJdHFbE ➡️Learn HTML in one video:https://youtu.be/pJ722eVhSNA ➡️Learn HTML form in one video: https://youtu.be/pJ722eVhSNA ➡️Learn JavaScript in one videos: https://youtu.be/bRA0lemc3M0 ➡️Learn Form Validation using javascript and jquery:https://youtu.be/gqOZdraPnE8 ➡️Learn CSS in one video: https://youtu.be/pJ722eVhSNA ➡️Jquery in one video:https://youtu.be/pJ722eVhSNA Kotlin is one video:https://youtu.be/poe98Hzh2n4 ➡️Complete Python Project - Youtube downloader in one video: https://youtu.be/pJ722eVhSNA Important Playlist: ➡️Spring Boot Tutorial with Project : https://www.youtube.com/playlist?list=PL0zysOflRCelmjxj-g4jLr3WKraSU_e8q ➡️Spring MVC Tutorial: https://www.youtube.com/playlist?list=PL0zysOflRCelAb51IrexpUSeB0dpr9p6g ➡️Complete Spring Framework Tutorial: https://www.youtube.com/playlist?list=PL0zysOflRCekeiERASkpi-crREVensZGS ➡️Hibernate Tutorials: https://www.youtube.com/playlist?list=PL0zysOflRCekX8OO7V7pGQ9kxZ28JyJlk ➡️E-Commerce Project using Java: https://www.youtube.com/playlist?list=PL0zysOflRCekMr91amXBNwWku4PmeFaFD ➡️AWS Free Java Hosting Playlist: https://www.youtube.com/playlist?list=PL0zysOflRCek6D-kLRM48rhyvTEbc60nc ➡️Hibernate Tutorial Playlist: https://www.youtube.com/playlist?list=PL0zysOflRCekX8OO7V7pGQ9kxZ28JyJlk ➡️Learn Technology in One Vides: https://www.youtube.com/playlist?list=PL0zysOflRCenCfUTpsGw9crgOih-VbNoT ➡️Programming Tips for Programmers: https://www.youtube.com/playlist?list=PL0zysOflRCek9j3teu1y3mYTGBVgOwJ_f ➡️Complete Python for Beginners: https://www.youtube.com/playlist?list=PL0zysOflRCel7fKZ_bBjlxA0XsHlbsv7P ➡️Important Python Projects: https://www.youtube.com/playlist?list=PL0zysOflRCena7wgzzM-Jg8184phWz-nr ➡️Complete Servlet & JSP : https://www.youtube.com/playlist?list=PL0zysOflRCel5BSXoslpfDawe8FyyOSZb ➡️Complete JDBC ( Java Database Connectivity) : https://www.youtube.com/playlist?list=PL0zysOflRCenjuvOwumYLG9TCsEQZrV2M ➡️Complete Java Project : TechBlog: https://www.youtube.com/playlist?list=PL0zysOflRCekb_ggXQYQSu-g-kWKgudBf ➡️Java Swing Projects: https://www.youtube.com/playlist?list=PL0zysOflRCemLgOlgbhivNZIIypAkL1T8 ➡️Java Core Concepts:https://www.youtube.com/playlist?list=PL0zysOflRCekj9UfQWDBPMxQCkHiCIFar ➡️Kya aap Jante hai Series: https://www.youtube.com/playlist?list=PL0zysOflRCemMnjIOHivEpZGDXFYyINnO Important Links: 👉Official Website (Source Code): https://learncodewithdurgesh.com/ 👉Telegram Discussion Group: https://t.me/learncodewithdurgesh 👉Follow me on Instagram: https://www.instagram.com/durgesh_k_t/ 👉Follow on Facebook https://www.facebook.com/learncodewithdurgesh/ Disclaimer: All videos are for educational purposes and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.
Video Chapters
Original Output
0:00 Connecting React Frontend to a Spring Boot Backend 2:51 The "It Works!" Moment: Real-Time Chat is Live 3:35 Polishing the UI: Adding Timestamps & Final Touches Timestamps by StampBot 🤖 (362-integrating-react-frontend-with-spring-boot-backend-for-a-re)
Unprocessed Timestamp Content
0:00 Let's connect our front-end with the back-end for real-time chat. 0:23 Our chat application's login and room creation UI are now ready for action. 1:00 You gotta connect to the backend to create a room for your chat. 1:24 We are configuring the frontend to talk to our backend API. 1:50 We implemented a context API to globally manage user and room data. 2:21 It's time to test if our room creation and joining functionality actually works. 2:51 Finally, everything's working, and we've successfully implemented real-time chat. 3:13 We are fine-tuning our chat application with a scroll-down feature for messages. 3:35 We successfully added a timestamp to our messages, now showing how long ago they were sent. 3:59 How cool is that? You can type messages and hit enter to send. Timestamps by StampBot 🤖 (362-integrating-react-frontend-with-spring-boot-backend-for-a-re)