THIS COMMIT HAS COMMENTS WHICH ARE EXPLAINING EACH STEP

COMMIT

node-server/index.js

@@ -1,46 +1,47 @@
-const express = require('express');
-const cors = require('cors');
-const bodyParser = require('body-parser');
-const mongoose = require('mongoose');
+const express = require('express');  //express is used to make a web server
+const cors = require('cors');        //is used to grant permission to communicate node server with react server
+const bodyParser = require('body-parser');   //THIS IS A MIDDLE WARE WHICH IS USED TO READ INSIDE BODY OF POST
+const mongoose = require('mongoose');        //this is a help in interacting with mongodb and making changes to it`
 
-main().catch(err => console.log(err));
+main().catch(err => console.log(err));       //Used to catch error in database if it appears
 
 async function main() {
   await mongoose.connect('mongodb://127.0.0.1:27017/demo');
   console.log('db connected')
 }
-const userSchema = new mongoose.Schema({
+const userSchema = new mongoose.Schema({             //Here we assign datatype to the data and validate and filter the data
     username: String,
     password: String
 });
 
-const User = mongoose.model('User', userSchema);
+const User = mongoose.model('User', userSchema);     //Here user is the name the collection and user scheme has data inside it
+                                                     //User acts as a class                                                    
 
+const server = express();                    //used to create a server
 
-
-
-const server = express();
-
-server.use(cors());
-server.use(bodyParser.json());
+server.use(cors());                          //this is .use which is a middleware it can change request between client and server
+server.use(bodyParser.json());               //WE HAVE TO USE JSON IN BODYPARSER
 
 // CRUD - Create
 server.post('/demo',async (req,res)=>{
 
-    let user = new User();
-    user.username = req.body.username;
-    user.password = req.body.password;
-    const doc = await user.save();
+    let user = new User();                   //This Stateme is creating object of User class and in user there is information 
+                                             //For changing database change the object and the changes will be reflected in database
+
+    user.username = req.body.username;       //REQ IS DATA FROM FRONTEND WHICH HAS A BODY AND INSIDE IT IT HAS USERNAME
+    user.password = req.body.password;       
+    const doc = await user.save();          //In mongodb it will be saved as doc and it will be documnet 
 
-    console.log(doc);
-    res.json(doc);
+    console.log(doc);                        //PRINTS WHATEVER FRONTEND HAS SEND 
+    res.json(doc);                           //SEND THE RESPONSE TO FRONTEND 
 })
 
-server.get('/demo',async (req,res)=>{
-    const docs = await User.find({});
-    res.json(docs)
+server.get('/demo',async (req,res)=>{       //get is a server method where /demo is path  req is request  res is respond
+    const docs = await User.find({});       //req is any data from frontend comes to req
+    res.json(docs)                          //respond is any data which has to be send to frontend comes to res
+                                            //get request can be run through url
 })
 
-server.listen(8080,()=>{
-    console.log('server started')
+server.listen(8080,()=>{                    //server.listen at request to port 8080 will listen here
+    console.log('server started')                
 })

react-app/src/App.js

@@ -1,36 +1,37 @@
-import logo from './logo.svg';
+ import logo from './logo.svg';
 import './App.css';
-import { useEffect, useState } from 'react';
+ import { useEffect, useState } from 'react';
 
 function App() {
-  const [form, setForm] = useState({});
-  const [users, setUsers] = useState([]);
+    const [form, setForm] = useState({});  // use state is used to store the event //form is the object and setform is its setter
+    const [users, setUsers] = useState([]); 
 
   const handleForm = (e)=>{
     setForm({
-      ...form,
-      [e.target.name] : e.target.value
+      ...form,                                   //No changes will be overridden it will be continues in form object
+      [e.target.name] : e.target.value           //Thus username:Meet will bw stored in form object         
     })
   }
 
   const handleSubmit = async (e)=>{
-    e.preventDefault();
-    const response = await fetch('http://localhost:8080/demo',{
-      method:'POST',
-      body:JSON.stringify(form),
-      headers:{
-        'Content-Type':'application/json'
+    e.preventDefault();                                          //thus it helps us to see event on console without it being lost
+    const response = await fetch('http://localhost:8080/demo',{  //here url in fetch is of the server get   
+      method:'POST',                                             //also here we can also write get and there is a link between this get and the get we have used in node server it helps to connect the same
+      body:JSON.stringify(form),                                 //also whatever we take throught get gets reflected through url
+      headers:{                                                  //Here POST METHOD IS USED TO SEND DATA TO SERVER 
+                                                                 //HERE IN BODY WE CAN SEND DATA AND WE HAVE TO SEND IT IN STRING FORMA
+        'Content-Type':'application/json'                        //HEADERS HELPS IN GIVING ADDITIONAL INFORMATION 
       }
-    })
+    }) 
     const data = await response.json();
    console.log(data);
   }
 
   const getUsers = async ()=>{
-    const response = await fetch('http://localhost:8080/demo',{
+    const response = await fetch('http://localhost:8080/demo',{          //Fetching the data from database
       method:'GET',
     })
-   const data = await response.json();
+   const data = await response.json();                                   //reading it in json format
    setUsers(data);
   }
 
@@ -40,20 +41,24 @@ function App() {
 
   return (
     <div>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit}>                                                        
         <span>username</span>
-        <input type="text" name="username" onChange={handleForm}></input>
+        <input type="text" name="username" onChange={handleForm}></input>                   
+        {/* //here handle form will track the event change and will store the value */}
+
         <span>password</span>
         <input type="text" name="password" onChange={handleForm}></input>
         <input type="submit"></input>
       </form>
-      <div>
+      { <div>
         <ul>
           {users.map(user=><li key={user._id}>{user.username},{user.password}</li>)}
         </ul>
-      </div>
+      </div> }
     </div>
   )
 }
 
 export default App;
+
+