Creating Your First API in a MERN Project
Tags: webdev, react, mongodb, express
Published: 2024-06-28 12:25:32


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.

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

Install the necessary dependencies.

```bash
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:

```javascript
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`:

```javascript
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`:

```javascript
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`:

```javascript
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:

```javascript
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.