Create a Full Stack Mern Social Media Application - Part 1

Hi Guys,

This is my first full stack applications to put all my skills to use and highlight this in my resume to crack a full time Software Developer Role. So this is how I started.

First we are creating our server then we will code our client side.

SERVER

1. Install all the Dependencies

How to : - npm - i express brcypt ....

• express
• body-parser
• bcrypt
• cors
• dotenv
• gridfs-stream
• multer-gridfs-storage
• helmet
• morgan
• jsonwebtoken
• mongoose

1. Create a index.js file with importing all the dependencies

import express from "express";
import bodyParser from "body-parser";
import mongoose from "mongoose";
import cors from "cors";
import dotenv from "dotenv";
import multer from "multer";
import helmet from "helmet";
import morgan from "morgan";
import path from "path";
import { fileURLToPath } from "url";

Note: - fileURLToPath in Node.js is a function that takes a special kind of URL (called a file URL) and turns it into a regular file path that your operating system can understand.

For example, a URL like file:///C:/path/to/file isn't something you can directly use with file system functions in Node.js, but by using fileURLToPath, it becomes something like C:\path\to\file on Windows or /path/to/file on Linux

1. Adding the configurations

1. const __filename = fileURLToPath(import.meta.url);

What it does: This converts the file's URL (which is provided by import.meta.url) into a path that the operating system understands.

Why it's used: It helps you get the full file path of the current file, which is especially useful in ES modules where __filename isn't available by default.

2. const dirname = path.dirname(filename);

What it does: This extracts the directory name of the current file from the file path.

Why it's used: It allows you to know the directory where the current file is located, which is useful for working with relative paths (e.g., serving static files).

3. dotenv.config();
What it does: This loads environment variables from a .env file into process.env.

Why it's used: It helps you securely store configuration like API keys and database URLs in an external file without hardcoding them into your code.

4. const app = express();

What it does: This creates an Express application instance.

Why it's used: Express is a framework for building web servers and APIs. This line initializes the app so you can start adding routes and middleware.

5. app.use(express.json());

What it does: It allows the Express app to automatically parse incoming JSON requests (for example, when someone sends JSON data in a POST request).

Why it's used: This makes it easier to handle JSON data in your API or web server.

6. app.use(helmet());

What it does: Helmet is a middleware that adds security-related HTTP headers to your app.

Why it's used: It helps improve security by setting headers that protect against various web vulnerabilities like cross-site scripting (XSS) and clickjacking.

7. app.use(helmet.crossOriginResourcePolicy({ policy: "cross-origin" }));

What it does: This adds a policy to allow resources from your server to be accessed by external domains (cross-origin).

Why it's used: It provides a layer of control over what resources can be shared across different websites, while still maintaining security.

8. app.use(morgan("common"));

What it does: Morgan is a middleware for logging HTTP requests. Here, it’s set to log in the "common" format.

Why it's used: It helps track incoming requests for debugging, analytics, or monitoring purposes.

9. app.use(bodyParser.json({ limit: "30mb", extended: true }));

What it does: This allows the app to handle large JSON payloads (up to 30MB) in incoming requests.

Why it's used: If your app is expected to receive large JSON data (e.g., file uploads), you increase the limit so the app can process it.

10. app.use(bodyParser.urlencoded({ limit: "30mb", extended: true }));

What it does: This is similar to the previous line but handles URL-encoded data (like form submissions).

Why it's used: It allows your app to process form submissions with larger amounts of data.

11. app.use(cors());

What it does: CORS (Cross-Origin Resource Sharing) middleware enables your app to accept requests from other domains.

Why it's used: It's necessary if you're building an API or web app that will be accessed from a different domain, such as a front-end app hosted separately.

12. app.use("/assets", express.static(path.join(__dirname, "public/assets")));

What it does: This serves static files (like images, CSS, or JavaScript) from the public/assets directory at the /assets path.

Why it's used: It allows users or browsers to access these files directly by visiting http://yourdomain.com/assets/filename.