|
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.githubusercontent.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