Creating Your First API in a MERN Project

afaq_shahid

Afaq Shahid Khan

Posted on June 28, 2024

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
Enter fullscreen mode Exit fullscreen mode

Install the necessary dependencies.

npm install express mongoose dotenv
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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',
  });
};
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

💖 💪 🙅 🚩
afaq_shahid
Afaq Shahid Khan

Posted on June 28, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related