hamitmizrak / FullStackDeveloper11

Spring Boot & React JS

N-Tier Architecture

---

Blog Project:

Spring Boot And React JS

• Backend: Java Core, Spring Framework
• Frontend: React JS, JS, +ES5
• 🎁 BLOG

---

TECHNOLOGY &&Features

• HTML5
• CSS3
• RESPONSIVE DESIGN
• JS
• BOOTSTRAP5
• JQUERY
• JAVASCRIPT
• SQL
• H2DB
• MYSQL
• POSTGRESQL
• JAVA CORE
• SPRING FRAMEWORK
• SPRING BOOT

---

Libraries & Programming

• Thymeleaf
• Lombok
• Validation
• Mysql
• Postgresql
• Model Mapper
• Password Encoder
• Open Api Configuration
• H2DB
• MYSQL
• POSTGRESQL
• JAVA CORE
• SPRING FRAMEWORK
• SPRING BOOT

---

Support As [Hamit Mızrak] writes on the Markdown site

Who am I: Computer Engineering
Senior Full Stack Developer & DEVOPS & MOBIL APP

Mail Addres Tel

---

Road Map

My Project Road Map

• Install
• Plugin
• VS Code
• Google Chrome
• Port
• Docker

And of course Dillinger itself is open source with a [public repository][dill] on GitHub.

Installation

Dillinger requires Node.js v10+ to run. REACT JS

npm -v
node -v
npx create-react-app blog
npm i
cd blog
npm start

---

Plugins Data

Dillinger is currently extended with the following plugins. Instructions on how to use them in your own application are linked below.

Plugin	README
Dropbox	[plugins/dropbox/README.md][PlDb]
GitHub	[plugins/github/README.md][PlGh]
Google Drive	[plugins/googledrive/README.md][PlGd]
OneDrive	[plugins/onedrive/README.md][PlOd]
Medium	[plugins/medium/README.md][PlMe]
Google Analytics	[plugins/googleanalytics/README.md][PlGa]

---

VS CODE EXTENSIONS

- Browser preview
- Auto Close tag
- tabnine
- Auto import
- Auto rename tag
- Bootstrap 5 Quick Snipperts
- Bracket Pair Colorizer 2
- Css Snippet
- Es7+ React/REdux/React-Native snippets
- Html Snippets
- JsQuery Snippets
- Live Server
- Material Icon Theme
- Open-in-Browser
- Path Intellisense
- Prettier Code formatter
- Project Manager
- Reactjs code Snippets

---

Google Chrome Plugins

for project , plugins

Google	CHROME
React Developer Tools	React Developer Tools
React DevTools	React Devtool
Google Drive	Frontend
OneDrive	Backend

---

PORT

for project , Port

NAME	PORT
React JS	[React][http://localhost:3000]
SPRING	[Spring][http://localhost:4444]
H2-CONSOLE	[H2][http://localhost:4444/h2-console]
SWAGGER	[API DOCUMENT][http://localhost:4444/swagger-ui.html]

---

Docker

Project Deployment

*STEP-1*
npx create-react-app frontend
cd frontend
npm start
code .

*STEP-2*
NOT: node_modules siliyoruz bunu sonrasında
npm i

*STEP-3*
terminal: package.json seviyesinde olacak şekilde
npm install axios
npm install bootstrap --save
npm install node-sass --save

port 8080 of the Docker (or whatever port was exposed in the Dockerfile):

docker-compose up -d
docker-compose down
Dockerfile build -t .

docker container run -d -p 4444:4444 --name backend blog
docker run -d -p 8000:8080 --restart=always --cap-add=SYS_ADMIN --name=dillinger <youruser>/dillinger:${package.json.version}

127.0.0.1:4444

License

BLOG PROJECT !