add dotenv and update readme

Author: shankha001

.env_setup

@@ -0,0 +1,2 @@
+SECRET_KEY=Your Secret string value
+MONGO_URI=Your URI here

.gitignore

@@ -1,2 +1,20 @@
 node_modules
-.env
+.env
+
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

client/README.md

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import jwt_decode from 'jwt-decode';
+import './profile.styles.scss';
 
 function Profile() {
   const [first_name, setfirst_name] = useState('');
@@ -17,32 +18,30 @@ function Profile() {
   }, []);
 
   return (
-    <div className="container">
+    <div className="profile-container">
       <div className="">
-        <div className="">
-          {email ? (
-            <h1 className="">PROFILE</h1>
-          ) : (
-            <h2>Please Login/Register to view this page</h2>
-          )}
-        </div>
-        <table className="">
-          <tbody>
-            <tr>
-              <td>{first_name ? 'Fist Name' : null}</td>
-              <td>{first_name}</td>
-            </tr>
-            <tr>
-              <td>{last_name ? 'Last Name' : null}</td>
-              <td>{last_name}</td>
-            </tr>
-            <tr>
-              <td>{email ? 'Email' : null}</td>
-              <td>{email}</td>
-            </tr>
-          </tbody>
-        </table>
+        {email ? (
+          <h1 className="">PROFILE</h1>
+        ) : (
+          <h2>Please Login/Register to view this page</h2>
+        )}
       </div>
+      <table className="">
+        <tbody>
+          <tr>
+            <td>{first_name ? 'Fist Name:' : null}</td>
+            <td>{first_name}</td>
+          </tr>
+          <tr>
+            <td>{last_name ? 'Last Name:' : null}</td>
+            <td>{last_name}</td>
+          </tr>
+          <tr>
+            <td>{email ? 'Email:' : null}</td>
+            <td>{email}</td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   );
 }

client/src/components/profile/profile.jsx

@@ -0,0 +1,6 @@
+.profile-container {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}

client/src/components/profile/profile.styles.scss

@@ -0,0 +1,30 @@
+# MERN-Authentication
+
+BoilerPlate of MERN Stack user authentication using REACT as frontend and MONGODB as backend.
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Dependencies
+
+- bcrypt
+- cors
+- axios
+- express
+- mongoose
+- jwt
+
+## Installation
+
+For starting Frontend Client
+
+```sh
+$ cd client/
+$ npm install
+$ npm start
+```
+
+For starting Backend Server
+
+```sh
+$ npm install
+$ npm run dev
+```

readme.md

@@ -1,3 +1,5 @@
+require('dotenv').config();
+
 const express = require('express');
 const cors = require('cors');
 const bodyParser = require('body-parser');
@@ -10,8 +12,12 @@ app.use(bodyParser.json());
 app.use(cors());
 app.use(bodyParser.urlencoded({ extended: true }));
 
+// Local DataBase
 const mongoURI = 'mongodb://localhost:27017/reactauthDB';
 
+// MongoAtlas Datbase
+// const mongoURI = process.env.MONGO_URI;
+
 mongoose
   .connect(mongoURI, { useNewUrlParser: true, useUnifiedTopology: true })
   .then(() => console.log('MONGODB connected'))