MEVN ToDo App

• A MEVN Full-stack todo app using MongoDB, Express.js, Vue and Node.js.
• Note: to open web links in a new window use: ctrl+click on link

Table of contents

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Contact

General info

• The project is a MEVN full stack, so it has 2 separate parts: a client-side for the frontend Vue framework and a server-side for the backend calls.
• The MongoDB database runs on Mongo Atlas, collection name 'test'. This collection is accessed from the backend Node server file './src/app.js'. Axios is used to push Todo inputs to the server app.js file then mongodb is used to write the data to the database.

Screenshots

Technologies

• MongoDB Atlas using AWS Cloud storage.
• Express v4
• Vue v2
• Node.js v14

Setup

• To start the Vue frontend: In the Client directory install dependencies using "npm install", then run frontend using "npm run dev".
• To start the Node.js backend: In the Server directory install dependencies using "npm install", then run backend using "npm start".

Code Examples

• Example of Backend code:

`// define route to get todos
app.get('/todo', (req, res) => {
  const collection = client.db("test").collection("todos");
  collection.find().toArray(function (err, results) {
    if (err) {
      console.log(err);
      res.send([]);
      return;
    }
    res.send(results);
  })
})
const port = 8082
app.listen(process.env.PORT || port) // client is already running on 8080`

• Example of Frontend code:

import ToDoAPI from '@/services/ToDoAPI.js'

// data object returns existing Todo list then lifecycle hook 'mounted' used to show Todos
export default {
  data () {
    return {
      newTodo: '',
      todos: []
    }
  },
  mounted () {
    this.loadTodos()
  },
  methods: {
    async addTodo (evt) {
      evt.preventDefault() // prevents the form's default action from redirecting the page
      const response = await ToDoAPI.addTodo(this.newTodo)
      this.todos.push(response.data)
      this.newTodo = '' // clear the input field
    },
    deleteTodo (todoID) {
      ToDoAPI.deleteTodo(todoID)
      // remove the array element with the matching id
      this.todos = this.todos.filter(function (obj) {
        return obj._id !== todoID
      })
    },
    async loadTodos () {
      const response = await ToDoAPI.getToDos()
      this.todos = response.data
    }
  }
}

Features

• Working Todo list - frontend and backend fully functional. Webpack framework is not deprecated. Do not update dependencies or lots of Webpack problems appear.

To-do list

• Nothing

App Status

• Working basic Vue frontend and MongoDB backend.

Inspiration

• App created using Medium articles by Matt Maribojoc "Creating a ToDo App with a MEVN Full Stack": Part 1 & Part 2.

📁 License

• N/A.

✉️ Contact

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