DEV Community: Martin Isonguyo

Why I Want to Be a Front-End Developer and How HNG Will Help Me Achieve My Goals

Martin Isonguyo — Thu, 30 Jan 2025 16:22:57 +0000

Why Frontend Development

Technology has always fascinated me, but it was my curiosity about the workings of the web that led me to frontend development. Coming from a marine engineering background, I soon realised the need for more innovative solutions in the maritime industry. This inspired me to transition fully into tech, where I could blend creativity with problem-solving to build impactful solutions.

Frontend development excites me because it allows me to bridge the gap between complex problems and user-friendly solutions. My goal is to continue refining my skills to build seamless, efficient, and engaging web experiences.

How HNG Can Help

The HNG Internship is an incredible opportunity to improve my skills through real-world projects, mentorship, and collaboration. It provides a structured environment where I can learn industry best practices, work on team-based tasks, and gain hands-on experience with modern frontend technologies.

One of the key benefits of HNG is its exposure to high-demand frameworks like React, and Next.js. By learning from experienced developers and participating in real-life challenges, I’ll sharpen my problem-solving skills and improve my ability to write clean, maintainable code. Additionally, networking with like-minded individuals will expand my professional connections and open doors for future career opportunities.

My Goals for the HNG Internship

1. Strengthen My Frontend Development Skills: I aim to become proficient in building scalable and responsive applications. By actively engaging in tasks and seeking feedback from mentors, I’ll refine my ability to create efficient user interfaces.

2. Contribute to Real-World Projects: During the internship, I plan to collaborate on projects that align with my interests in maritime digitalization. By leveraging Vue.js, I’ll work on interactive applications that solve real problems.

3. Build a Strong Professional Network: Connecting with fellow developers and industry experts will be crucial for my growth. I’ll actively participate in discussions, share my learnings, and seek mentorship opportunities.

4. Improve My Problem-Solving Abilities: Through coding challenges and debugging exercises, I’ll enhance my ability to write optimized code and solve frontend development issues efficiently.

For businesses looking to build dynamic web applications, they can Hire Vue.js Developers to create seamless user experiences. The demand for frontend developers continues to grow, and this internship is the perfect platform to refine my skills and contribute to impactful projects.

In conclusion, my journey into frontend development is fueled by a passion for creating digital solutions that enhance industries like maritime technology. With HNG’s structured training, mentorship, and real-world experience, I am confident that I will achieve my goal of becoming a skilled frontend developer ready to tackle industry challenges.

The distinctions between React and Vue

Martin Isonguyo — Sat, 29 Jun 2024 09:46:22 +0000

Frontend development is a technical skill that involves using various technical tools to create the interactive part of a website or web application.
A front-end developer achieves this by using languages like HTML, CSS, and JavaScript.
HTML is a markup language used to develop a website's structure. CSS is responsible for the website's beauty, while JavaScript is used to program its behavior.
Various frameworks enable a front-end developer to build user-friendly and responsive websites. Some of these frameworks are React and Vuejs.

What is React?

React is a JavaScript web framework for building interactive web interfaces. React is a component-based framework that allows developers to create reusable components. It functions by creating a virtual DOM of the real DOM, which it uses to efficiently update changes without re-rendering the entire page of a website.

What is Vue?

Vue is also a component-based JavaScript web framework that allows the creation of beautiful web user interfaces. Its key feature is its reactive data binding system. This allows developers to create dynamic and interactive web interfaces by automatically updating the DOM when the underlying data changes.

React vs Vue.

Vue and React share many similarities in their purpose and mode of operation. However, several distinctions between them make each ideal for specific business scenarios.

Similarities

They are both JavaScript web frameworks.
They employ a component-based approach.
The virtual DOM system is used for efficient rendering of pages.
They have a large community.

Differences

Vue is easier to learn for beginners compared to React.
React uses the JSX approach for development, while Vue uses a template-based system.
Vue is a lighter-weight framework more suitable for small and medium-scale projects than React.
React has a larger community and offers more job opportunities than Vue.
Vue has an in-built state management system, while React relies on libraries.

Summary

React and Vue are very efficient JavaScript frameworks. In deciding which one to use for your projects, balance your skill sets and the project's demands.

HOW TO BUILD A MEVN APP WITH VITE FRONTEND (PART 3)

Martin Isonguyo — Mon, 21 Aug 2023 15:43:54 +0000

CONFIGURE APP FOR PRODUCTION

