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