Learn how to connect a Chakra UI frontend to a Quarkus Java backend in this comprehensive tutorial. Follow a step-by-step guide to create a full-stack application, starting with setting up a Quarkus backend with API endpoints and progressing to building a React-based Chakra UI frontend. Master the process of integrating both components, including implementing GET and POST requests, adding a development proxy server, and rendering API responses. Gain practical experience in full-stack development while working with modern technologies like Quarkus for scalable backend services and Chakra UI for building accessible React applications. By the end of this 41-minute video, you'll have a functional full-stack application and the skills to create your own projects combining these powerful technologies.
Connect Chakra UI Frontend to Quarkus Java Backend in 4 Easy Steps
Overview
Syllabus
Start of the Video
Tutorial Intro
GitHub and Starter code review
Creating Quarkus code from template
Starting Quarkus App first time
Quarkus code review in IntelliJ IDE
Understanding Quarkus code
Chakra UI Code from GitHub
Bonus Chakra UI Tutorials Intro
Chakra UI Code Details
Opening & Editing Chakra UI code in VSCode
Step 1 - setupProxy.js added with code
Step 2 - Adding GET/POST API function in Chakra UI
Step 2.1 - Using GET API in Chakra UI FrontEnd
Step 2.2 - Chakra UI FrontEnd connected with Quarkus
Step 2.3 - Updating Chakra UI FrontEnd Code
Step 3 - Adding Post API call in Chakra UI
Step 4 - Updating Quarkus Java code for POST support
Post API connection verification
Recap
Bonus Tutorial CoreUI with Python backend
Credits
Taught by
Prodramp
