⚡ MEVN Stack Checklist

• Full stack app using MongoDB, Express, Vue and Node.js to perform Create, Read, Update and Delete (CRUD) operations on a checklist of items.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• Axios used to send/receive data from MongoDB backend
• Data displayed using on a View frontend using data-binding and a v-for loop.

📷 Screenshots

📶 Technologies

Frontend:

• Vue framework v2
• Vue Router v3 the official router for Vue.js
• Vue CLI v4
• Material UI icons
• Vuetify colors
• Bulma v0.9.2 CSS framework via CDN
• Axios v0.19.2, a promise-based http client, used to consume API data.
• Vue DevTools extension for Chrome

Backend:

• Express v4
• Mongoose v5
• cors v2 Cross Origin Resource Sharing Connect/Express middleware
• Morgan v1 HTTP request logger middleware for node.js

💾 Setup

/client Frontend:

• npm run lint to lint files
• npm run serve to run server. Navigate to http://localhost:8080/. The app will automatically reload if you change any of the source files. It was necessary to install webpack@4 (i.e. NOT webpack@5), uninstall sass-loader then run npm install --save-dev sass-loader@10.1.1 and npm i --legacy-peer-deps to fix errors/dependency issues. Lots of deprecation warnings during compile. Better to create a new Vue app than to update dependencies in this one.

/ Backend:

• Create .env file and add MONGO_URI string and PORT number - as shown in .env.example
• npm run start to run node.js server. Navigate to http://localhost:3000/ to see JSON object with todos or an empty array. CRUD operations can be performed on this backend using the Postman API dev tool.

/ Full stack:

• npm run dev to run client and backend server concurrently. Navigate to http://localhost:8080/ to see frontend and http://localhost:3000/ to see backend.

💻 Code Examples

• POST route

router.post("/", async (req, res) => {
  const newChecklistItem = new ChecklistItem(req.body);
  try {
    const checklistItem = await newChecklistItem.save();
    if (!checklistItem) throw new Error("Error saving checklist item");
    res.status(200).json(checklistItem);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

🆒 Features

• Front and backends can be run with one command using concurrently set up in package.json

📋 Status & To-Do List

• Status: Working. Updated june 2021.
• To-Do: Front: change vue-card layout, make into component, add category dropdown and sort by category. Add vuex state management. Unused nav views - use or delete.

👏 Inspiration

• Vue CLI Configuration Reference

📁 License

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

✉️ Contact

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