Scribd
Upload
3 views3 pages

Basic MERN Stack Guide

The document provides a comprehensive guide to setting up a basic MERN stack application without authentication, detailing the architecture, backend setup, environment variables, server configuration, note model, and routes for handling notes. It also includes frontend setup instructions and a sample React component for managing notes. The flow of data between React, Express, Mongoose, and MongoDB is clearly outlined, demonstrating how to create, read, update, and delete notes.

Uploaded by

Faseeh Ur Rehman
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

Basic MERN Stack Guide

The document provides a comprehensive guide to setting up a basic MERN stack application without authentication, detailing the architecture, backend setup, environment variables, server configuration, note model, and routes for handling notes. It also includes frontend setup instructions and a sample React component for managing notes. The flow of data between React, Express, Mongoose, and MongoDB is clearly outlined, demonstrating how to create, read, update, and delete notes.

Uploaded by

Faseeh Ur Rehman
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Complete Basic MERN Stack Guide (No Auth)

Architecture Overview

MERN = MongoDB + Express + React + [Link]

Backend:
- Express server
- MongoDB database
- REST API routes

Frontend:
- React UI
- Axios for HTTP requests

Flow:
React → Express → Mongoose → MongoDB → Response → React UI

Backend Setup Steps

1. mkdir mern-app
2. cd mern-app
3. mkdir backend
4. cd backend
5. npm init -y
6. npm install express mongoose dotenv cors
7. npm install nodemon --save-dev

Environment Variables (.env)

PORT=5000
MONGO_URI=mongodb://[Link]:27017/mernapp

[Link]

const express = require("express");


const mongoose = require("mongoose");
const dotenv = require("dotenv");
const cors = require("cors");

[Link]();
const app = express();

[Link](cors());
[Link]([Link]());

[Link]([Link].MONGO_URI)
.then(() => [Link]("MongoDB Connected"))
.catch(err => [Link](err));

[Link]("/", (req, res) => {


[Link]("API is running...");
});

const PORT = [Link] || 5000;

[Link](PORT, () => {
[Link](`Server running on port ${PORT}`);
});

Note Model (models/[Link])

const mongoose = require("mongoose");

const noteSchema = new [Link]({


title: { type: String, required: true },
content: { type: String, required: true }
}, { timestamps: true });

[Link] = [Link]("Note", noteSchema);

Routes (routes/[Link])

const express = require("express");


const router = [Link]();
const Note = require("../models/Note");

[Link]("/", async (req, res) => {


const note = await [Link]([Link]);
[Link](201).json(note);
});

[Link]("/", async (req, res) => {


const notes = await [Link]();
[Link](notes);
});

[Link]("/:id", async (req, res) => {


const note = await [Link]([Link]);
[Link](note);
});

[Link]("/:id", async (req, res) => {


const updated = await [Link]([Link], [Link], { new: true });
[Link](updated);
});

[Link]("/:id", async (req, res) => {


await [Link]([Link]);
[Link]({ message: "Deleted successfully" });
});

[Link] = router;
Frontend Setup

1. npx create-react-app frontend


2. cd frontend
3. npm install axios

React [Link]

import { useState, useEffect } from "react";


import axios from "axios";

function App() {
const [notes, setNotes] = useState([]);
const [title, setTitle] = useState("");
const [content, setContent] = useState("");

const API = "[Link]

useEffect(() => {
fetchNotes();
}, []);

const fetchNotes = async () => {


const res = await [Link](API);
setNotes([Link]);
};

const createNote = async () => {


await [Link](API, { title, content });
fetchNotes();
};

const deleteNote = async (id) => {


await [Link](`${API}/${id}`);
fetchNotes();
};

return (
<div>
<h1>MERN Notes</h1>
</div>
);
}

export default App;

You might also like