MERN Stack Day 1

Setup Node Js 

Download and install node

https://nodejs.org/en/download/prebuilt-installer


Open CMD and type node -v and npm -v



Create Sample React Js  Project

open CMD or Vs Code and run following Command

npx create-react-app app-name


Run Project ->
open cmd and run

npm start

Create Componant 
install bootstrap Lib

npm install bootstrap
npm install bootstrap-icons


import bootstrap and bootstrap-icons

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';


1 Home Display all Book UI


function Home() {

    return <>
        <>
            <div className=" p-4">
                <div className="row g-4">

                    <ProductCard/>
                    <ProductCard/>
                    <ProductCard/>
                    <ProductCard/>

                </div>
            </div>
        </>
    </>
}

function ProductCard() {
  return <>
    <div className="col-12 col-sm-6 col-lg-3">
      <div className="card">
        <img src="https://i.ibb.co/n8ytJJT/istockphoto-949118068-1024x1024.jpg" className="card-img-top" alt="Card Image"/>
        <div className="card-body">
          <h5 className="card-title">Card 1</h5>
          <p className="card-text">This is a sample card.</p>
        </div>
      </div>
    </div>
  </>
}


Define Routes

Home Books About

Install react-dom
npm install react-router-dom

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
function App() {
  return (
    <>
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<Product />} />
                <Route path="/contact" element={<About />} />
            </Routes>  
        </Router>
      
    </>
  );
}

Home Navigation Header

import React from "react";
import { Link } from 'react-router-dom';
export default function Header() {

    return <>

        <header>
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
                <div className="container">
               
                    <div className="collapse navbar-collapse" id="navbarNav">
                        <ul className="navbar-nav ms-auto">
                            <li className="nav-item">
                                <Link className="nav-link" to="/">
                                    Home
                                </Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/">
                                    Product
                                </Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/about">
                                    About
                                </Link>
                            </li>

                        </ul>
                    </div>
                </div>
            </nav>
        </header>
    </>
}


Dynamic Like Active Property Set

 location = useLocation();


<li className="nav-item">
    <Link className={`nav-link ${location.pathname=='/'?"active":""}`} to="/">
        Home
    </Link>
</li>

Once your Frontend is Complete  then build your react project 

run command 

npm run build


Create Node Express Server (Server.js)

install express Lib

npm install express


Server code

node Server.js  command run server.js 


Step1

npm install express Lib

npm install -g nodemon  (Use for restart server automatically )

now create normal server 
const express = require('express');
const app = express();

// Define a route
app.get('/', (req, res) => {
    res.send('Hello, World!');
});

// Start the server
const PORT = 8008;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

run 

node server.js

http://localhost:8008/


nun server using nodemon

nodemon server.js


===================================================

Now Connect Your React Index.html with Node Server

const path = require('path');

app.use(express.static(path.join(__dirname, 'build')));

