Javascript Module 78
If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page
https://onlinecourses2024for.blogspot.com/p/contact-us.html/
Module 78 : script that checks a user's input grade and prints whether it's an A, B, C, D, or F using both if and switch.
Prerequisites
Basic JavaScript syntax
Functions, conditionals (if, else)
Basic DOM manipulations (for the browser demo) or readline (for Node demo)
API (the functions we'll create)
getLetterGradeIf(score: number): string — returns 'A'|'B'|'C'|'D'|'F' or 'Invalid' on bad input.
getLetterGradeSwitch(score: number): string — same behavior, implemented with switch.
We also provide small wrappers for browser and Node demos.
1) Implementation: if / else if
/**
* Convert numeric score to letter grade using if/else-if.
* Returns 'A', 'B', 'C', 'D', 'F' or 'Invalid'.
*/
function getLetterGradeIf(rawScore) {
// sanitize + validation
const score = Number(rawScore);
if (!Number.isFinite(score)) return 'Invalid';
if (score < 0 || score > 100) return 'Invalid';
// grade logic
if (score >= 90) return 'A';
else if (score >= 80) return 'B';
else if (score >= 70) return 'C';
else if (score >= 60) return 'D';
else return 'F';
}
Notes:
We convert rawScore with Number() to accept string or numeric input (e.g., '85').
Number.isFinite filters out NaN, Infinity, and non-numeric values.
The checks are ordered highest → lowest so a score that meets >= 90 will not be tested against lower ranges.
>= ensures inclusive boundaries (e.g., 90 is an A).
2) Implementation: switch (approach A — map tens to cases)
A common and readable switch pattern for range-based numeric categories is to map the score to its tens integer (Math.floor(score / 10)) and switch on that value:
function getLetterGradeSwitch(rawScore) {
const score = Number(rawScore);
if (!Number.isFinite(score)) return 'Invalid';
if (score < 0 || score > 100) return 'Invalid';
const tens = Math.floor(score / 10); // 100->10, 95->9, 89->8
switch (tens) {
case 10: // fall-through so 100 becomes an A
case 9:
return 'A';
case 8:
return 'B';
case 7:
return 'C';
case 6:
return 'D';
default:
return 'F';
}
}
Notes:
Math.floor(100 / 10) === 10, so we include a case 10 that falls through into case 9.
This switch compares integers (===) so it's fast and clear for discrete buckets.
3) Implementation: switch(true) (approach B — switch on boolean expressions)
Some developers prefer switch(true) so each case tests a boolean expression:
function getLetterGradeSwitchBool(rawScore) {
const score = Number(rawScore);
if (!Number.isFinite(score)) return 'Invalid';
if (score < 0 || score > 100) return 'Invalid';
switch (true) {
case (score >= 90):
return 'A';
case (score >= 80):
return 'B';
case (score >= 70):
return 'C';
case (score >= 60):
return 'D';
default:
return 'F';
}
}
Notes:
switch(true) checks each case expression for truthiness — it's effectively a different syntax for an if chain.
Some teams dislike switch(true) because it's less conventional, but it can be clean when you want to keep a switch-style block.
4) Browser demo (interactive)
<!-- Save as grade-demo.html and open in a browser -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Grade Checker Demo</title>
</head>
<body>
<h1>Grade Checker</h1>
<label>Score (0-100): <input id="scoreInput" type="text" /></label>
<select id="method">
<option value="if">If/Else</option>
<option value="switch">Switch (tens)</option>
<option value="switchBool">Switch (boolean)</option>
</select>
<button id="checkBtn">Check Grade</button>
<p id="result"></p>
<script>
// include the functions (getLetterGradeIf, getLetterGradeSwitch, getLetterGradeSwitchBool)
function getLetterGradeIf(rawScore) {
const score = Number(rawScore);
if (!Number.isFinite(score)) return 'Invalid';
if (score < 0 || score > 100) return 'Invalid';
if (score >= 90) return 'A';
else if (score >= 80) return 'B';
else if (score >= 70) return 'C';
else if (score >= 60) return 'D';
else return 'F';
}
function getLetterGradeSwitch(rawScore) {
const score = Number(rawScore);
if (!Number.isFinite(score)) return 'Invalid';
if (score < 0 || score > 100) return 'Invalid';
const tens = Math.floor(score / 10);
switch (tens) {
case 10:
case 9: return 'A';
case 8: return 'B';
case 7: return 'C';
case 6: return 'D';
default: return 'F';
}
5) Node (CLI) demo using readline
// node grade-cli.js
const readline = require('readline');
const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
function getLetterGradeIf(rawScore) {
const score = Number(rawScore);
if (!Number.isFinite(score)) return 'Invalid';
if (score < 0 || score > 100) return 'Invalid';
if (score >= 90) return 'A';
else if (score >= 80) return 'B';
else if (score >= 70) return 'C';
else if (score >= 60) return 'D';
else return 'F';
}
rl.question('Enter score (0-100): ', (answer) => {
console.log('Using if/else result:', getLetterGradeIf(answer));
rl.close();
});
6) Tests and example inputs
Input
Expected output
Explanation
95
A
>= 90
90
A
boundary included
89.9
B
< 90 but >=80
80
B
exact boundary
72.5
C
decimals allowed
60
D
boundary
59.999
F
< 60
-5
Invalid
out of range
105
Invalid
out of range
"85"
B
string converts to number
"abc"
Invalid
NaN -> invalid
7) explanation
Sanitization & Validation: Always convert input to a number and check Number.isFinite so you don't process NaN or textual garbage. Reject values outside 0–100 (unless your grading policy allows extra-credit >100).
Why ordered checks matter: In an if chain we check from highest to lowest so that a high score is captured early (if (score >= 90)). If we reversed order we might misclassify.
Switch vs If:
if chains are direct and readable for ordered numeric ranges.
switch is best when you have discrete buckets or want to use fall-through behavior. The Math.floor(score / 10) trick transforms ranges into discrete integers (10, 9, 8, ...), which makes switch elegant.
switch(true) is syntactic sugar for many if conditions; use according to team preference.
Performance: For this use-case the difference is negligible. Clarity and maintainability matter more than micro-optimizations.
Edge cases: Decide how to treat exactly 100 (include in A), negative numbers, not-a-number, and non-integer decimals.
8) Extensions & exercises
Exercise 1 (Beginner)
Modify getLetterGradeIf to return A+, A, A- for the top grade band as follows:
A+ : 97–100
A : 90–96.999...
Hint / Solution sketch: check >= 97 before >= 90.
function getLetterGradeIfPlusMinus(rawScore) {
const score = Number(rawScore);
if (!Number.isFinite(score)) return 'Invalid';
if (score < 0 || score > 100) return 'Invalid';
if (score >= 97) return 'A+';
if (score >= 90) return 'A';
if (score >= 80) return 'B';
// ... and so on
}
Exercise 2 (Intermediate)
Write a function that accepts a custom grade scale object and returns a letter grade.
Example scale:
const scale = [
{ min: 97, grade: 'A+' },
{ min: 90, grade: 'A' },
{ min: 80, grade: 'B' },
// ...
];
Hint: sort scales descending by min, then for (const s of scale) if (score >= s.min) return s.grade;.
Exercise 3 (Testing)
Write unit tests using Jest or simple assertion functions that verify each boundary (59.999, 60, 69.999, 70, etc.).
Exercise 4 (Advanced)
Map a letter grade to a 4.0 GPA value (e.g., A->4.0, B->3.0) and then compute the GPA for an array of course objects [{score, credits}].
Sample solution sketch: compute letter grade, map letter to points, sum weighted points / sum credits.
Javascript Module 77
If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page
https://onlinecourses2024for.blogspot.com/p/contact-us.html/
Module 77 : Why JavaScript is Essential in Modern Web Development
JavaScript (JS) is the backbone of interactive and dynamic websites. While HTML provides structure and CSS handles styling, JavaScript brings functionality—it makes websites alive, responsive, and interactive.
Without JavaScript, the web would be static like old 1990s websites. Today, almost every major web app (Google Docs, Facebook, Netflix, YouTube, Amazon, etc.) heavily depends on JavaScript.
🔑 Key Reasons JavaScript is Essential
1. Client-Side Interactivity
JavaScript enables users to interact with a webpage without refreshing.
Example: Form validation before submission.
🔹 Code Example: Simple Form Validation
<!DOCTYPE html> <html> <head> <title>Form Validation</title> </head> <body> <form onsubmit="return validateForm()"> <label>Email: </label> <input type="text" id="email" /> <button type="submit">Submit</button> </form> <script> function validateForm() { let email = document.getElementById("email").value; if (!email.includes("@")) { alert("Please enter a valid email!"); return false; // stops form submission } return true; } </script> </body> </html>
👉 Without JS, this form would need to reload the page and rely on backend validation. With JS, errors show instantly.
2. Dynamic Content Loading (AJAX & Fetch API)
JavaScript allows fetching data from servers without reloading the page.
Example: Social media sites (Twitter, Facebook) update feeds dynamically.
🔹 Code Example: Fetching data from an API
<!DOCTYPE html> <html> <head> <title>Fetch API Example</title> </head> <body> <button onclick="loadData()">Get User</button> <div id="user"></div> <script> function loadData() { fetch('https://jsonplaceholder.typicode.com/users/1') .then(response => response.json()) .then(data => { document.getElementById("user").innerHTML = `Name: ${data.name} <br>Email: ${data.email}`; }); } </script> </body> </html>
👉 This is how apps like Instagram and YouTube load new posts/videos instantly.
3. Building Full-Fledged Web Apps
With frameworks like React, Angular, and Vue.js, JavaScript can build single-page applications (SPAs).
Example: Gmail loads once, then dynamically updates content with JS.
🔹 Code Example (React Component):
import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <h2>Counter: {count}</h2> <button onClick={() => setCount(count + 1)}>Increase</button> <button onClick={() => setCount(count - 1)}>Decrease</button> </div> ); } export default Counter;
👉 This is the same principle behind Netflix’s UI where movie tiles update dynamically without reloading.
4. Cross-Platform Development
JavaScript powers not only the web, but also mobile apps (React Native), desktop apps (Electron), and even servers (Node.js).
Example: WhatsApp Web (built on JavaScript) syncs chats.
🔹 Code Example (Node.js Simple Server):
const http = require('http'); http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello, this is a Node.js server!'); }).listen(3000); console.log("Server running at http://localhost:3000/");
👉 This shows JavaScript is not just frontend—it powers backends too (used by PayPal, LinkedIn, and Uber).
5. Applications
With WebSockets, JavaScript allows updates.
Example: Google Docs lets multiple users edit the same document simultaneously.
🔹 Code Example (WebSocket in JS):
const socket = new WebSocket("ws://localhost:8080"); socket.onopen = () => { console.log("Connected to server"); socket.send("Hello Server!"); }; socket.onmessage = (event) => { console.log("Message from server:", event.data); };
👉 usage: Slack, Zoom, and online multiplayer games.
Websites/Apps Using JavaScript
Google – Gmail, Google Maps (dynamic maps & live updates).
Facebook – Uses React.js for its UI and chat updates.
Netflix – Dynamic loading of movies and AI-driven recommendations via JS.
Amazon – Shopping cart, live product updates, and filtering powered by JS.
YouTube – Video suggestions, live comments, and autoplay rely on JS.
Airbnb & Uber – bookings and live maps.
Conclusion
JavaScript is essential in modern web development because it:
Makes websites interactive & dynamic.
Supports updates without page reloads.
Powers front-end, back-end, and mobile apps.
Enables creation of scalable apps like Google, Facebook, Netflix.
In short: Without JavaScript, the modern web wouldn’t exist.
Javascript Module 76
If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page
https://onlinecourses2024for.blogspot.com/p/contact-us.html/
Module 76 : Understanding Hoisting in JavaScript
🔹 What is Hoisting?
Hoisting is JavaScript’s default behavior of moving declarations to the top of their scope (before code execution).
Variables declared with var are hoisted and initialized as undefined.
Variables declared with let and const are hoisted too, but not initialized → they remain in a Temporal Dead Zone (TDZ) until the line of declaration.
Function declarations are hoisted completely, so they can be called before their actual definition in the code.
🔹 Example Program: Hoisting in Action
function hoistingDemo() { console.log("=== Hoisting Demo Start ==="); // --- var --- console.log(varVariable); // Output: undefined // Explanation: 'varVariable' is hoisted and initialized as undefined var varVariable = "I am var"; // --- let --- try { console.log(letVariable); // Throws ReferenceError // Explanation: letVariable is hoisted but not initialized } catch (error) { console.log("Accessing letVariable before declaration gives:", error.message); } let letVariable = "I am let"; // --- function declaration --- console.log(sayHello()); // Output: "Hello! I am a hoisted function." // Explanation: Function declarations are fully hoisted function sayHello() { return "Hello! I am a hoisted function."; } // --- function expression with var --- try { console.log(sayHi()); // TypeError: sayHi is not a function // Explanation: 'sayHi' is hoisted as undefined, not the function itself } catch (error) { console.log("Accessing sayHi before initialization gives:", error.message); } var sayHi = function() { return "Hi! I am a function expression."; }; console.log("=== Hoisting Demo End ==="); } hoistingDemo();
🔹 Explanation
var behavior
Declared at the top of the scope.
Initialized as undefined until the code assigns a value.
Example:
console.log(x); // undefined var x = 5;
Internally behaves like:
var x; // hoisted console.log(x); // undefined x = 5;
let and const behavior
Hoisted but not initialized.
Any access before declaration results in a ReferenceError because of the Temporal Dead Zone (TDZ).
Example:
console.log(y); // ReferenceError let y = 10;
Function declaration behavior
Fully hoisted (name + body).
Can be called before its declaration in the code.
Example:
greet(); // "Hello!" function greet() { console.log("Hello!"); }
Function expression behavior
Works like variables.
If declared with var, it is hoisted as undefined.
If declared with let or const, TDZ applies.
🔹Exercises
Exercise 1: Predict the Output
console.log(a); var a = 100; try { console.log(b); } catch (err) { console.log("Error:", err.message); } let b = 200; console.log(c()); function c() { return "Function c is hoisted!"; } try { console.log(d()); } catch (err) { console.log("Error:", err.message); } var d = function() { return "Function d expression"; };
👉 Task: Run and explain why each output/error happens.
Exercise 2: Debugging with Hoisting
Rewrite this code so it works correctly:
console.log(name); name = "Alice"; let name;
👉 Hint: Fix using proper declaration placement.
Exercise 3:
Try declaring the same variable with var vs let:
var x = 10; var x = 20; // works let y = 10; let y = 20; // error
👉 Question: Why does let prevent redeclaration while var does not?
🔹 Research
Spec Reference: The concept of hoisting is explained in the ECMAScript Language Specification, under Variable Instantiation and Declaration Binding Instantiation.
TDZ (Temporal Dead Zone): The zone between the start of the scope and the declaration line where the variable exists but is not accessible.
Coding Specialist Insight:
Use let and const instead of var to avoid accidental hoisting bugs.
Function expressions are safer when you want control over when functions are available.
Function declarations are useful for structuring code like traditional languages (C, Java, etc.), but be careful with order when mixing with expressions.
Javascript Module 75
If You want To Earn Certificate For My All Course Then Contact Me At My Contact Page then I Will Take A Test And Give You certificate . Go My Contant Page And Fill Your Details Then I Will Contact You Click Here And Go To My Contact Page
https://onlinecourses2024for.blogspot.com/p/contact-us.html/
Module 75 : Deploying JavaScript Apps with Netlify or Vercel.
continuous deployment (CD) works with Netlify and Vercel and why it matters.
Netlify Docs
+1
Deploy a static or single-page JavaScript app via drag-and-drop, via Git integration, and via the CLI.
Netlify Docs
+1
Configure build commands, publish directories, environment variables, and redirects.
Netlify Docs
+1
Add and test serverless functions (Netlify Functions, Vercel Serverless/API routes) and call them from the frontend.
Netlify Docs
+1
Use preview deploys / branch deploys and set up staging workflows.
Netlify Docs
Understand performance trade-offs: SSG vs SSR vs Edge functions, caching and CDN considerations. Prerequisites: Git basics, Node.js/npm, a sample JavaScript app (vanilla, CRA, Vite, Next.js etc.), basic terminal competence, GitHub/GitLab/Bitbucket account.
3. Continuous Deployment (CD)
CD = connect your Git repo to the hosting platform so every push or PR creates a deploy — automated build → artifact → global CDN. This creates reproducible deployments and shortens feedback loops. Netlify and Vercel both provide Git integrations that automatically run your build command and publish results on successful commits.
Netlify Docs
+1
Build steps
runs tools (npm run build, vite build, next build) and emits static files (dist/ or out/) or server bundles. Configure the platform with the build command + publish directory.
Netlify Docs
serverless functions or SSR code run on demand (not part of static asset hosting). Netlify exposes “Functions” (serverless) and Vercel has Serverless/Edge functions or API routes. Use functions for secure secrets, third-party API calls, or dynamic server logic.
Netlify Docs
+1
Preview Deploys & Branch Deploys
Platforms generate preview URLs for branches and PRs — crucial for reviewing changes before merging. Netlify supports deploy previews per PR and branch deploy configs; Vercel creates preview deployments for each PR and commit. how to use previews for QA.
Netlify Docs
+1
Serverless functions: constraints & patterns
Serverless functions are ephemeral and stateless: cold starts, limited execution time and memory. Use them for API endpoints, webhooks, form processing, auth flows, and offloading secret logic from client code. Netlify functions live in netlify/functions and are packaged at build time. Vercel exposes api/* routes and edge functions.
Netlify Docs
+1
4. worked
assume you already have a small project with package.json and a build script (e.g. npm run build produces dist/ or build/). Use GitHub for the examples.
Quick static deploy to Netlify (GUI)
Build locally to verify:
npm install npm run build # verify that build output exists, e.g. ./dist or ./build
Go to Netlify → New site → “Drag & drop” and drop the build folder (or zipped project). The site will be published with a preview URL.
Netlify Docs
Drag & drop is perfect for absolute no Git needed. After drag & drop, show them how to view site settings (domain, SSL, deploy logs).
the build output directory and why it must contain an index.html.
Deploy from Git to Netlify
Push app to GitHub.
In Netlify dashboard: Add new site → Import from Git → choose provider → authorize → select repo.
Fill in build command (e.g. npm run build) and publish directory (dist or build). Click Deploy. Netlify runs the build and publishes.
Netlify Docs
Add an environment variable
In Netlify: Site settings → Build & deploy → Environment → add API_KEY (masked). Use process.env.API_KEY in serverless function or import.meta.env depending on framework ( framework nuance).
Netlify serverless function (simple example)
Project structure:
/netlify/functions/hello.js
netlify/functions/hello.js
exports.handler = async (event, context) => { return { statusCode: 200, body: JSON.stringify({ msg: "Hello from Netlify Functions" }) }; };
Locally test with Netlify Dev:
npm i -g netlify-cli netlify dev # or `netlify dev --live` to share
From frontend: fetch('/.netlify/functions/hello') and show JSON.
Notes: Netlify CLI can build + deploy and exposes function logs.
Netlify Docs
+1
Deploy a React (Vite/CRA) app with Vercel (GUI)
Push project to GitHub.
On Vercel: New Project → Import Git Repository, choose framework preset if prompted (Vercel can auto-detect).
Vercel auto-fills Build Command and Output Directory; confirm and deploy. Vercel will create a production URL and preview URLs for PRs.
Vercel
+1
Demonstrate a small change in a branch → push → show preview URL for that branch.
Vercel CLI & API route (example)
Install and login:
npm i -g vercel vercel login # from project root vercel
Create an API route api/hello.js:
// api/hello.js export default function handler(req, res){ res.status(200).json({ msg: "Hello from Vercel API route" }); }
Test locally:
vercel dev # visit http://localhost:3000/api/hello
Deploy:
vercel --prod
Caveat: Vercel’s model differs by framework (Next.js gets tighter integration).
Vercel
+1
Config files (examples)
netlify.toml (optional control)
[build] command = "npm run build" publish = "dist" [dev] command = "npm run dev" [[redirects]] from = "/*" to = "/index.html" status = 200
Netlify recognizes _redirects and netlify.toml for custom routing and headers.
Netlify CLI command reference
vercel.json (optional)
{ "builds": [ { "src": "package.json", "use": "@vercel/static-build", "config": { "distDir": "dist" } } ], "routes": [ { "src": "/api/(.*)", "dest": "/api/$1.js" } ] }
Vercel auto-detects many frameworks; vercel.json is only necessary for fine-grained control.
Vercel
5. Exercises
Exercise set (individual)
Deploy a plain HTML/CSS/JS site to Netlify using drag & drop. (Deliverable: public URL)
Deploy the same site to Vercel via Git import. (Deliverable: production URL + preview URL for a branch)
Add a serverless function that returns server time; call it from the frontend and display the time (both platforms). (Deliverable: code + screenshot)
Add one environment variable (e.g., FEATURE_TOGGLE) and demonstrate it using a serverless function. (Deliverable: screenshot of env var in dashboard & functioning app)
Implement a redirect rule (e.g., redirect /old to /new) and show proof. (Deliverable: redirect behavior demo GIF).
Grading rubric (total 100)
Deployments successful & accessible (30)
Serverless function implemented & secure (20)
Environment variable used & not leaked in client code (15)
Correct build & config files present (netlify.toml/vercel.json as needed) (15)
Proper documentation in README with deployment steps (10)
CI test that runs before deploy and publishes artifact (10)
6. Troubleshooting checklist
Build fails on platform but works locally: check Node version & install settings; set Node version via engines in package.json or via platform settings.
Wrong publish folder: confirm dist vs build.
Netlify Docs
Serverless function 502/timeout: check logs in platform dashboard; watch for cold start / long running synchronous operations.
Netlify Docs
Secrets showing up in client: ensure secret used only in serverless function or read at build-time (and not exposed to client bundle).
DNS/custom domain HTTPS issues: ensure domain is pointed to platform nameservers or add CNAME/A records per platform docs; let the platform provision SSL (usually automatic).
7. Advanced topics & research directions
These are suggested mini-projects, or research assignments.
SSR vs SSG vs Edge — empirical performance measurements (TTFB, Time to Interactive) when using SSR (Next.js on Vercel) vs SSG on Netlify/Vercel vs Edge Functions. Measure cold starts, latency across regions, and cost behavior.
Vercel
+1
Function cold starts & warmers — experiment with function runtimes (Node vs Deno/Edge), memory allocation, and warm-up strategies. Collect timing and cost metrics.
Deploy artifacts & CI gating — evaluate patterns to run tests (GitHub Actions) before allowing platform to deploy; artifacts vs building on platform. Explore recommended workflows that integrate CI and Netlify/Vercel. (Community discussions and platform docs show different approaches.)
Netlify Support Forums
+1
Advanced caching, CDN headers, and cache invalidation — study cache-control strategies, immutable asset hashing, and cache purging APIs.
Comparative case study — pick a nontrivial app (Next.js + API integrations) and deploy to both platforms; compare developer DX, performance, ergonomics, team collaboration features (preview URLs, role permissions), and cost at scale.
8. (short snippets)
Explain — Why deploy to Netlify/Vercel?“Netlify and Vercel let us focus on writing apps, not managing servers. You push code and the platform runs the build, uploads assets to a global CDN, and any server code is exposed as serverless endpoints. This reduces ops overhead and speeds up developer feedback via preview URLs for branches and PRs.”
Netlify Docs
+1
explain serverless to beginners
“Serverless functions are tiny backend endpoints you drop into your project. They are invoked on demand, scale automatically, and are ideal for things that need secrets (API keys) because the secret stays on the server — not the browser.”
9. Netlify — Getting started & Start pathways.
Netlify Docs
Netlify — Create deploys & Build configuration overview.
Netlify Docs
+1
Netlify CLI & Functions docs (CLI deploy, Netlify Dev, Functions API).
Netlify CLI command reference
+2
Netlify Docs
+2
Vercel — Getting started, deployments overview, and CLI docs.
Vercel
+2
Vercel
+2
Vercel : Deploying React with Vercel.
Vercel
