refactored template

README.md

@@ -48,7 +48,7 @@ Then go to your server folder (backend), and set your database within `server.js
 
 ###### Client:
 
-> axios: ^0.21.0 &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Use the API<br /> react: ^17.0.1
+> axios: ^0.21.1 &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Use the API<br /> react: ^17.0.1
 > &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; UI framework<br /> react-dom: ^17.0.1
 > &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; UI framework<br /> react-scripts: ^4.0.1
 > &nbsp;&nbsp;&nbsp; ---> &nbsp;&nbsp;&nbsp; Quickly launch local service

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);
+export const newPerson = (form) => axios.post(`${url}/people/new`, 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>
-//      );
-//    }

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 './styles/reset.css';
-import './style/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
 	----------------------------------------------------------

server/.env.example

@@ -1 +1,2 @@
-CONNECTION_URL = "URL"
+CONNECTION_URL = "MongoDB connection URL"
+PORT = "4 digits"

server/.gitignore

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

server/api/controllers/exampleControllers.js

@@ -1,28 +0,0 @@
-import mongoose from 'mongoose';
-import Example from '../models/Example.js';
-// more about response status codes   --->   https://restapitutorial.com/httpstatuscodes.html
-
-export async function getExamples(request, response, next) {
-  try {
-    const allExamples = await Example.find();
-    response.status(200).json(allExamples);
-  } catch (error) {
-    console.log(error);
-    response.status(500).json(error);
-  }
-}
-
-export const uploadExample = async (request, response, next) => {
-  try {
-    let newExample = new Example({
-      _id: mongoose.Types.ObjectId(), // _id is set by default, (you can remove this line)
-      name: request.body.fieldName, // fieldName === name used on client side
-    });
-
-    const savedExample = await newExample.save();
-    response.status(201).json(savedExample);
-  } catch (error) {
-    console.log(error);
-    response.status(500).json(error);
-  }
-};

server/api/controllers/usersControllers.js

@@ -0,0 +1,29 @@
+import mongoose from 'mongoose';
+import User from '../models/User.js';
+// more about response status codes   --->   https://restapitutorial.com/httpstatuscodes.html
+
+export async function getAllUsers(request, response, next) {
+  try {
+    const allUsers = await User.find(); // finds all in 'users' collection
+
+    response.status(200).json(allUsers);
+  } catch (error) {
+    console.log(error);
+    response.status(500).json(error);
+  }
+}
+
+export const createNewUser = async (request, response, next) => {
+  try {
+    let newUser = new User({
+      _id: mongoose.Types.ObjectId(), // _id is set by default, (you can remove this line)
+      name: request.body.userName, // userName === name used on client side
+    });
+    const savedUser = await newUser.save();
+
+    response.status(201).json(savedUser);
+  } catch (error) {
+    console.log(error);
+    response.status(500).json(error);
+  }
+};

server/api/models/User.js

@@ -3,19 +3,25 @@ import mongoose from 'mongoose';
 const instance = new mongoose.Schema(
   {
     _id: mongoose.Schema.Types.ObjectId, // _id is set by default, (you can remove this line)
-    name: String,
+
     /*
-      name = property of document object
+      name = Object key
-      String = type of value   --->   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
+      String = Type
     */
+    name: String,
   },
   {
     timestamps: true,
+    // this creates and maintains:
+    // {
+    //   createdAt: Date,
+    //   updatedAt: Date,
+    // }
   },
 );
 
 // NOTE! use a singular model name, mongoose automatically creates a collection like so:
-// model: 'Person' === collection: 'people'
+// model: 'User' === collection: 'users'
-const modelName = 'Example';
+const modelName = 'User';
 
 export default mongoose.model(modelName, instance);

server/api/routes/exampleRoutes.js

@@ -1,19 +0,0 @@
-import express from 'express';
-import { getExamples, uploadExample } from '../controllers/exampleControllers.js'; // import request & response function
-
-// initialize router
-const router = express.Router();
-/*
-  request methods   --->   https://www.tutorialspoint.com/http/http_methods.htm
-  1st param = extended url path
-  2nd param = middlewares (optional)
-  3rd param = request & response function (controller)
-*/
-
-// current path: http://localhost:8080/api/v1/example
-router.get('/', (request, response, next) => next(), getExamples);
-
-// current path: http://localhost:8080/api/v1/example/upload
-router.post('/upload', (request, response, next) => next(), uploadExample);
-
-export default router;

server/api/routes/usersRoutes.js

@@ -0,0 +1,22 @@
+import express from 'express';
+import { getAllUsers, createNewUser } from '../controllers/peopleControllers.js'; // import request & response function
+
+// initialize router
+const router = express.Router();
+
+/*
+  request methods   --->   https://www.tutorialspoint.com/http/http_methods.htm
+  1st param = extended url path
+  2nd param = middlewares (optional)
+  3rd param = request & response function (controller)
+*/
+
+// current method: GET
+// current path: http://localhost:8080/api/v1/users
+router.get('/', (request, response, next) => next(), getAllUsers);
+
+// current method: POST
+// current path: http://localhost:8080/api/v1/users/new
+router.post('/new', (request, response, next) => next(), createNewUser);
+
+export default router;

server/server.js

@@ -3,28 +3,24 @@ import express from 'express'; // Backend App (server)
 import cors from 'cors'; // HTTP headers (enable requests)
 import morgan from 'morgan'; // Logs incoming requests
 import dotenv from 'dotenv'; // Secures variables
-
+// import usersRoutes from './api/routes/usersRoutes.js';
-// import IMPORTED_ROUTES from './api/routes/route.js';
 // ^ ^ ^ un-comment this to use imported route(s)
-// doing this will link the following files:   server.js -> exampleRoutes.js -> exampleControllers.js -> Example.js
+// doing this will link the following files:   server.js -> usersRoutes.js -> usersControllers.js -> User.js
 
 // initialize app
 const app = express();
 
 // middlewares
-app.use(express.json({ limit: '10mb', extended: true })); // body parser
+app.use(express.json({ limit: '10mb', extended: false })); // body parser
-app.use(express.urlencoded({ limit: '10mb', extended: true })); // url parser
+app.use(express.urlencoded({ limit: '10mb', extended: false })); // url parser
 app.use(cors({ origin: 'http://localhost:3000' })); // enables http requests on react development server
 app.use(morgan('common')); // logs requests
 dotenv.config(); // protected variables
 
 // configure db:
-// if you want to connect to cloud server (atlas): edit "CONNECTION_URL" in -> .env file
+// for "atlas" edit CONNECTION_URL in -> .env file || for "community server" edit <dbname>
-// if you want to use local server (community): edit "DB_NAME"
+const CONNECTION_URL = process.env.CONNECTION_URL || 'mongodb://localhost:27017/<dbname>';
-const DB_NAME = 'exampleDB';
+const DEPRECATED_FIX = { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true };
-const CONNECTION_URL = process.env.CONNECTION_URL || `mongodb://localhost:27017/${DB_NAME}`;
-const PORT = process.env.PORT || 8080; // 8080 === development port
-const DEPRECATED_FIX = { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true }; // update this with (possible) deprecated warnings
 
 // connect to db
 mongoose
@@ -32,13 +28,13 @@ mongoose
   .catch((error) => console.log('❌ MongoDB connection error', error)); // listen for errors on initial connection
 mongoose.connection.on('connected', () => console.log('✅ MongoDB connected')); // connected
 mongoose.connection.on('disconnected', () => console.log('❌ MongoDB disconnected')); // disconnected
-mongoose.connection.on('error', (error) => console.log('❌ MongoDB connection error', error)); // listen for errors after the connection is established (errors during the session)
+mongoose.connection.on('error', (error) => console.log('❌ MongoDB connection error', error)); // listen for errors during the session
 
 // routes
-app.get('/', (request, response, next) => response.send('Hello World - Express.js'));
+app.get('/', (request, response, next) => response.status(200).json('Hello World - Express.js'));
-
+// app.use('/api/v1/users', usersRoutes);
-// app.use('/api/v1/example', IMPORTED_ROUTES);
 // ^ ^ ^ un-comment this to use imported route(s)
 
 // server is listening for requests
+const PORT = process.env.PORT || 8080;
 app.listen(PORT, () => console.log(`✅ Server is listening on port: ${PORT}`));