better api template & css modules example

client/src/App.js

@@ -1,21 +1,23 @@
 import React from 'react';
 import HelloWorld from './components/HelloWorld';
-import './style/style.css';
+import './style/style.css'; // regular CSS -> className='app'
+import styles from './style/App.module.css'; // module CSS -> className={styles.App} (AKA styled components)
 // import * as api from './api';
-// un-comment this ^ ^ ^ to import api endpoints
+// ^ ^ ^ un-comment this to import api endpoints
 
 function App() {
+  // const [data, setData] = React.useState([]);
   // React.useEffect(() => {
   //   api
   //     .getSomething() // replace this with your endpoint
-  //     .then((response) => console.log(`✅ ${response.status} ${response.statusText}`, response.data))
+  //     .then((response) => console.log(`✅ ${response.status} ${response.statusText}`, setData(response.data)))
   //     .catch((error) => console.log(`❌ ${error}`));
-  // });
+  // }, []);
   //
-  // example ^ ^ ^ using the api endpoint
+  // ^ ^ ^ example using the api endpoint
 
   return (
-    <div className='App'>
+    <div className={styles.App}>
       <HelloWorld />
     </div>
   );

client/src/api/index.js

@@ -1,9 +1,12 @@
 import axios from 'axios';
 
-// customizable base-url
-const url = 'http://localhost:8080/';
+// api base-url (that you created on server side)
+const url = 'http://localhost:8080/api/v1';
 
-// demonstration endpoints:
-//
-// export const getSomething = () => axios.get(url + 'path');
-// export const postSometing = (form) => axios.post(url + 'path', form);
+// current path: http://localhost:8080/api/v1/example
+// current method: GET
+// export const getSomething = () => axios.get(url + '/example');
+
+// current path: http://localhost:8080/api/v1/example/upload
+// current method: POST
+// export const postSometing = (form) => axios.post(url + '/example/upload', form);

client/src/style/App.module.css

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

client/src/style/style.css

@@ -4,14 +4,8 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  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: grid;
-  place-items: center;
-}