MERN Tutorial Day 1

MERN Tutorial Day 1

MongoDB Account Creation using following link
Account Creation using: https://www.mongodb.com/atlas/database

NodeJS Download : https://nodejs.org/en/download 

node -v

npm -v

Download : https://code.visualstudio.com/download 

var http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World!');
}).listen(8080);

http://localhost:8080/

npm i express

var express = require('express');
var app = express();

app.get('/', function(req, res){
   res.send("Hello world!");
});

app.listen(process.env.PORT || 8080);

npm i mongoose

const express = require('express')
const mongoose = require('mongoose')

const app = express()
const PORT = process.env.PORT || 3500
 
app.listen(PORT, () => console.log('Server is running'))

mongoose.set("strictQuery", false);
const mongoDB = "mongodb+srv://computeradarsh:ABCD1234@cluster0.fuixeom.mongodb.net/";

main().catch((err) => console.log(err));

async function main() {
  await mongoose.connect(mongoDB);
}

let mongoose = require('mongoose');

let userSchema = new mongoose.Schema({
    umid: String,
    uname: String,
    umobile: String,
    uemail: String,
    upassword: String 
});

module.exports = mongoose.model('User', userSchema);

app.get('/userregister', function(req, res){
  
  let u1 = new usermodel({
    umid: req.query['umid'],
    uname: req.query['uname'],
    umobile: req.query['umobile'],
    uemail: req.query['uemail'],
    upassword: req.query['upassword']
  });
  
  u1
    .save()
    .then((doc) => {
      console.log(doc);
    })
    .catch((err) => {
      console.error(err);
      res.send('error')
    });
  
  res.send("register")
});

app.get('/userlogin', async function(req, res){
  try{
    const items = await usermodel.find({"umobile":req.query['mobile'],"upassword":req.query['password']}).lean().exec(); 
    res.json({items});
} catch(err) {
   res.send("error")
}
});

let mongoose = require('mongoose');

let taskSchema = new mongoose.Schema({
    tmid: String,
    umid: String,
    tdate: String,
    tstatus: String,
    ttitle: String 
});

module.exports = mongoose.model('Task', taskSchema);

app.get("/taskpending", async (req,res)=>{
  res.setHeader('Access-Control-Allow-Origin', '*');
  try{
      const item = await taskmodel.find({"tstatus":"pending"}).lean().exec(); 
      res.json(item);
  } catch(err) {
     res.send("error")
  }
});

app.get('/taskcompleted', async function(req, res){
  res.setHeader('Access-Control-Allow-Origin', '*');

  try{
    const items = await taskmodel.find({"tstatus":"completed"}).lean().exec(); // .exec() returns a true Promise
    res.json(items);
} catch(err) {
   res.send("error")
}
})

app.get('/taskadd', function(req, res){

  let t1 = new taskmodel({
    tmid: req.query['tmid'],
    umid: req.query['umid'],
    tdate: req.query['tdate'],
    tstatus: req.query['tstatus'],
    ttitle: req.query['ttitle']
  });

  
  t1
    .save()
    .then((doc) => {
      console.log(doc);
      //res.send(doc)
    })
    .catch((err) => {
      console.error(err);
      res.send('error')
    });

  res.send("taskadd")
});

npx create-react-app my-react-app

cd my-react-app
npm start

http://localhost:3000/

npm i -D react-router-dom

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./Layout";
import NoPage from "./NoPage";

import Login from "./Login";
import AddTask from "./AddTask";
import Pending from "./Pending";
import Completed from "./Completed";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Login />} />
          <Route path="Pending" element={<Pending />} />
          <Route path="Completed" element={<Completed />} />
          <Route path="AddTask" element={<AddTask />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/Pending">Pending Tasks</Link>
          </li>
          <li>
            <Link to="/Completed">Completed Tasks</Link>
          </li>
          <li>
            <Link to="/Addtask">Add Task</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

import { useState, useEffect } from "react";

const Pending = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("http://localhost:3500/taskpending")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return (
    <> 
    
      <h2> Pending Tasks </h2>
      {data && data.map((item) => { return <li>{item.ttitle}</li>; })}
    </>
  );
};

export default Pending;

import { useState, useEffect } from "react";

const Completed = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("http://localhost:3500/taskcompleted")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return (
    <> 
    
      <h2> Completed Tasks </h2>
      {data && data.map((item) => { return <li>{item.ttitle}</li>; })}
    </>
  );
};

export default Completed;

const PageNotFound = () => {
    return <h1>404</h1>;
  };
  
  export default PageNotFound;

function AddTask() {
  return (
    <div className="App">
      
      <h2>Add New Task</h2>

      <form method="get" action="/AddTask2">

        <label for="ttitle">Task Title</label><br/>
        <input type="text" id="ttitle" name="ttitle" /><br/>
    
        <input type="submit" value="Go"/>
        
      </form>

    </div>
  );
}

export default AddTask;

npm start

import logo from './logo.svg';
//import './App.css';

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Login() {
  return (
    <div className="App">
      
      <h2>Login</h2>

      <form method="get" action="/Pending">

        <label for="umobile">Mobile</label><br/>
        <input type="text" id="umobile" name="umobile" /><br/>
        
        <label for="upass">Password:</label><br/>
        <input type="password" id="upass" name="upass"/><br/>
        
        <input type="submit" value="Go"/>
        
      </form>

    </div>
  );
}

export default Login;

npm install react-hook-form