Congratulations! You have successfully developed your MEVN CRUD application, but we need to do some configuration to run it in a production environment.
First, go to your vite.config.js file in your client folder and add the following to defineConfig method:

build: {
    // generate manifest.json in outDir
    manifest: true,
    rollupOptions: {
      // overwrite default .html entry
      input: './src/main.js',
    },
  },

This instructs Vite to generate a Manifest file when building our frontend, with src/main.js serving as the entry point.

We must now update our index.html.ejs to allow us to switch rendering between development and production. ejs template engine makes this task easy to accomplish; it allows us to embed executable Javascript code in our HTML file.
Go to your index.html.ejs file in your views folder and replace the content with the following:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + MEVN</title>
  <% if (environment==='production' ) { %>
    <link rel="stylesheet" href="<%= manifest['src/main.css'].file %>" />
    <% } %>
</head>

<body>
  <div id="app"></div>

  <% if (environment==='production' ) { %>
    <script type="module" src="<%= manifest['src/main.js'].file %>"></script>
    <% } else { %>
      <script type="module" src="http://localhost:5173/@vite"></script>
      <script type="module" src="http://localhost:5173/src/main.js"></script>
      <% } %>
</body>

</html>

Some JavaScript conditions have been added between <% %> tags that ejs must execute to decide which stylesheets and scripts to execute.

Head over to your server folder and replace the contents of homeRouter.jsfile with the following:

//homeRouter.js
import express from "express";
import path from "path";
import { fileURLToPath } from "url";
import fs from "fs/promises";

const router = express.Router();
const __filename = fileURLToPath(import.meta.url);

const __dirname = path.dirname(__filename);

const environment = process.env.NODE_ENV;

router.get("/*", async (_req, res) => {
  const data = {
    environment,
    manifest: await parseManifest(),
  };

  res.render(
    path.join(__dirname, "../../client/views", "index.html.ejs"),
    data
  );
});

const parseManifest = async () => {
  if (environment !== "production") return {};

  const manifestPath = path.join(
    __dirname,
    "../../client",
    "dist",
    "manifest.json"
  );
  const manifestFile = await fs.readFile(manifestPath);

  return JSON.parse(manifestFile);
};

export default router;

A new path has been created for our home page router to render from the manifest file in production environment.

If you did the optional section in Part 2, you must create a file path for your production assets so they can load in a production environment.
Add the following to your index.js file:

// index.js
---
const distPath = path.join(path.resolve(), "../client/dist"); // production assets file path

---

// Create route
// Assets path based on the environment running
if (process.env.NODE_ENV === "production") {
  app.use("/", express.static(distPath));
} else {
  app.use("/", express.static(publicPath));
  app.use("/src", assetsRouter);
}
---

Your final index.js file should look like this:

// index.js
import express from "express";
import mongoose from "mongoose";
import cors from "cors";
import bodyParser from "body-parser";
import dotenv from "dotenv";
import path from "path";
import TodoListRoutes from "./routes/api/TodoList.js";
import homeRouter from "./routes/homeRouter.js"
import assetsRouter from "./routes/assestsRouter.js";

const app = express();
const publicPath = path.join(path.resolve(), "../client/public"); // public assets file path
const distPath = path.join(path.resolve(), "../client/dist"); // production assets file path

dotenv.config();

app.use(cors()); // to allow cross origin requests
app.use(bodyParser.json()); // to convert the request into JSON
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/xwww-

// Connect to database
mongoose
  .connect(process.env.MONGO_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("MongoDB database Connected..."))
  .catch((err) => console.log(err));



// Create route
// Assets path based on the environment running
if (process.env.NODE_ENV === "production") {
  app.use("/", express.static(distPath));
} else {
  app.use("/", express.static(publicPath));
  app.use("/src", assetsRouter);
}
app.use("/api/todoList", TodoListRoutes);
app.use(homeRouter);

app.listen(process.env.PORT, () =>
  console.log(`App is running on http://localhost:${process.env.PORT}`)
);

Lastly, go to to package.json file in your server folder and add the following scripts:

"start": "set NODE_ENV=production&& node index.js --ignore ../client/",
     "build": "npm run build --prefix ../client/"

Run npm run build, then npm start. Your app will run on http://localhost:3000/ in production mode. Hurray! Your app is ready for deployment.

BONUS: HOW TO DEPLOY A NODE.JS APPLICATION ON RENDER

