Skip to content

📋 Full-stack app using Vue, Express, NodeJS and MongoDB

Notifications You must be signed in to change notification settings

AndrewJBateman/mevn-stack-exchange

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

mevn-stack-exchange

A MEVN full-stack app using MongoDB, Express.js, Vue and Node.js. User can create an idea and it is added to an ideas list. Each idea can be voted up and down with idea text and total votes shown in a Vue v-card.

  • Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

Table of contents

General info

  • The project as a client-side for the frontend Vue framework and a server-side for the backend calls
  • Vue Router used to navigate pages in browser
  • Node.js MongoDB Driver API documentation used to create code for collection find, findOne, insertOne, etc.
  • Vuex store used to hold application state

MongoDB shell commands

  • mongo - enter MongoDB console
  • show dbs - list databases
  • use yt-ideas - switch to database called 'yt-ideas'
  • show collections - show all collections in database
  • db.ideas.find() - (when switched to database 'yt-ideas' show contents of database

Screenshots

frontend image backend image

Technologies - Backend

Technologies - Frontend

Setup - Backend

  • In the server directory install dependencies using "npm install", then run using "nodemon index.js"

Setup - Frontend

  • In the client directory install dependencies using "npm install", then run using "npm start serve".

Code Examples - Backend

  • extract from db.js - getClient method to connect to MongoDB database
exports.getClient = async () => {
  return new Promise((resolve, reject) => {
    if (!db) {
      // Use connect method to connect to the server
      MongoClient.connect(
        url,
        { useUnifiedTopology: true, useNewUrlParser: true },
        function(err, client) {
          assert.equal(null, err);
          console.log("Connected successfully to server");
          db = client.db(dbName);
          resolve(db);
        }
      );
    } else {
      resolve(db);
    }
  });
};

Code Examples - Frontend

  • extract from index.js to get list of ideas using the axios http get method
const getBasePath = () => {
  return "http://localhost:5000";
}

export const getIdeas = async () => {
  const { data: ideas } = await axios.get(`${getBasePath()}/ideas`);
  return ideas;
};

Features

  • Vuex state management used as a central store for all components. Mutations used to commit and track changes
  • Axios used to perform post request

Status & To-Do List

  • Status: Working frontend & Backend MongoDB database stores idea objects with id, idea text and votes number.
  • To-Do: Fix issue: votes total on v-card does not update, even though votes total is corrrectly stored in the database.

Inspiration

📁 License

  • N/A.

✉️ Contact