|
2 | 2 | # Spring Boot Projects - Full Stack
|
3 | 3 |
|
4 | 4 | # 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. |
16 | 5 |
|
17 |
| - |
18 |
| - |
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 |
| - |
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 |
| - |
86 |
| - |
87 |
| -AWS/ Bucket |
88 |
| - |
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 |
| - |
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