working code

config/db.js

@@ -1,16 +1,16 @@
 import mongoose from 'mongoose';
 
 const connectDB =  async () => {
-  const URI = process.env.MONGODB_URL
+  const URI = process.env.MONGODB_URL || "mongodb://localhost:27017/" 
   mongoose.connect(URI, {
-    useCreateIndex: true,
-    useFindAndModify: false,
     useNewUrlParser: true,
     useUnifiedTopology: true
   }, err => {
-      if (err) throw err;
-      console.log('Connected to MongoDB')
-  });
+    if (err) {
+          throw err;
+        } 
+        console.log('Connected to MongoDB')
+    });  
 }
 
 export default connectDB;

controllers/article.js

@@ -34,7 +34,7 @@ async function createArticle(req, res) {
             return res.status(400).json({ msg: "No image upload" });
         }
 
-        const article = await Articles.findOne({ article_id });
+        const article = await Articles.find({ article_id });
 
         if (article) {
 

models/article.js

@@ -79,6 +79,12 @@ articleSchema.pre('validate', function (next) {
 
 const Articles = mongoose.model('Articles', articleSchema);
 
-Articles.createIndexes();
+// When your application starts up, Mongoose automatically calls createIndex for each defined index 
+// in your schema. Mongoose will call createIndex for each index sequentially, and emit an 'index' 
+// event on the model when all the createIndex calls succeeded or when there was an error. While 
+// nice for development, it is recommended this behavior be disabled in production since index creation 
+// can cause a significant performance impact. Disable the behavior by setting the autoIndex option of 
+// your schema to false, or globally on the connection by setting the option autoIndex to false.
+// Articles.createIndexes();
 
 export default Articles;

models/payment.js

@@ -39,6 +39,6 @@ const paymentSchema = new mongoose.Schema({
 
 const Payments = mongoose.model("Payments", paymentSchema);
 
-Payments.createIndexes();
+// Payments.createIndexes();
 
 export default Payments;

models/product.js

@@ -49,6 +49,6 @@ const productSchema = new mongoose.Schema({
 
 const Products = mongoose.model("Products", productSchema);
 
-Products.createIndexes();
+// Products.createIndexes();
 
 export default Products;

src/Components/NavBar/SideBar.jsx

@@ -6,7 +6,7 @@ import {ArticleHr} from '../../Layout/Hr/styledHr';
 import {HiOutlinePencilAlt} from 'react-icons/hi';
 import {BsHouseDoor, BsBell} from 'react-icons/bs';
 import {MdBookmarkBorder} from 'react-icons/md';
-import logo from '../../Assets/Images/newLogo.png';
+import logo from '../../Assets/Images/logo-min.png';
 
 const SideBar = () => {
 

src/Components/PersonalBrand/PersonalBrand.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import './PersonalBrand.css';
-import nique from '../../icons/nique.jpg'
-import dom from '../../icons/hosea3.png'
-import Resume2020 from '../../icons/Resume2020.pdf'
+import './PersonalBrand.css'
+import nique from '../../Assets/Icons/nique.jpg'
+import dom from '../../Assets/Icons/hosea3.png'
+import Resume2020 from '../../Assets/Files/Resume2020.pdf'
 import Modal from 'react-bootstrap/Modal'
 import Col from 'react-bootstrap/Col'
 import Row from 'react-bootstrap/Row'

src/Layout/Hero/styledHero.jsx

@@ -1,5 +1,5 @@
 import styled, {css} from 'styled-components';
-import breakpoint from '../../Utils/breakpoints.js';
+import breakpoint from '../../utils/breakpoints';
 import wireframe from '../../Assets/Images/wireframe-min.jpg';
 import houston from '../../Assets/Images/besomeone-min.jpg';
 

src/Pages/Articles/Articles.jsx

@@ -26,17 +26,23 @@ const Articles = () => {
 
     const indexOfLastPost = currentPage * postsPerPage;
     const indexOfFirstPost = indexOfLastPost - postsPerPage;
-    const mainPosts = articles
+    const mainPosts = articles.sort((a,b) =>  new Date(b.createdAt) - new Date(a.createdAt));
+
     const archivedPosts = [];
-
+    
     mainPosts.map((article) => {
-      if (article.archived) {
-        archivedPosts.push(article);
-        mainPosts.pop(article)
-      }
+        if (article.archived) {
+            archivedPosts.push(article);
+            mainPosts.pop(article)
+        }
     });
-
+    
     const currentPosts = mainPosts.slice(indexOfFirstPost, indexOfLastPost)
+    const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
+
+    const popularPosts = shuffleArray(mainPosts)
+        .filter((article) => article != currentPosts)
+        .slice(0, 5);
 
     const paginate = pageNum => setCurrentPage(pageNum);
     const nextPage = () => {
@@ -115,6 +121,8 @@ const Articles = () => {
     else if (tagsShow === "Software Engineer") {
         taggedArticles = currentPosts.filter(item => item.category.includes("Software Engineer"))
     }
+    console.log(popularPosts)
+
 
     // Load this effect on mount
     useEffect(() => {
@@ -209,9 +217,9 @@ const Articles = () => {
                                 <div className="popular">
                                     <h2 className='article-card-header'>Popular Post</h2>
                                     <section className='popular-articles'>
-                                        {mainPosts.map(article => {
+                                        {popularPosts.map(article => {
                                             return (
-                                                <a key={article.id} href={`/blog/${article.id}`} target="_blank"rel="noopener noreferrer" >
+                                                <a key={article.id} href={`/blog/${article._id}`} target="_blank"rel="noopener noreferrer" >
                                                     <div className="popular-link">{article.title}</div><br /></a>
                                             )
                                         })}

src/Pages/Auth/login.jsx

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 
 import { GlobalState } from '../../GlobalState';
 import "./login.css";
-import Logo from "../../Assets/Images/newLogo.png";
+import Logo from "../../Assets/Images/logo-min.png";
 
 const Login = () => {
   const state = useContext(GlobalState)

src/Pages/Auth/register.jsx

@@ -4,7 +4,7 @@ import axios from "axios";
 import { Link } from "react-router-dom";
 
 import "./login.css";
-import Logo from "../../Assets/Images/newLogo.png";
+import Logo from "../../Assets/Images/logo-min.png";
 
 const Register = () => {
   const [showRole, setShowRole] = useState(false);

utils/authAdmin.js

@@ -2,7 +2,7 @@ import Users from "../models/user.js";
 
 const authAdmin = async (req, res, next) => {
     try {
-      const user = await Users.findOne({
+      const user = await Users.find({
         _id: req.params.id
       })
       console.log(user)