File tree

1 file changed

+5
-102
lines changed

1 file changed

+5
-102
lines changed
Original file line numberDiff line numberDiff line change
@@ -2,106 +2,9 @@
22
# Spring Boot Projects - Full Stack
33

44
# Part-9: Full Stack [Spring Boot and React JS]
5-
* ### (resource/code)
6-
## Project-1. FullStack: Spring Boot React JS Database MySQL, CRUD example
7-
* Company Employee how to handle and using CRUD methods.
8-
### QUICK overview of React JS and Spring Boot
9-
* React is used to build user interface(UI) on the front end;
10-
* React is not a framework (unlike Angular, which is more opinionated)
11-
* React is an open-source project created by Facebook
12-
------------
13-
* Spring Boot to develop REST web service and Microservices
14-
* Spring Boot has taken Spring framework to the next level. That has drastically reduced the configuration and setup time required for spring projects
15-
* Spring Boot has possible configuration scratch to advanced, that actually matter to your application.
165

17-
18-
![Figure-1](https://user-images.usercontent.com/11626327/97261692-b1931480-1862-11eb-9c73-4eb6157c06fc.png)
19-
20-
--> `Frontend-side tools and technologies used:`
21-
* React
22-
* Modern JavaScript (ES6)
23-
* NodeJS and NPM
24-
* VS Code IDE
25-
* Create React App CLI
26-
* Bootstarp 4.5 and Axios HTTP Library
27-
28-
--> `Backend-side tools and technologies used: `
29-
30-
Backend represents 2 folders:
31-
* backend
32-
* backend + Swagger
33-
34-
* SpringBoot 2 +
35-
* Spring Data JPA (Hibernate)
36-
* Maven 3.2 +
37-
* JDK 1.8
38-
* Embedded Tomcat 8.5 +
39-
* MySQL Database (using tool workbench_)
40-
--> Prerequesites
41-
* Basic Knowledge with HTML / CSS
42-
* Basic Knowledge of JavaScript and Programming
43-
* Node.js and npm installed
44-
* React basic (from scratch )
45-
* Swagger UI (documentation & API testing_) // http://localhost:8080/swagger-ui.html#/
46-
47-
![Screen Shot 2020-11-12 at 5 01 26 PM](https://user-images.usercontent.com/11626327/98912066-ef519780-2508-11eb-830f-590747a416c8.png)
48-
49-
* ReactJS Snippet Component (install VSC pluggin)
50-
51-
52-
Confuguration Router:
53-
54-
`npm install react-router-dom `
55-
56-
57-
In React.JS we should know about skelet of source in VSC:
58-
59-
`rcc` command given as :
60-
------------------------
61-
import React, { Component } from 'react';
62-
63-
class HeaderComponents extends Component {
64-
render() {
65-
return (
66-
<div>
67-
68-
</div>
69-
);
70-
}
71-
}
72-
73-
export default HeaderComponents;
74-
----------------------------
75-
76-
77-
## Project-2. FullStack: Spring Boot + React + Swagger API Shopping Mall Project
78-
------
79-
80-
81-
<img width="794" alt="Screen Shot 2020-11-10 at 11 15 55 PM" src="https://user-images.usercontent.com/11626327/98685483-c2876e00-23aa-11eb-92ae-9012000c46bb.png">
82-
83-
## Project-4. Spring Boot AWS S3 Upload
84-
85-
![Screen Shot 2020-11-05 at 11 31 02 AM](https://user-images.usercontent.com/11626327/98190535-94450100-1f5a-11eb-8019-804d32892b93.png)
86-
87-
AWS/ Bucket
88-
![Screen Shot 2020-11-05 at 11 30 49 AM](https://user-images.usercontent.com/11626327/98190604-bb9bce00-1f5a-11eb-8b51-ebf75cd5215f.png)
89-
90-
## Project-6. Shopping Card.
91-
92-
The stack will be the following:
93-
94-
Java 10
95-
Maven as the build manager
96-
Spring Boot with Spring MVC as the server-side frameworks
97-
Thymeleaf as the server-side template engine
98-
React for the client-side interaction
99-
Bootstrap as the CSS framework.
100-
101-
102-
![Screen Shot 2020-12-16 at 2 34 14 PM](https://user-images.usercontent.com/11626327/102309460-2c97c200-3fac-11eb-8ee6-917c6dff5679.png)
103-
104-
# Using and Recommendated List of References
105-
1. [Bootstarapping](https://getbootstrap.com/docs/4.5/getting-started/introduction/)
106-
2. [Full Stack: React and Spring](https://www.youtube.com/watch?v=S5AFJIfRxQU&list=PLGRDMO4rOGcNLnW1L2vgsExTBg-VPoZHr&index=14)
107-
3. [Shopping Card](https://pusher.com/tutorials/shopping-cart-java-react)
6+
7+
8+
## Reference
9+
1. [Mongo DB](https://docs.mongodb.com/manual/core/data-modeling-introduction/)
10+
2. [6 steps MongoDB](https://www.mongodb.com/blog/post/6-rules-of-thumb-for-mongodb-schema-design-part-1)

0 commit comments

Comments
 (0)