// Define a route
app.get('/', (req, res) => {
    // res.send('Hello, World!');
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

nodemon server.js


=======================API Endpoints================ 

Create Simple Post request Endpoints and Test on postman

// Middleware to parse JSON and form data
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

//=======simple Post Request Endpoint
app.post('/Test',(req,res)=>{
    const { email, password } = req.body;
    console.log("Email=",email);
    console.log("Password=",password);
    res.send("ok1");
});

in post man set Header

Request and response Type set in postMan

"Content-Type": "application/json" 

{
  "email": "sair123@abc.com",
  "password": "133344"
}




call this request using HTML Form

<form action={"/Test"} method={"post"}>
    <input type={"email"} nama={"email"}/>
    <input type={"password"} name={"password"}/>
    <input type={"submit"} value={"Log In"} />
</form>

Using ajax method 

install jquery

npm install jquery


import $ from "jquery";
//------------Api Method-------
export async function Post(form, Method) {
    return new Promise(function (success, error) {
        $.ajax({
            url:Method,
            type: "POST",
            data: form,
            success: function (data, txtstatus, res) {
                success(data);
            },
            error: function (data, txtstatus, res) {
                error(data);
            },
            processData: false,
            contentType: false

        });
    });
}

Now Call API using AJAX

function Test() {
  const [email,setEmail]=useState();
  const [password,setPassword]=useState();

  function LogIn() {

      let form=new FormData();
      form.append('',email);
      form.append('',email);
      Post(form,"/Test").then((data)=>{
          alert(data);
      });
  }

    return<>
    <h1>Product</h1>
        {/*action={"/Test"} method={"post"}*/}
    <div >
        <input type={"email"} nama={"email"} onChange={(e)=>{setEmail(e.target.value);}}/>
        <input type={"password"} name={"password"} onChange={(e)=>{setPassword(e.target.value)}}/>
        <input type={"submit"} value={"Log In"} onClick={LogIn} />
    </div>
</>
}

Create Account MongoDB 

https://account.mongodb.com/account/login


download  MongoDb compass

https://www.mongodb.com/try/download/compass


Login MongoBb Online






Create New Project 


============================Screen 2=======================



============================Screen 3=======================

============================Screen 4=======================

Create Cluster

============================Screen 5=======================



============================Screen 6=======================

============================Screen 7=======================
============================Screen 8=======================

============================Screen 9=======================

Done 

now connect MongoDb Service with Compass
Download and install Compass

Step1 Open MongoDB Compass
Add new connection


Now Check 


Create Database and Collection Click + 




Now Perform CRUD Operation using node js

install
npm install express mongoose body-parser

//Import
const mongoose = require('mongoose');

// MongoDB Connection URL
//mongodb://localhost:27017/mydatabase
mongoose.connect('Connection-String/DataBaseName', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});
 // Check connection
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:'));
db.once('open', () => {
    console.log('Connected to MongoDB');
});
Create New Document User

async function Insert() {
    // Define Schema
    const userSchema = new mongoose.Schema({
        email: {type: String, required: true, unique: true},
        password: {type: String, required: true}
    });
    // Create Model
    const User = mongoose.model('User', userSchema);

    try{
        //insert
        const newUser = new User({email:"sabir123@123.com",password:"password111" });
        const savedUser = await newUser.save();
        console.log("Insert Data Success.",savedUser);
    }catch (e) {
        console.log("Error=",e);
    }
}
Update
async function Update() {
    const ID="673dc1baf6d3b20116e13ffd";
    // Define Schema
    const userSchema = new mongoose.Schema({
        email: {type: String, required: true, unique: true},
        password: {type: String, required: true}
    });
    // Create Model
    const User = mongoose.model('User', userSchema);
    //Update By Id
    const updatedUser=await User.findByIdAndUpdate(
        ID,
        {
            email:"abc@xyz.com",
            password:"abc123"
        },
        { new: true } // Return the updated document
    );
    console.log("Update Success",updatedUser);
}
Delete

async function Delete() {
    const ID="673dc1baf6d3b20116e13ffd";
    // Define Schema
    const userSchema = new mongoose.Schema({
        email: {type: String, required: true, unique: true},
        password: {type: String, required: true}
    });
    // Create Model
    const User = mongoose.model('User', userSchema);
    //Delete
    const deletedUser = await User.findByIdAndDelete(ID);
    if (deletedUser) {
        console.log("Delete Success.", deletedUser);
    } else {
        console.log("User not found.");
    }
}
Read
// Define Schema
const userSchema = new mongoose.Schema({
    email: {type: String, required: true, unique: true},
    password: {type: String, required: true}
});
// Create Model
const User = mongoose.model('User', userSchema);
async function Read() {
   //Read UserData
    const records = await User.find(); // Retrieve all documents
    console.log("All Records with IDs:");
    records.forEach(record => {
        console.log(`ID: ${record._id}, Email: ${record.email}, Password: ${record.password}`);
    });
}
ReadRecord By Email
async function ReadByEmail() {
   //Read UserData
    const records = await User.find({email:"user7@domain.com"}); // Retrieve all documents
    console.log("All Records with IDs:");
    records.forEach(record => {
        console.log(`ID: ${record._id}, Email: ${record.email}, Password: ${record.password}`);
    });
}

Comments

Post a Comment

Popular posts from this blog

My Sql Connection in Node Js CRUD Operation

 Install Lib npm install mysql2 Connect My Sql Database const mysql = require ( 'mysql2' ) ; // Create a MySQL connection const db = mysql. createConnection ({ host : 'localhost' , // Your MySQL host user : 'root' , // Your MySQL username password : '' , // Your MySQL password database : 'mydatabase' // Your MySQL database name }) ; // Connect to the database db . connect ((err) => { if (err) { console . error ( 'Error connecting to MySQL:' , err) ; return; } console . log ( 'Connected to MySQL database.' ) ; }) ; //Promise function allow const dbPromise = db. promise () ; Insert Data async function InsertRecord (name) { const query = 'INSERT INTO reg (Name) VALUES (?)' ; try { const [result] = await dbPromise. query (query , [name]) ; // Execute the query console . log ( `Record inserted with roll: ${result. insertId } ` ) ; } catch (e...
Read more

Sample Project

  1. Contact Manager Description : A web application where users can manage their personal or professional contacts. Users can create, view, edit, and delete contact details such as name, phone number, email, and address. Use Case : Ideal for individuals or small businesses to keep track of client or personal contact details. CRUD Operations : Create : Add a new contact. Read : Display a list of saved contacts. Update : Edit details of an existing contact. Delete : Remove a contact from the list. 2. Task Tracker Description : A simple task management tool where users can track their to-dos, categorize tasks, and mark them as complete or incomplete. Use Case : Helps users organize their daily activities or project tasks. CRUD Operations : Create : Add a new task with a title, description, and deadline. Read : View all tasks or filter by status (completed/incomplete). Update : Edit task details or update its status. Delete : Remove tasks that are no longer relevant. 3. Notes App Desc...
Read more