How to create a full-stack app | React, SpringBoot, Java, JS, CSS, html [HDR version]

*NOTE: if youre having trouble viewing the video (hyper-exposed/saturated) check out the SDR version here: [   • [SDR] How to create a full-stack app | Rea...  ]*

Description: 🍹

Today we’ll be building a simple full-stack application from scratch! The main purpose is to showcase the interaction between our service and client. It can be difficult to dip your toes into the industry when you’re not sure where to begin when it comes to picking a language, installing certain technologies, and getting started with coding – I’m hoping to demystify a bit of the process through this tutorial! We’ll be building the backend using Java and Springboot and the frontend with React, JS, CSS, and html. Now, keep in mind, this may go a lot smoother if you’ve had a little experience with programming and using GitHub. Otherwise, it may be a very tedious process to get things up and running. Regardless, I hope you enjoy! And, as always, please comment below with any feedback! Thanks for the support friends! 😊

My code : 😙

[backend] https://github.com/practiceapps123/ba...
[frontend] https://github.com/practiceapps123/fr...

Installation Instructions: 💻

[Step 1]: Springboot 🍃🍃
SpringBoot Initializer: https://start.spring.io/ (Set up Repo with Springboot framework)
JDK 18: https://www.oracle.com/java/technolog... (Java Development Kit)
Reliable Internet:

[Step 2]: GitHub 🤑 🤮
GitHub account: https://github.com/ (push code changes here)
GIT instructions: https://git-scm.com/docs/user-manual (GIT instructions in terminal)

[Step 3]: GIT Init Backend Repo 🥵🥵
Command Prompt (Terminal): (Google "How to Open Terminal [command prompt]". This will vary based on your operating system.
Personal Access Token: https://docs.github.com/en/authentica... (Auth for Pushing to GitHub for the first time)

[Step 4]: Backend Setup 😵‍💫😵‍💫
IntelliJ: https://www.jetbrains.com/idea/downlo... (IDE)
Homebrew [or SDKMan!]: https://brew.sh/ (This is needed to install gradle)
Gradle: https://gradle.org/install/

[Step 5]: Hit Endpoint 👹👿
Postman or Insomnia: https://www.postman.com/downloads/ (Send http requests)
HTTP Protocol: https://developer.mozilla.org/en-US/d...

[Step 6]: INIT React App 🤖👾
Command Prompt: (Google "How to Open Terminal [command prompt]". This will vary based on your operating system.
Nvm: https://github.com/nvm-sh/nvm (Used to install Node)
Node: https://heynode.com/tutorial/install-...
Npm: https://docs.npmjs.com/downloading-an...

[Step 7]: Frontend Code 💩👻
VS Code: https://code.visualstudio.com/download

[Step 8]: Create Request **(remember to add YOUR endpoint path + port) ☠️👽
Access to practice GIT repository [and tutorial   / tutorial-how-to-make-http-requests-in-reac...  ]: https://github.com/maecapozzi/tutoria...

[Step 9]: Test Frontend 👩🏽‍🎓💋
Chrome Browser: https://www.google.com/chrome/?brand=...
Developer Tools: Right-Click in Chrome Browser [choose "Inspect"]

[Step 10]: Full-Stack App 🥴🥴
GitHub: https://github.com/ (push code changes here)

[Step 11]: Frontend Repository in GitHub 🤨🤩
GitHub: https://github.com/ (push code changes here)
Command Prompt: (Google "How to Open Terminal [command prompt]". This will vary based on your operating system.

[Step 12]: Push Changes to GitHub 🥸🥸
GitHub: https://github.com/ (push code changes here)
Command Prompt: (Google "How to Open Terminal [command prompt]". This will vary based on your operating system.

Timeline:

0:00 introduction
0:45 [Step 1]: Springboot framework (initialize backend app)
2:00 [Step 2]: GitHub Account Setup (Auth using personal token)
2:54 [Step 3]: Git Init Backend Repo - initialize repo as git repo
6:01 [Step 4]: Backend Setup (IDE) (Code with me!)
11:17 [Step 5]: Hit API Endpoint using Postman (REST)
12:52 [Step 6]: Initialize React App
16:50 [Step 7]: Frontend Programming (Code with me!)
17:58 [Step 8]: Create Request in Frontend using Axios
20:00 [Step 9]: Test Frontend to Backend (request/response model)
23:41 [Step 10]: Full-Stack Application development
25:03 [Step 11]: Frontend Repo in GitHub
28:04 [Step 12]: Push/Store all changes in Git Hub

Other videos you might like!

Day In The Life (Software Engineer @MSFT):    • Day In The Life of a Microsoft Software En...  
Becoming a Software Engineer:    • Becoming a software engineer with ZERO exp...  
Ultimate LeetCode Study Plan:    • The ULTIMATE 3-month LeetCode Study Plan |...  

Contact: Email: pdutt@wisc.edu Instagram: @fivefootraveler

#softwareengineering #programminglanguages #bigtech #faang #workremote #java #kotlin #python #javascript #full-stackg