MERN Stack WorkShop

 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...

Css body { font-family : 'Roboto' ; } . popup-trigger { display : block ; width : 170 px ; right : 2 rem ; margin : 3 em auto ; text-align : center ; color : #FFF ; font-size : 18 px ; padding : 1 rem 2 rem ; text-decoration : none ; font-weight : bold ; text-transform : uppercase ; border-radius : 50 em ; background : #35a785 ; box-shadow : 0 3 px 0 rgba ( 0 , 0 , 0 , 0.07 ) ; transition : 300 ms all ; } . popup-trigger : hover { opacity : .8 ; } . popup { position : fixed ; left : 0 ; top : 0 ; height : 100 % ; z-index : 1000 ; width : 100 % ; background-color : rgba ( 94 , 110 , 141 , 0.9 ) ; opacity : 0 ; visibility : hidden ; transition : 500 ms all ; } . popup . is-visible { opacity : 1 ; visibility : visible ; transition : 1 s all ; } . popup-container { transform : translateY (- 50 %) ; transition : 500 ms all ; position : relative ; wi...

 Upload File  install npm install express multer const express = require ( "express" ) ; const multer = require ( "multer" ) ; const path = require ( "path" ) ; const app = express () ; const port = 3000 ; // Set up multer storage options const storage = multer . diskStorage ({ destination : (req , file , cb) => { cb( null, "uploads/" ) ; // Save files in the 'uploads' folder } , filename : (req , file , cb) => { cb( null, Date . now () + path . extname (file. originalname )) ; // Add timestamp to file name } , }) ; // Initialize multer const upload = multer ({ storage }) ; Upload File EndPoint app. post ( "/UploadFile" , upload. single ( 'file' ) , (req , res)=>{ if (!req. file ){ return res. status ( 400 ). send ( "Error File Upload." ) ; } res. send ( "File Upload success." ) ; }) ; // Start the server app. listen (port , () => { c...

  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...

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 () { ...