DEV Community

Cover image for Create a Full Stack Mern Social Media Application - Part 1
Ayush Deb
Ayush Deb

Posted on

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.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay