Connect Chakra UI frontend to Quarkus Java backend in 4 easy steps

Quarkus: The combination of Quarkus and Kubernetes provides an ideal environment for creating scalable, fast, and lightweight applications. Quarkus significantly increases developer productivity with tooling, pre-built integrations, application services, and more.

Chakra UI: Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

This tutorial is all you need to get started with Full Stack development using React based Chakra UI and Quarkus (Java) based backend application.

Here are the tutorial contents:

• Code Introduction pushed to GitHub
• Create Quarkus application with 2 API end-points /hello and /version
• ValidateQuarkus application supports both GET and POST request
• Create Chakra UI frontend application using Chakra UI code already saved from GitHub
• Add development proxy server into React Chakra UI front end application
• Add JavaScript classes to handle both GET and POST RESTful request to the backend server
• Call both /hello and /version API from Chakra UI to Quarkus backend API and collect the data
• Parse the RESTful API response and render it into the web page
• Verify both GET and POST connections are working between Chakra UI and Quarkus backend with data transfer back and forth.
• Bonus Link: Connect Chakra UI with Python Backend

Here is the video timeline:

(00:00) Start of the Video (00:08) Tutorial Intro (02:03) GitHub and Starter code review (04:29) Creating Quarkus code from template (09:24) Starting Quarkus App first time (10:19) Quarkus code review in IntelliJ IDE (14:07) Understanding Quarkus code (16:21) Chakra UI Code from GitHub (16:59) Bonus Chakra UI Tutorials Intro (17:37) Chakra UI Code Details (18:35) Opening & Editing Chakra UI code in VSCode (19:38) Step 1 - setupProxy.js added with code (21:54) Step 2 - Adding GET/POST API function in Chakra UI (25:17) Step 2.1 - Using GET API in Chakra UI FrontEnd (29:39) Step 2.2 - Chakra UI FrontEnd connected with Quarkus (30:45) Step 2.3 - Updating Chakra UI FrontEnd Code (34:01) Step 3 - Adding Post API call in Chakra UI (35:49) Step 4 - Updating Quarkus Java code for POST support (38:04) Post API connection verification (38:18) Recap (39:48) Bonus Tutorial (CoreUI with Python backend) (40:49) Credits

Starter and final code for this Tutorial: https://github.com/prodramp/publiccode/tree/master/java/quarkus-chakraui

Chakra UI: https://chakra-ui.com/ Quarkus Template: https://code.quarkus.io/

Please visit: https://prodramp.com | @prodramp https://www.linkedin.com/company/prodramp

Content Creator: Avkash Chauhan (@avkashchauhan) https://www.linkedin.com/in/avkashchauhan

Tags: #webdevelopment, #frontend #react #python #layout #coreUI #flask #webserver #webdevelopment #restful #GET #POST #Quarkus #restful #java #microprofile #graalVM #kubernetes #fullstackdevelopment #pandas #matplotlib #datavisualization #conda #webapp #apply #transform #github #groupby #prodramp #wetogethervc #chakraUI ... https://www.youtube.com/watch?v=0ubqrgRrvHg