⚡ MEVN Stack Notes

Displays simple text notes in a grid of Bootstrap cards.
Uses the MongoDB, Express, Vue & Node.js (MEVN) stack to perform Create, Read, Update and Delete (CRUD) operations.
Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

⚡ MEVN Stack Notes

📚 General info

Axios used to send/receive data from the MongoDB backend
A responsive grid of notes is displayed on the Vue frontend using data-binding and a v-for loop. Once a note is added then the grid of notes is reloaded.
There is an app info. page
Backend node.js code separated into routes/controller files with a Mongoose model Note 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.
The app is deployed on the Heroku 18 stack, based on Ubuntu 18.04

📷 Screenshots

📶 Technologies

Frontend

Vue framework v3
Axios v0.21.1, a promise-based http client, used to consume API data.
vue-axios v3 for integrating axios to Vuejs
Vue DevTools extension for Chrome
Bootstrap v4 components and styles
Vue moment v4 to convert UTC date format
Material svg icons

Backend

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

💾 Setup

Frontend:

from /client directory: 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.
npm run build to create build file

/api Backend:

nodemon server.js to run node.js server.
Navigate to http://localhost:4000/ to see JSON object with todos or an empty array (refresh after changes - does not auto-update).
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:4000/ 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

note.controllers.js - add new note to database using POST


exports.post_note = async (req, res) => {
  const newNote = new Note(req.body);
  try {
    const note = await newNote.save();
    if (!note) throw new Error("Error saving note item");
    res.status(200).json(note);
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};

🆒 Features

In dev - Front and backends are run with one command using concurrently set up in package.json
Display of card array is responsive so they wrap around nicely as screen size changes
Simple 'Notes Hub' tells user how many notes there are and lets them navigate to the add note or app info pages
note max title length set to 23 so it shows on 1 line in card
note max content length set to 280, same as a twitter post
backend code separates controller functions from routes
Updating a note will automatically update the date so it goes to the front of the (date-sorted) notes list

📋 Status & To-Do List

Status: Working & deployed.Don't update Axios or you have to add a lot of strange (AxiosPromise) return types.
To-Do: Fix Websocket error. Consider alternative to Bootstrap to make app lighter - Tailwind

AndrewJBateman/mevn-stack-notes

⚡ MEVN Stack Notes

📄 Table of contents

📚 General info

📷 Screenshots

📶 Technologies

Frontend

Backend

💾 Setup

💻 Code Examples

🆒 Features

📋 Status & To-Do List

👏 Inspiration

📁 License

✉️ Contact

On this page

Languages

Contributors