Starting over a MERN Stack Project:Basic understanding

Let's work with the MERN Stack project.Before starting the new project all you need to know is ,what it MERN Stack ? how does this works? and what we get as an output?And Y only MERN choosen in your project?

So, I think you all know the answers for the above questions.If,not use google gifts,and ai tool gifts to get urself a better understanding(never missuse a thing we get free!).Now, I hope all got the reason to start over with me.Let's dive in.

Understanding and Building things from scratch

Y from scratch? coz,we all love to grab the left overs ,right!if we stuck there and there is no chance to turn back and even don't know to move further ,what would you do? (reply this in comment section).This is y !I think u got me ,now let's start!

*Step1: *
1.Create a folder - MernApp
2.add the package.json file to it from terminal.
npm init -y
you will get initially

{
  "name": "MernApp",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

3.add up basic dependencies(ensuring node is installed in ur system).

npm i express mongoose nodemon 

4.see the updated package.json -> u'll see the updated dependencies section, and the added field of nodemodules folder

  "dependencies": {
    "express": "^4.21.2",
    "mongoose": "^8.10.1",
    "nodemon": "^3.1.9"
  }

5.Then, create a server.js file in MernApp project.which is the naming convention to work with server side.

Now, let's setup the server

1.initialize the express server

import express from "express"; 
const app = express();

2.request the server to run on specific port to check the results and updates of the server side changes.Let's say port = 3000

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

3.now start the server by running node server.js

u can either set the scripts to run,from package.json add the field inside the scripts field.

"dev": "node server.js" 
          (or)
"dev": "nodemon server.js" //to get updated on automatically without restarting the server.

Now, start the server by running
npm run dev

Hurray! ur server is live.

Now let's go further

Let's understand the terminologies here,about request and response

when we visit a website ,let's say Flipkart observe the url part
1.we get this url
https://www.flipkart.com/
2.when u click on login or signup,it changes
https://www.flipkart.com/account/login?signup=true&ret=/
also the screen i.e pages also changes.and this process is similar to rendering.
when a user requests for a particular resource it will be rendered as a response nd requests may be 'n' number but to get the response we must request something unique.

and if you understand that terminology.Now let's see in our example.

app.use(express.json())//to enable json parsing in req and res.

app.get('/', (req, res) => {
console.log("Visited the localhost:3000");
res.json("Welcome!"); //this is shown only when u set the app.use(express.json()) after initialization
}

visit the site and u will see Welcome messg in json format!

Welcome to full stack development role

That's all for now.
Updates ,queries ,requests,suggestions everything is open for u all and me as well.

We r community ,and we shouldn't hesitate to help each other.Help me out guys!And let me know ,if my post was helpful
Happy exploring,stay tuned for updates.Have a great day ahead. bye bye!