⚡ MEVN Stack Data

• MEVN app: Vue frontend used to Create Read Update & Delete (CRUD) cable installation data with a Node-Express backend & MongoDB database.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ MEVN Stack Data
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
    • Frontend
    • Backend
    • General
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Cable pulling database idea inspired by time spent pulling electrical cables on an LNG plant in Northern Norway for Statoil. It is required to complete a cable database with details of cable, cable drum, amount of cable pulled and installed etc.
• Axios used to send/receive data from the MongoDB backend
• Backend node.js code separated into routes file with a Mongoose model Cable schema.
• Latest Mongoose v6 connection config. used (as of oct. 2021) with no deprecation warnings. Note an old config. will stop any Mongoose-based app from working.
• Vue 4 RouteRecordRaw route record provided by user

📷 Screenshots

📶 Technologies

Frontend

• Vue v3 JS framework
• Vue Router v4 the latest official router for Vue.js
• Vue CLI v5
• Axios v1, a promise-based http client, used to consume API data.
• Bootswatch v5 Bootstrap theme

Backend

• Express v4
• Mongoose v6
• cors v2 Cross Origin Resource Sharing Connect/Express middleware
• Node v16 JavaScript runtime built on Chrome's V8 JavaScript engine.
• Typescript v4
• MongoDB Atlas

General

• Thunder Client VS Code Extension lightweight Rest Client for Testing APIs
• rimraf the UNIX command rm -rf for node.

💾 Setup

Dev Backend:

• cd server to change directory
• npm i to install dependencies
• add MongoDB access
• Run npm run dev to run node.js server.
• Navigate to http://localhost:3000/api/cables to see JSON object with cable list or an empty array if no cables (refresh after changes - does not auto-update).
• CRUD operations can be performed on this backend using the Postman API dev tool or the Thunder Client VS Code Extension.

Dev Frontend:

• npm i to install dependencies
• npm run lint to lint files
• npm run client to run client dev server
• Navigate to http://localhost:8080/. The app will automatically reload if you change any of the source files.

Build Full Stack:

• npm run build to create build file for both front & back ends
• Navigate to http://localhost:8080/ to see frontend and http://localhost:3000/ to see backend (refresh after changes - does not auto-update).
• Heroku heroku login to login, git add . then git commit -m "commit message..." then git push heroku master to deploy to Heroku

💻 Code Examples

• 'cable.controller.ts' function to update cable by id

export const updateCableHandler = async (
  req: Request,
  res: Response
): Promise<Response<any, Record<string, any>>> => {
  try {
    const updatedCable = await Cable.findByIdAndUpdate(
      req.params.id,
      req.body,
      {
        new: true,
      }
    );
    if (!updatedCable) {
      return res.status(404).json({
        message: "Cable to be updated was not found",
      });
    }
    return res.json(updatedCable);
  } catch (error) {
    return res.status(500).send(error);
  }
};

🆒 Features

• Data successfully stored on MongoDB Atlas database

📋 Status & To-Do List

• Status: Working full-stack CRUD app with MongoDB Atlas database
• To-Do: Replace any data types, separate controller functions from routes, add date field
• To-Do: fix navbar burger button, styling, add cable fields, add drop down menu for cable drum selection etc.

👏 Inspiration

• What is rimraf and how to use it in Node.js

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com