You'll want to see your application live on the internet now that it's ready for deployment. There are a few platforms that provide free Node.js application deployment, but Render is one of the simplest to set up. Render is a unified cloud that allows you to build and host all of your apps and websites while offering free TLS certificates, a global CDN, DDoS protection, private networks, and Git auto deployments.

Create a new Github repo and push your code to it. Ensure to add your dist folder to the staging area and gitignore your .env file.
Sign up or sign in to render dashboard
Click on New + on the top right corner and click Web Service.
Under Github, on the right, click on Configure account.
Under Repository Access, select your repo and click on Save.
Click on the Connect button beside the repository name.
Configure your deployment details as shown in the image below and click on Create Web Service.
After deployment, click the link in the top left corner to visit your live website.

Add .env file to render

After publishing your app, your database data will refuse to load. This is because you did not add your .env file to Github to avoid exposing your database details to the public. To add your .env file to render, follow these steps:

Step 1. Navigate to your render dashboard and click on your deployed app name.

Step 2. Click on Environment on the left menu and scroll to Secret Files. Click on Add Secret File button.

Step 3. Input .env under Filename and click on the Contents input field.

Step 4. In the displayed dialogue box, add your .env file content in the File Contents textarea and click on Done button.

Step 5. Click on Save Changes to complete the process.

CONCLUSION

Full-stack development is the dream of every developer. In this tutorial, we have been able to build a full-stack web application using the MEVN stack. The tutorial is primarily for web developers interested in the MEVN stack, but it is also helpful to any web developer who wants to understand how a full-stack web application works.
The best way to learn any web development stack is by building applications using it. Build as many challenging projects as you can. It will help prepare you for the job market because there are a lot of opportunities for MEVN developers.

If you have any questions or additions, please leave them in the comment section below.

HOW TO BUILD A MEVN APP WITH VITE FRONTEND (PART 2)

Martin Isonguyo — Thu, 17 Aug 2023 10:46:51 +0000

Setting up Vue frontend with Vite

We will use Vite build tool to create our frontend (client). To begin, make sure you're in the root directory mevn-crud and not the server folder.
Execute these commands:

npm create vite@latest client -- --template vue
cd client
npm install
npm run dev

Visit http://localhost:5173/ to see the default interface, which looks like the image below.

Terminate your frontend, go to your server folder, and run npm run dev. It will run the client on http://localhost:5173/ and the server on http://localhost:3000/. We are able to run two commands with the help of concurrently, which we installed at the beginning of the tutorial.

Backend Integration

Now the server and client are running on different ports. We want our applications to interact with each other and for our frontend to be accessible only through the server's port. To be able to run our app in both development and production environments, we will need a template engine. We will use ejs.

Navigate to your client folder and install ejs:

npm install ejs

After installing the ejs template engine, rename index.html to index.html.ejs. Create a views folder in the client directory and move the renamed file into it.

Go to your server folder and also install the ejs engine using the command above.

We will need a router for our home page. Create a new file, homeRouter.js inside routes folder. Copy and paste the following code into your new file:

// homeRouter.js
import express from "express";

const router = express.Router();

router.get("/*", (_req, res) => {
  res.render("../../client/views/index.html.ejs");
});

export default router;

Attach the homeRouter.js file to the app by importing it into index.js file. Add the following to index.js:

---
import homeRouter from "./routes/homeRouter.js";

---

// Create routes
app.use(homeRouter);
---

To finalise our integration, go to index.hmtl.ejs and replace

<script type="module" src="/src/main.js"></script>

with the following:

      <script type="module" src="http://localhost:5173/@vite"></script>
      <script type="module" src="http://localhost:5173/src/main.js"></script>

Run npm run dev in your server folder, then visit http://localhost:3000/ to confirm the application is properly integrated. If everything went fine, your application will look like the image below.

Notice that the Vite and Vue logos refused to load. This is because our server could not access the locations of the images. The next section will show you how to set up routes for your images and other assets. It is an optional section; you can ignore it and go to Building CRUD application frontend section.

Optional: Set up routes for frontend assets

Add the following code to your index.js file:

//index.js
import path from "path";

---

const publicPath = path.join(path.resolve(), "../client/public");

---

// Create routes
app.use("/", express.static(publicPath));

We have successfully loaded our Vite logo, but the Vue logo refuses to load. Our Vue logo is not located in the public directory, so we will need a special route for all assets whose path starts with /src.
Create a file named assetsRouter.js in your routes folder and add the following code:

