Build a MERN stack app (without over complicating it)

Setting Up a Basic MERN Stack Project

This guide aligns with an upcoming video on my YouTube channel, where I'll walk through setting up a basic MERN stack project from scratch. Let's get started!

1. Initialize the Project

Start by creating a project directory and navigating into it:

mkdir mern-app && cd mern-app

2. Set Up the Backend (Express + Node.js)

Create a backend folder and initialize a Node.js project:

mkdir backend && cd backend
npm init -y

Install necessary dependencies:

npm install express cors dotenv

Create an index.js file in the backend directory and add:

const express = require("express");
const cors = require("cors");
const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());

app.get("/api", (req, res) => {
  res.json({ message: "Hello World!" });
});

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

3. Set Up the Frontend (React)

Go back to the root directory and create a React app:

cd ..
npx create-react-app frontend

Navigate into the frontend directory and install Axios to handle API requests:

cd frontend
npm install axios

Replace the contents of src/App.js with:

import { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    axios.get("http://localhost:5000/api").then((res) => {
      setMessage(res.data.message);
    });
  }, []);

  return <h1>{message}</h1>;
}

export default App;

4. Run Both Frontend and Backend Simultaneously

Install concurrently in the root directory:

cd ..
npm install concurrently --save-dev

Modify package.json in the root directory to include a start script:

"scripts": {
  "start": "concurrently \"cd backend && node index.js\" \"cd frontend && npm start\""
}

Now, run the entire project with:

npm start

Your backend will serve "Hello World!" to the frontend, which will display it in an <h1> tag. Stay tuned for the video where I demonstrate this process in action! 🚀