refactored template

client/.gitignore

@@ -1,3 +1,4 @@
 /node_modules
+.env
 .DS_Store
 .eslintcache

client/package.json

@@ -1,15 +1,24 @@
 {
   "name": "client",
   "version": "1.0.0",
+  "private": true,
   "main": "index.js",
-  "scripts": {
-    "start": "react-scripts start"
-  },
   "license": "ISC",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject"
+  },
   "dependencies": {
-    "axios": "^0.21.0",
+    "axios": "^0.21.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "^4.0.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   }
 }

client/src/App.js

@@ -0,0 +1,11 @@
+import './styles/App.css';
+
+function App() {
+  return (
+    <div className='App'>
+      <p>Hello World - React.js</p>
+    </div>
+  );
+}
+
+export default App;

client/src/api/index.js

@@ -5,36 +5,8 @@ const url = 'http://localhost:8080/api/v1';
 
 // current method: GET
 // current path: http://localhost:8080/api/v1/example
-export const getExample = () => axios.get(`${url}/example`);
+export const getPeople = () => axios.get(`${url}/people`);
 
 // current method: POST
 // current path: http://localhost:8080/api/v1/example/upload
-export const uploadExample = (form) => axios.post(`${url}/example/upload`, form);
-
-// Example using your API:
-//
-//
-//
-// 1) in your Component file, import a method from above like so:
-//
-//    import { getExample } from './api';
-//
-//
-//
-// 2) Then call the method and handle it's errors/response, like so:
-//
-//    function ExampleFetching() {
-//      const [data, setData] = React.useState([]);
-//
-//      React.useEffect(() => {
-//        getExample()
-//          .then((response) => setData(response.data))
-//          .catch((error) => console.log(error));
-//      }, []);
-//
-//      return (
-//        <div>
-//          {data}
-//        </div>
-//      );
-//    }
+export const newPerson = (form) => axios.post(`${url}/people/new`, form);

client/src/components/App/App.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import HelloWorld from './../HelloWorld/HelloWorld';
-
-function App() {
-  return (
-    <div>
-      <HelloWorld />
-    </div>
-  );
-}
-
-export default App;

client/src/components/HelloWorld/HelloWorld.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import styles from './HelloWorld.module.css';
-// CSS module -> className={styles.App} (AKA styled components)
-
-function HelloWorld() {
-  return <div className={styles.HelloWorld}>Hello World - React.js</div>;
-}
-
-export default HelloWorld;

client/src/components/HelloWorld/HelloWorld.module.css

@@ -1,6 +0,0 @@
-.HelloWorld {
-  width: 100%;
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-}

client/src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './components/App/App';
-import './style/reset.css';
+import './styles/reset.css';
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>

client/src/styles/App.css

@@ -0,0 +1,19 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.App {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.App > p {
+  text-align: center;
+}

client/src/styles/reset.css

@@ -1,10 +1,3 @@
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 /*
 	HTML5 Reset :: style.css
 	----------------------------------------------------------