//assetsRouter.js
import express from "express";

const router = express.Router();

const supportedAssets = ["svg", "png", "jpg", "png", "jpeg", "mp4", "ogv"];

const assetExtensionRegex = () => {
  const formattedExtensionList = supportedAssets.join("|");

  return new RegExp(`/.+\.(${formattedExtensionList})$`);
};

router.get(assetExtensionRegex(), (req, res) => {
  res.redirect(303, `http://localhost:5173/src${req.path}`);
});

export default router;

Attach it to your index.js file:

//index.js
import assetsRouter from "./routes/assestsRouter.js";

---

// Create routes
app.use("/src", assetsRouter);

All images now load successfully.

Building CRUD application frontend

You have come a long way; truly, you deserve the accolades.

We have successfully loaded our frontend on our server, but we need to ensure that our client can actually interact with our server. We will create a simple frontend that will consume our CRUD API.

We will use axios to consume our API, so install axios in your client folder.

npm i axios

Go to your src folder and delete the components folder and everything in it. Replace the contents of your App.vue file with the following:

<template>
  <main>
    <h1 class="title">MEVN CRUD APP</h1>

    <form @submit.prevent="addTodo" method="post">
      <input class="input" v-model="title" type="text" name="name" placeholder="Enter todo" />
      <input class="input" v-model="description" type="text" name="description" placeholder="Enter Description" />
      <button type="submit" class="submit-btn">Add Todo</button>
    </form>
    <div class="todo-wrapper">
      <h2 class="caption">Todo List</h2>
      <div v-if="todos.length < 1">Todo list is empty</div>
      <ul v-else>
        <li class="todo-item" v-for="(todo, i) in todos" :key="todo._id">
          <div class="todo">
            <h3 class="todo-title">{{ todo.title }}</h3>
            <span class="todo-description">{{ todo.description }}</span>
          </div>

          <div class="update-form" id="updateForm">
            <input type="text" name="updateTitle" id="updateTodo" v-model="updateTitle" />
            <br />
            <input type="text" name="updateDescription" id="updateTodo" v-model="updateDescription" />
          </div>
          <div class="todo-btns">
            <button type="button" class="edit-btn" @click="updateTodo($event, todo._id, i, todo)">
              Edit
            </button>
            <button type="button" class="del-btn" @click="delTodo(todo._id, i)">
              Delete
            </button>
          </div>
        </li>
      </ul>
    </div>
  </main>
</template>

<script>
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      title: "",
      description: "",
      todos: [],
      updateTitle: "",
      updateDescription: "",
    };
  },
  mounted() {
    this.getTodos();
  },
  methods: {
    async getTodos() {
      const res = await axios.get("/api/todoList");
      this.todos = res.data;
    },

    async addTodo() {
      const res = await axios.post("api/todoList/", {
        title: this.title,
        description: this.description,
      });
      this.title = "";
      this.description = "";
    },

    async delTodo(id) {
      await axios.delete(`api/todoList/${id}`);
    },

    async updateTodo(event, id, i, todo) {
      const updateForm = document.getElementsByClassName("update-form");
      const updateFormArray = [...updateForm];
      updateFormArray.forEach(async (el) => {
        if (updateFormArray.indexOf(el) === i) {
          if (!el.classList.contains("active")) {
            el.classList.add("active");
            this.updateTitle = todo.title;
            this.updateDescription = todo.description;
            event.target.innerHTML = "Save";
          } else {
            const res = await axios.put(`api/todoList/${id}`, {
              title: this.updateTitle,
              description: this.updateDescription,
            });
            event.target.innerHTML = "Edit";
            el.classList.remove("active");
            this.updateTitle = "";
            this.updateDescription = "";
          }
        }
      });
    },
  },
  watch: {
    todos() {
      this.getTodos(); // Watch todos list for any change
    },
  },
};
</script>

Then replace your style.css file content with this

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 40px 5%;
}

main {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.title {
  text-align: center;
  margin-bottom: 30px;
}

.input {
  padding: 20px;
  display: block;
  width: 100%;
  margin: 0 auto 10px;
}

.submit-btn {
  display: block;
  padding: 20px;
  border: 0;
  background-color: green;
  color: white;
  width: 100%;
  margin: 20px auto 0;
  cursor: pointer;
}

.todo-wrapper {
  margin-top: 50px;
}

.todo-wrapper .caption {
  margin-bottom: 15px;
}

.todo-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(207, 236, 207);
  padding: 10px;
}

