FSD - Day 1

STEP 1: Install Node.js (to run React)

STEP 2: Check the versions in CMD

(Learnt how to create documents in Dev.to)

STEP 3: Install the Vite package in CMD

-> npm install -g create-vite
-> npm create vite@latest my-react-app -- --template react

After that, give enter(Yes)

STEP 4: Give Ctrl+Click to view the page in the browser.

STEP 5: Open the created application in VS Code

-> package.json must be there, or the application will not run
-> App.jsx - have to edit code anytime inside here.

    <div>
      <h1>Get started</h1>
      <p>
        **Edit <code>src/App.jsx</code> and save to test <code>HMR</code>**
      </p>
    </div>

-> If we have to change the colour or anything in styling, we can change in App.css or index.css.
-> Run file in terminal using 'npm run dev' command.

STEP 6: Edited the file App.jsx to create a table in the react web page.

THE CODE :

  <h1>Student Details</h1>

  <table>
    <tbody>
      <tr>
        <th>Name</th>
        <td>Samundishwari</td>
      </tr>

      <tr>
        <th>Department</th>
        <td>AI &amp; Data Science</td>
      </tr>

      <tr>
        <th>Favorite Color</th>
        <td>Blue</td>
      </tr>
    </tbody>
  </table>

STEP 7: Install MongoDB Compass

STEP 8: Create a server file(JavaScript code) in a new directory - server.js in VS Code - Paste the code retrieved from online clipboard

-> Use of server : Connect Frontend(seating) and DB(Kitchen)
-> client(FE) - chef(DB) - waiter (API's)
-> hostname = IP address
-> statusCode = 200 (if Error)
-> Header - Cyber Sec. Important feature (used to check the connections or network)

THE CODE :

const { createServer } = require('node:http');

const hostname = '127.0.0.1';
const port = 3000;

const server = createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World');
});

server.listen(port, hostname, () => {
console.log(Server running at http://${hostname}:${port}/);
});

Then run the command
-> node .\server.js
and see the result

STEP 9: Create a calculator.js file and run the page on port 3001.

STEP 10: NOTE : (console.log - like a print statement - in JS)
-> Create a directory
-> Open that in CMD
-> Run the command - npm init (A package will be created inside that folder)
-> and install Express
-> Create App.js file and write the code:

THE CODE :

const express = require('express')
const app = express()
const port = 3000

// Home route
app.get('/', (req, res) => {
res.send('Welcome to my server!')
})

// Name route
app.get('/name', (req, res) => {
res.send('Samundishwari')
})

// Department route
app.get('/department', (req, res) => {
res.send('B.Tech AI & DS')
})

// Favorite color route
app.get('/favcolor', (req, res) => {
res.send('Black')
})

// Favorite food route
app.get('/favfood', (req, res) => {
res.send('Biriyani')
})

// College route
app.get('/college', (req, res) => {
res.send('Nandha Engineering College')
})

// Start server
app.listen(port, () => {
console.log(Example app listening on port ${port})
})

STEP 11: Use MongoDB Atlas online

-> Go to clusters
-> Proceed with the asked information and click "create deployment"
-> Cluster created!

STEP 12: Go to the Database and Network access side and add a user.

STEP 13: Now go to the IP address and see if there is already an IP. If not, create one with your IP.

STEP 14: Now, go to MongoDB Compass and Give add new Connection and paste the link you copied from Atlas.

STEP 15: After the DB was created, create a DB inside that and create a Collection.

STEP 16: After creation, we can do coding in the MongoDB_Shell

-> Performed CRUD Operations :
-> 1. CREATE :

  db["23ai054"].insertOne(
  {
     Name : "Samu",
     Age : 20,
     Department : "B. Tech AI&DS"
  })

-> 2. To view, READ :

  db["23ai054"].find()

-> 3. UPDATE :

  db["23ai054"].updateOne(
     { Name : "Samu"},
     { $set: {Age: 21}}
  )

-> 4. DELETE :

  db["23ai054"].deleteOne(
  {
      " _id": ObjectID("xxxxxxxxxxxxxxxxxxxx")
  })

STEP 17: Finally, pushed the project folders into the GitHub repository.