Creating Your First API in a MERN Project

Hello, fellow developers! 🌟

In this post, we'll walk through creating your first API in a MERN (MongoDB, Express.js, React, Node.js) project using ES6 modules and modern JavaScript features. This guide is perfect for beginners who want to get started with the basics.

Prerequisites

Before we start, ensure you have the following installed on your machine:

• Node.js
• npm (Node Package Manager)
• MongoDB (you can use MongoDB Atlas for a cloud-based solution)
• A code editor (VS Code is a popular choice)

Step 1: Setting Up the Project

First, let's create our project directory and set up a new Node.js project.

mkdir mern-api
cd mern-api
npm init -y

Install the necessary dependencies.

npm install express mongoose dotenv

Step 2: Creating the Server with Express

Create a file named server.js in your project root and add the following code:

import express from 'express';
import mongoose from 'mongoose';
import dotenv from 'dotenv';
import userRoute from './routes/user.route.js';

dotenv.config();

mongoose
  .connect(process.env.MONGO)
  .then(() => {
    console.log('mongodb is connected');
  })
  .catch((err) => {
    console.log(err);
  });

const app = express();

app.listen(3000, () => {
  console.log('express is working!!!');
});

app.use('/api/user', userRoute);

Step 3: Defining a Model

Create a new directory called models and inside it, create a file named User.js:

import mongoose from 'mongoose';

const userSchema = new mongoose.Schema(
  {
    username: {
      type: String,
      required: true,
      unique: true,
    },
    email: {
      type: String,
      required: true,
    },
  },
  { timestamps: true }
);

const User = mongoose.model('User', userSchema);
export default User;

Step 4: Creating a Controller

Create a new directory called controllers and inside it, create a file named user.controller.js:

export const test = (req, res) => {
  res.json({
    message: 'Test api is working',
  });
};

Step 5: Creating Routes

Create a new directory called routes and inside it, create a file named user.route.js:

import express from 'express';
import { test } from '../controllers/user.controller.js';

const router = express.Router();

router.get('/test', test);

export default router;

Step 6: Integrating Routes in Server

Ensure your server.js uses the newly created routes:

import express from 'express';
import mongoose from 'mongoose';
import dotenv from 'dotenv';
import userRoute from './routes/user.route.js';

dotenv.config();

mongoose
  .connect(process.env.MONGO)
  .then(() => {
    console.log('mongodb is connected');
  })
  .catch((err) => {
    console.log(err);
  });

const app = express();

app.listen(3000, () => {
  console.log('express is working!!!');
});

app.use('/api/user', userRoute);

Step 7: Testing Your API

To test your API, you can use tools like Postman or Insomnia.

GET Test Route

GET http://localhost:3000/api/user/test

Congratulations!

You've successfully created your first API in a MERN stack project using modern JavaScript features. This is just the beginning; you can now expand on this by adding more routes, implementing user authentication, and much more.