.todo-item:nth-child(even) {
  background-color: white;
}

.todo-title {
  margin-bottom: 7px;
}

.todo-btns button {
  padding: 10px;
  cursor: pointer;
  border: 0;
}

.edit-btn {
  background-color: green;
  color: white;
  margin-right: 7px;
}

.del-btn {
  background-color: red;
  color: white;
}

.update-form {
  position: absolute;
  display: none;
}

.update-form input {
  padding: 7px;
  border: 0;
}

.update-form.active {
  display: block;
}

Run your app. You should be able to load, create, update, and delete from your frontend if everything went well.

Summary

We have successfully developed our MEVN Crud App. In this part, we were able to set up our Vue frontend with Vite build tool and also integrate it with our backend. Finally, we created the frontend of our application, where we consume the API we created in Part 1.

Part 3 of this series will cover the configuration needed for our application to be production-ready. It also comes with a bonus you won't want to miss.

Github Repository: https://github.com/isonguyom/mevn-crud
Live Demo: https://mevn-crud.onrender.com/

If you have any questions or additions, please leave them in the comment section below.

HOW TO BUILD A MEVN APP WITH VITE FRONTEND (PART 1)

Martin Isonguyo — Mon, 07 Aug 2023 15:56:26 +0000

Full-stack web development describes the process of building the frontend and backend of a web application. It uses several technologies to accomplish this task; these technologies are collectively referred to as full-stack web development stack. There are several full-stack web development stacks, but we will be discussing the MEVN stack.

This is a three-part tutorial; try to understand each step and have fun while at it. See you on the other side!

WHAT IS MEVN?

MEVN is a full-stack JavaScript web development stack that comprises MongoDB, Express.js, VueJS, and NodeJS. It has grown in popularity in recent times, and it is a highly scalable stack. Its scalability makes it a great choice for developers building small projects and enterprise-level applications.

MongoDB is a document-based database that stores data in a JSON-like format.

Express.js is a lightweight Node.js web application framework. It provides robust features and utilities that make building APIs and routing easy.

Vue.js is a modern progressive frontend JavaScript framework used for building user-friendly interfaces. It is designed to be approachable and easy to integrate for building interactive and dynamic web applications.

Node.js is a server-side JavaScript runtime environment that allows developers to run JavaScript code on the server. It is asynchronous, event-driven, and highly scalable for developing servers and databases.

WHAT IS VITE?

Vite is a build tool and development server that allows for quick and efficient frontend development. It is frequently used with modern frontend frameworks such as Vue.js, React, and Svelte.

BUILDING OUR APPLICATION

We will be building a simple MEVN CRUD app. First, create a project directory and name it mevn-crud. This is where all the magic will be done, and I am rooting for you.

Create server (backend) with Node.js and Express.js.

Inside your project directory, create a folder named server and navigate into it on your terminal.

Initialise npm:

npm init -y

To use ECMAScript modules, add "type": "module" to your generated package.json file. Your package.json should look like this:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Install necessary dependencies:

npm i express mongoose body-parser cors dotenv

We will also need nodemon and concurrently for a better development experience. Nodemon reloads the server automatically whenever there is a change in any server file. Concurrently, enable us to run multiple node commands together.

Install nodemon and concurrently as dev dependencies:

npm install --save-dev nodemon concurrently

Update scripts in package.json:

"scripts": {
    "dev:server": "nodemon index.js --ignore ../client/",
    "dev:client": "npm run dev --prefix ../client/",
    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\""
  },

We need an entry point for our server now that we have finished installing our dependencies and configuring our package.json file.

Create a new file called index.js and add the following code to it:

// index.js
import express from "express";

const app = express();
const PORT = 3000;

app.get("/", (req, res) => {
  res.send("Hello World");
});

app.listen(PORT, () => {
  console.log(`App is running on http://localhost:${PORT}`);
});

Run npm run dev:server in your server folder to start your server, and visit http://localhost:3000/, where you will see Hello, World! displayed.

Kudos! Your server is set.

Setup MongoDB database and connect the server using mongoose

Step 1. Create an account or sign in to MongoDB Atlas.

Step 2. On the Deploy your database page, select the M0 free plan, allow other default settings, and click on the Create button.

Step 3. Highlight the Username and Password option if it is not already highlighted. Specify a username and password and click on Create User button. Keep your password safe; you will need it later.

Step 4. Scroll down and highlight My Local Environment. Input 0.0.0.0/0 under IP address and click on the Add Entry button. This will allow access to your Atlas cluster from anywhere. Click on Finish and Close when you are done and go to overview.

Step 5. Locate and click on the connect button under your cluster.

Step 6. On the displayed menu, click on Drivers under Choose Your Application. Copy the Mongo URL, which starts with mongodb+srv.

Step 7. Go back to your application and create a .env file in your server folder and add MONGO_URI and PORT.

MONGO_URI='<mongdb_uri>'
PORT=3000

Ensure that you replace the password in your mongdb_uri with the user password you generated.

Step 8. Replace your index.js code with the following:

// index.js
import express from "express";
import mongoose from "mongoose";
import cors from "cors";
import bodyParser from "body-parser";
import dotenv from "dotenv";

const app = express();
dotenv.config();

app.use(cors()); // to allow cross origin requests
app.use(bodyParser.json()); // to convert the request into JSON
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/xwww-

// Connect to database
mongoose
  .connect(process.env.MONGO_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("MongoDB database Connected..."))
  .catch((err) => console.log(err));

app.listen(process.env.PORT, () =>
  console.log(`App is running on http://localhost:${process.env.PORT}`)
);

>

Run npm run dev:server to check if everything is working fine. MongoDB database Connected... will be printed on your terminal if the server is properly connected to Mongo Atlas.

Create a basic schema with mongoose

Create a models folder inside your server folder and create a Todo.js file inside it. Add the following code to create a schema:

import { Schema, model } from "mongoose";

const TodoSchema = new Schema({
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
});

const Todo = model("todo", TodoSchema);

export default Todo;

Create API routes

Create TodoList.js inside /routes/api folder in the server folder. Use the following code to create CRUD API endpoints:

//TodoList.js
import { Router } from "express";
import Todo from "../../models/Todo.js";

const router = Router();

router
  .route("/")

// Get all todos in the database
  .get(async (_req, res) => {
    try {
      const todoList = await Todo.find();
      if (!todoList) throw new Error("No Todo List found");
      res.status(200).json(todoList);
    } catch (error) {
      res.status(500).json({ message: error.message });
    }
  })

  //Post request creates a new todo in the database
  .post(async (req, res) => {
    const newTodo = new Todo(req.body); // create a new instance of the Todo model
    try {
      const todo = await newTodo.save(); // Save created todo
      if (!todo) throw new Error("Something went wrong saving the Todo");
      res.status(200).json(todo);
    } catch (error) {
      res.status(500).json({ message: error.message });
    }
  });

router
  .route("/:id")

  // Update the todo with the given id
  .put(async (req, res) => {
    const { id } = req.params;
    try {
      const updated = await Todo.findByIdAndUpdate(id, { ...req.body });
      if (!updated) throw Error("Something went wrong ");
      res.status(200).json(updated);
    } catch (error) {
      res.status(500).json({ message: error.message });
    }
  })

  // Delete the todo with the given id
  .delete(async (req, res) => {
    const { id } = req.params;
    try {
      const removed = await Todo.findByIdAndDelete(id);
      if (!removed) throw Error("Something went wrong ");
      res.status(200).json(removed);
    } catch (error) {
      res.status(500).json({ message: error.message });
    }
  })

  // Get the todo with the given id
  .get(async (req, res) => {
    const { id } = req.params;
    try {
      const todo = await Todo.findById(id);
      if (!todo) throw new Error("No Todo found");
      res.status(200).json(todo);
    } catch (error) {
      res.status(500).json({ message: error.message });
    }
  });

export default router;

Import the TodoList.js file into the index.js file and create an API route for it. Add the following code to index.js:

// index.js

import TodoListRoutes from "./routes/api/TodoList.js";

---

// Create routes
app.use("/api/todoList", TodoListRoutes);

Use any preferred API testing tool, like Insomnia, to test your API. Ensure all requests (POST, GET, PUT, and DELETE) are working.

Summary

Wow! You've made great strides. You have successfully created a Node.js/Express.js CRUD app with a Mongo Atlas connection. Take a break and return for Part 2, where we will set up our Vue3 client (frontend) to consume our API.

Github Repository: https://github.com/isonguyom/mevn-crud
Live Demo: https://mevn-crud.onrender.com/

If you have any questions or additions, please leave them in the comment section below.