This guide provides a quick revision of the essential concepts.

Topics Covered

• Global Scope

• Function Scope

• Block Scope

• Scope Chain

• Lexical Scope

• Dynamic Scope (Comparison)

• Variable Shadowing

• Hoisting

• Temporal Dead Zone (TDZ)

• Strict Mode

Global Scope

Global Scope is the outermost scope in JavaScript. Variables declared outside any function or block belong to the global scope and can be accessed from anywhere in the program.

When JavaScript starts executing a file, it creates a global execution context. Any variable declared outside a function or block becomes part of the global scope.

Example

const company = "OpenAI";

function showCompany() {
    console.log(company);
}

showCompany();

Output

OpenAI

Important Points

• Accessible throughout the program.

• Created when JavaScript starts execution.

• Avoid creating too many global variables as they can lead to naming conflicts.

Function Scope

Variables declared inside a function can only be accessed within that function.

Every function creates its own scope. Variables inside a function are private to that function.

Example

function greet() {
    let message = "Hello";
    console.log(message);
}

greet();

// console.log(message);

Output

Hello

The last line throws a ReferenceError because message exists only inside the function.

Important Points

• Every function creates a new scope.

• Variables inside a function are inaccessible from outside.

• var follows function scope.

Block Scope

Variables declared using let and const are accessible only within the block ({}) where they are declared.

A block can be an if statement, for loop, while loop, or any pair of curly braces.

Example

if (true) {
    let age = 20;
    const city = "Delhi";
}

// console.log(age);
// console.log(city);

Both statements outside the block throw a ReferenceError.

Important Points

• Only let and const are block scoped.

• var ignores block scope.

• Helps prevent accidental access to variables.

Scope Chain

A Scope Chain is the process JavaScript uses to search for a variable when it is accessed.

JavaScript first looks in the current scope. If the variable is not found, it moves to the parent scope.

This continues until the global scope is reached. If the variable is still not found, a ReferenceError is thrown.

Example

const company = "OpenAI";

function outer() {
    const team = "AI";

    function inner() {
        console.log(company);
        console.log(team);
    }

    inner();
}

outer();

Output

OpenAI
AI

Important Points

• Search starts from the current scope.

• Moves outward toward the global scope.

• Never searches child scopes.

Lexical Scope

Lexical Scope means a function can access variables from the scope where it was defined.

The scope of a function is determined by its position in the source code, not by where it is called.

Example

const language = "JavaScript";

function outer() {
    function inner() {
        console.log(language);
    }

    inner();
}

outer();

Output

JavaScript

Important Points

• Scope is decided when code is written.

• JavaScript uses lexical scoping.

• Closures are based on lexical scope.

Dynamic Scope (Comparison)

Dynamic Scope means a function accesses variables based on where it is called rather than where it is defined.

JavaScript does not support dynamic scoping. It always uses lexical scope.

Example

const name = "Global";

function greet() {
    console.log(name);
}

function execute() {
    const name = "Local";
    greet();
}

execute();

Output

Global

If JavaScript used dynamic scope, the output would have been "Local".

Important Points

• JavaScript does not support dynamic scope.

• Variable lookup is based on where the function is defined.

Variable Shadowing

Variable Shadowing occurs when a variable declared in an inner scope has the same name as a variable in an outer scope.

The inner variable hides (or shadows) the outer variable within that scope.

Example

let name = "Global";

function greet() {
    let name = "Local";

    console.log(name);
}

greet();

console.log(name);

Output

Local
Global

Important Points

• Inner variables take precedence.

• Outer variable remains unchanged.

• Commonly used inside functions and blocks.

Hoisting

Hoisting is JavaScript's behavior of moving declarations to the top of their scope during the creation phase of the execution context.

Only declarations are hoisted, not initializations.

• var is hoisted and initialized with undefined.

• let and const are hoisted but remain uninitialized until their declaration executes.

Example

console.log(age);

var age = 20;

Output

undefined

Internally, JavaScript treats it like:

var age;

console.log(age);

age = 20;

Important Points

• Declarations are hoisted.

• Initializations are not hoisted.

• Function declarations are fully hoisted.

Temporal Dead Zone (TDZ)

The Temporal Dead Zone (TDZ) is the period between entering a scope and initializing a let or const variable.

During this period:

• Memory has been allocated.

• The variable exists.

• The variable cannot be accessed.

Trying to access it results in a ReferenceError.

Example

console.log(name);

let name = "Aditya";

Output

ReferenceError

Important Points

• Applies only to let and const.

• Starts when the scope is entered.

• Ends when the variable is initialized.

• Prevents accidental access before initialization.

Strict Mode

Strict Mode is a special JavaScript mode that enables stricter parsing and error handling, helping developers write safer and more predictable code.

Strict Mode is enabled by adding "use strict"; at the beginning of a script or function.

It prevents many common mistakes that JavaScript normally allows.

Example

"use strict";

age = 20;

Output

ReferenceError: age is not defined

Without Strict Mode, JavaScript would create a global variable automatically.

Important Points

• Enabled using "use strict";

• Prevents accidental global variables.

• Disallows duplicate parameter names.

• Makes silent errors throw exceptions.

• Recommended for writing modern JavaScript.

Interview Questions

1. What is the difference between Global Scope, Function Scope, and Block Scope?

2. Explain the Scope Chain with an example.

3. What is Lexical Scope?

4. Does JavaScript support Dynamic Scope?

5. What is Variable Shadowing?

6. What is Hoisting? Are variables initialized during hoisting?

7. What is the Temporal Dead Zone?

8. Why does var not have a TDZ?

9. What is Strict Mode? Why is it used?

10. What is the difference between Hoisting and the Temporal Dead Zone?

This guide provides a quick revision of the most important concepts with concise explanations and practical examples.

Topics Covered

• Variables

• var

• let

• const

• Primitive Data Types

• Non-Primitive Data Types

• Pass by Value vs Pass by Reference

• undefined vs null

• undefined vs not defined

• NaN

• typeof Operator

Variables

Definition

A variable is a named container used to store data in memory so it can be accessed, updated, and reused throughout a program.

Explanation

Instead of using hardcoded values multiple times, we store them in variables. JavaScript is a dynamically typed language, so a variable can hold any type of value.

Example

let name = "Aditya";
let age = 20;
let isStudent = true;

Important Points

• Used to store data.

• Can hold any data type.

• Makes code reusable and maintainable.

var

Definition

var is the original way of declaring variables in JavaScript. It is function-scoped, can be redeclared, and can be reassigned.

Explanation

Before ES6, developers used var for every variable. Since it ignores block scope and allows redeclaration, it can lead to unexpected behavior. For this reason, it is rarely used in modern JavaScript.

Example

var age = 20;

var age = 25;

age = 30;

Important Points

• Function scoped

• Can be redeclared

• Can be reassigned

• Hoisted and initialized with undefined

• Avoid using var in modern JavaScript

let

Definition

let is a block-scoped variable introduced in ES6. It allows reassignment but does not allow redeclaration within the same scope.

Explanation

Unlike var, let respects block scope, making it safer to use inside loops, conditions, and functions.

Example

let age = 20;

age = 21;

let age = 20;
let age = 25; // SyntaxError

Important Points

• Block scoped

• Cannot be redeclared

• Can be reassigned

• Hoisted but remains in the Temporal Dead Zone until initialization

const

Definition

const declares a block-scoped variable whose reference cannot be reassigned after initialization.

Explanation

Use const for values that should not be reassigned. For objects and arrays, only the reference is constant, not the contents.

Example

const user = {
  name: "Aditya",
};

user.name = "Rahul"; // Valid

user = {}; // Error

Important Points

• Block scoped

• Cannot be redeclared

• Cannot be reassigned

• Must be initialized during declaration

• Object and array contents can still be modified

var vs let vs const

Primitive Data Types

Definition

Primitive data types are immutable values that store the actual value directly.

Explanation

Primitive values are copied when assigned to another variable. Modifying one variable does not affect the other because each variable stores its own copy.

JavaScript has 7 primitive data types:

• String

• Number

• Boolean

• Undefined

• Null

• Symbol

• BigInt

Example

let a = 10;
let b = a;

b = 20;

console.log(a);

Output

10

Important Points

• Immutable

• Stored by value

• Compared by value

• Independent copies are created during assignment

Non-Primitive Data Types

Definition

Non-primitive data types are objects that store a reference to the actual data instead of the data itself.

Explanation

When an object or array is assigned to another variable, JavaScript copies the reference, not the object. Both variables point to the same memory location.

Examples include:

• Object

• Array

• Function

• Date

• Map

• Set

Example

const user1 = {
  name: "Aditya",
};

const user2 = user1;

user2.name = "Rahul";

console.log(user1.name);

Output

Rahul

Important Points

• Mutable

• Stored by reference

• Compared by reference

• Multiple variables can reference the same object

Pass by Value vs Pass by Reference

Pass by Value

Definition

Pass by value means a copy of the original value is assigned or passed.

Explanation

Changing the copied value does not affect the original because both variables store separate copies.

Example

let a = 10;
let b = a;

b = 20;

console.log(a);

Output

10

Pass by Reference

Definition

For objects, JavaScript copies the reference to the object instead of creating a new object.

Explanation

Both variables point to the same object. Any modification made through one variable is visible through the other.

Example

const obj1 = {
  name: "John",
};

const obj2 = obj1;

obj2.name = "Alex";

console.log(obj1.name);

Output

Alex

Key Differences

Interview Note: JavaScript is technically pass-by-value. For objects, the value being copied is the reference, which is why changes are reflected in all variables pointing to the same object.

Undefined vs Null

Undefined

Definition

undefined is the default value assigned to a variable that has been declared but not initialized.

Example

let age;

console.log(age);

Output

undefined

Null

Definition

null represents an intentional absence of value assigned by the developer.

Example

let user = null;

Key Differences

Undefined vs Not Defined

Undefined

A variable exists but has not been assigned a value.

let city;

console.log(city);

Output

undefined

Not Defined

A variable has never been declared.

console.log(city);

Output

ReferenceError: city is not defined

Key Differences

NaN

Definition

NaN stands for Not a Number and represents an invalid numeric result.

Explanation

It is returned when a mathematical operation cannot produce a valid number.

Example

console.log(Number("Hello"));

Output

NaN

Another common interview question:

console.log(NaN === NaN);

Output

false

Use Number.isNaN() to check whether a value is NaN.

Important Points

• Type of NaN is number

• NaN is not equal to itself

• Use Number.isNaN() instead of == or ===

typeof Operator

Definition

The typeof operator is used to determine the data type of a value.

Explanation

It returns a string representing the type of the operand. It is commonly used for type checking in JavaScript.

Example

typeof "Hello";      // "string"
typeof 10;           // "number"
typeof true;         // "boolean"
typeof undefined;    // "undefined"
typeof Symbol();     // "symbol"
typeof 10n;          // "bigint"
typeof {};           // "object"
typeof [];           // "object"
typeof function(){}; // "function"
typeof null;         // "object"

Important Points

• Returns the type as a string.

• Arrays return "object".

• Functions return "function".

• typeof null returns "object" due to a legacy JavaScript behavior.

Interview Questions

1. What is the difference between var, let, and const?

2. What is the difference between function scope and block scope?

3. Explain primitive and non-primitive data types.

4. What is the difference between pass by value and pass by reference?

5. What is the difference between undefined and null?

6. What is the difference between undefined and not defined?

7. What is NaN? Why is NaN !== NaN?

8. Why does typeof null return "object"?

9. Why does typeof [] return "object"?

10. How does the typeof operator work?

As engineers, we naturally spend most of our time learning new technologies, building projects, and improving our technical skills. But this talk made me realize that technical skills alone are no longer enough.

The people who create the biggest impact aren't always the best engineers they're often the ones who know how to distribute their work.

These are the ideas that stayed with me and how I interpret them as a developer and aspiring founder.

Distribution is More Valuable Than Product

One of the strongest ideas from the talk was that distribution is often more valuable than the product itself.

At first, that sounds wrong. As developers, we're taught that if we build something great, users will naturally come.

Reality is different.

Distribution brings users. Users bring feedback. Feedback helps improve the product.

Better products attract better talent, investors, customers, and opportunities. Distribution creates a flywheel that makes everything else easier.

The product still matters, but without distribution, even great products can remain invisible.

Content is a Long-Term Asset

I used to think content was mainly for creators and influencers.

Now I see it differently.

Every article, project breakdown, technical tutorial, LinkedIn post, or YouTube video becomes a long-term asset that keeps working even when you're offline.

You're not creating content for today's likes.

You're creating opportunities that might appear months or even years later.

Luck Can Be Engineered

Another idea that really resonated with me was that success often looks like luck.

The difference is that some people deliberately increase their chances of getting lucky.

Every project you publish... Every article you write... Every conference you attend... Every developer you connect with... Every lesson you share...

...increases the number of opportunities that can find you.

You can't control when luck happens.

But you can increase the probability.

Content is a Lightning Rod

Varun compared content to a lightning rod.

Lightning is unpredictable.

But if you're visible enough, eventually some of that lightning hits you.

That could be:

• a recruiter discovering your profile,

• a freelance client reaching out,

• a founder inviting you to collaborate,

• an investor noticing your startup,

• or someone recommending your work.

You don't know where the opportunity will come from.

That's exactly why visibility matters.

Every Profession Needs Distribution

One thing I hadn't thought about before was that distribution isn't only for startups or creators.

Doctors benefit from it.

Lawyers benefit from it.

Designers benefit from it.

Developers benefit from it.

Consultants benefit from it.

Freelancers benefit from it.

The internet rewards people who consistently share valuable work.

Trust is Built Through Repetition

People rarely trust someone after seeing them once.

Trust grows through repeated interactions.

Seeing your projects.

Reading your articles.

Watching your talks.

Following your progress.

Over time, people stop seeing you as a stranger and start seeing you as someone whose work they know.

That's when opportunities naturally begin to appear.

Build Your Reputation Before You Need It

One mistake many people make is trying to build a personal brand only when they need a job or clients.

By then, you're asking people to trust someone they've never seen before.

A much better approach is to build that trust continuously.

Share what you're learning.

Document your projects.

Explain your technical decisions.

Teach what you're discovering.

When opportunities arrive, people already know your work.

Content is More Than Views

Views are only a surface-level metric.

The real outcome of content is trust.

Someone might watch ten of your articles before reaching out.

A founder might silently follow your work for months before sending you a message.

You rarely know which piece of content influenced someone.

That's why consistency matters much more than individual performance.

Give Value Before You Sell

One idea I really liked was that the best creators don't constantly promote themselves.

They provide value first.

Teach.

Educate.

Entertain.

Solve problems.

Then occasionally talk about your product, service, or business.

People naturally trust those who consistently help them.

Think in Years, Not Weeks

Building distribution isn't a 30-day challenge.

It's a long-term investment.

The benefits compound slowly.

One article won't change your career.

Neither will one project.

But years of consistently sharing your work can completely transform the opportunities available to you.

The 7-11-4 Principle

One framework mentioned in the talk really stood out.

People usually don't trust a person or brand after seeing them once.

Trust often requires multiple interactions across different platforms over time.

That completely changed how I think about personal branding.

Instead of trying to create one viral post, it's probably more valuable to publish consistently for years.

Developers Should Build in Public

This was probably my biggest takeaway.

Instead of only uploading finished projects to GitHub, I want to share:

• why I built something,

• what problems I solved,

• what mistakes I made,

• the architecture decisions,

• performance improvements,

• lessons learned,

• and what I'd do differently next time.

Clients and recruiters aren't only evaluating the final project.

They're evaluating how you think.

My Biggest Reflection

As developers, we spend years investing in technical skills.

Those skills will always be important.

But I'm starting to believe another skill deserves equal attention:

The ability to communicate your work.

Writing, teaching, documenting, and sharing ideas don't replace engineering—they amplify it.

This blog is my way of doing exactly that.

I'll continue documenting what I build, what I learn, and the ideas that shape how I think about software engineering, AI, startups, freelancing, and entrepreneurship.

If one article helps someone solve a problem, discover a new perspective, or simply think differently, then it's worth writing.

• Why is JavaScript called single-threaded?

• Why does setTimeout(..., 0) run later?

• What is the Call Stack?

• What are the Task Queue and Microtask Queue?

• What does the Event Loop actually do?

then you're in the right place.

These are some of the most common JavaScript interview questions, and they often confuse beginners because many tutorials explain them using complicated terms.

In this article, we'll understand how JavaScript executes code internally in the simplest way possible. By the end, you'll not only understand the concepts but also be able to explain them confidently in interviews.

Let's begin.

What Happens When You Run JavaScript?

Whether you run JavaScript in a browser or in Node.js, the execution process follows the same basic idea.

JavaScript Code
       ↓
JavaScript Engine
       ↓
Execution Context
       ↓
Call Stack
       ↓
Code Starts Executing

The JavaScript engine (like V8 in Chrome and Node.js) reads your code, creates an execution environment, and starts executing it line by line.

Before we understand asynchronous JavaScript, we first need to understand how synchronous code works.

What is an Execution Context?

An Execution Context is simply the environment where JavaScript executes your code.

Whenever JavaScript starts running a file, it creates a Global Execution Context.

It has two phases:

Think of it like preparing a classroom before teaching begins.

• First, all the students enter the classroom (Memory Phase).

• Then, the teacher starts teaching (Execution Phase).

The Call Stack

The Call Stack is one of the most important concepts in JavaScript.

It is responsible for executing JavaScript code.

Whenever JavaScript wants to execute something, it pushes it into the Call Stack.

The Call Stack follows the LIFO (Last In, First Out) rule.

For example:

console.log("A");
console.log("B");
console.log("C");

Execution happens like this:

Push A
↓

Execute A
↓

Pop A
↓

Push B
↓

Execute B
↓

Pop B
↓

Push C
↓

Execute C
↓

Pop C

Output:

A
B
C

The Call Stack executes only one operation at a time.

Why is JavaScript Single-Threaded?

This is probably the most asked interview question.

JavaScript has one Call Stack, which means it executes one piece of JavaScript code at a time.

Imagine a restaurant with only one chef.

Customers
   │
   ▼
👨‍🍳 One Chef

The chef cannot cook five dishes at the same time.

He finishes one order before starting the next.

JavaScript works exactly the same way.

One Call Stack = One Thread = One JavaScript operation at a time.

This is why JavaScript is called single-threaded.

Then How Does JavaScript Handle Asynchronous Code?

Consider this example:

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 2000);

console.log("End");

Most beginners expect JavaScript to wait for two seconds.

But the output is:

Start
End
Timeout

Why?

Because JavaScript itself doesn't wait.

Instead, it delegates asynchronous work to the environment (Browser APIs or Node.js APIs).

The execution looks like this:

Call Stack
      │
      ▼
setTimeout()
      │
      ▼
Browser / Node API
      │
      ▼
Timer Starts
      │
      ▼
Call Stack Continues

While the timer is running, JavaScript continues executing the remaining code.

That's why "End" prints immediately.

Is setTimeout Part of JavaScript?

This is one of the biggest misconceptions.

No.

setTimeout() is not part of the JavaScript language.

It is provided by the environment.

When JavaScript sees setTimeout(), it asks the browser (or Node.js) to handle the timer.

JavaScript itself never manages timers.

What Happens After the Timer Finishes?

When the timer completes, the callback does not go directly into the Call Stack.

Instead, it goes into a queue called the Task Queue.

You might also hear different names for the same queue.

All three names usually refer to the same queue.

So if an interviewer says Callback Queue, Task Queue, or Macrotask Queue, don't get confused.

They're talking about the same thing.

Then What is the Event Loop?

Now imagine the callback is waiting inside the Task Queue.

Who moves it back to the Call Stack?

The answer is the Event Loop.

The Event Loop continuously checks two things:

1. Is the Call Stack empty?

2. Is there any callback waiting?

If the Call Stack is empty, it moves the callback from the queue into the Call Stack.

A simple mental model looks like this:

while (true) {

    Is Call Stack Empty?

        Yes

          ↓

    Run Microtasks

          ↓

    Run One Task
}

This isn't the real implementation, but it's a great way to understand how the Event Loop behaves.

Microtask Queue vs Task Queue

JavaScript actually has two queues.

                Event Loop
                     │
         ┌───────────┴───────────┐
         │                       │
         ▼                       ▼
Microtask Queue           Task Queue
   (Higher Priority)     (Lower Priority)

The Microtask Queue has higher priority than the Task Queue.

Microtask Queue

Examples:

• Promise.then()

• Promise.catch()

• Promise.finally()

• queueMicrotask()

Task Queue

Examples:

• setTimeout()

• setInterval()

• DOM Events

• MessageChannel

This priority difference is very important for interviews.

Let's Understand with an Example

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
    console.log("Promise");
});

console.log("End");

What do you think the output will be?

It is:

Start
End
Promise
Timeout

Let's understand why.

Step 1

JavaScript executes the synchronous code.

Output:

Start
End

Step 2

The Promise callback goes into the Microtask Queue.

The setTimeout callback goes into the Task Queue.

Current state:

Microtask Queue

Promise

Task Queue

Timeout

Step 3

The Event Loop checks the queues.

It always executes all Microtasks first.

So JavaScript executes:

Promise

Step 4

Now the Microtask Queue is empty.

The Event Loop takes one callback from the Task Queue.

Timeout

Final output:

Start
End
Promise
Timeout

This is why Promises always execute before setTimeout() callbacks, even when the timeout is 0.

Complete JavaScript Execution Flow

Here's the complete picture.

JavaScript Code
        │
        ▼
Execution Context
        │
        ▼
Call Stack
        │
        ▼
Async Operation?
        │
   ┌────┴────┐
   │         │
 No         Yes
   │         │
Execute   Browser / Node API
             │
             ▼
      Operation Completes
             │
             ▼
      Queue (Microtask / Task)
             │
             ▼
         Event Loop
             │
             ▼
        Call Stack
             │
             ▼
          Output

Quick Interview Tips

1. Is JavaScript Single-Threaded?

Yes.

JavaScript has only one Call Stack and executes one operation at a time.

2. Does JavaScript Handle Timers?

No.

Timers are handled by Browser APIs or Node.js APIs.

3. Does setTimeout(..., 0) Run Immediately?

No.

It first enters the Task Queue and waits until the Call Stack is empty.

4. Which Queue Has Higher Priority?

The Microtask Queue.

All pending microtasks execute before the Event Loop processes the next task from the Task Queue.

5. Are Task Queue, Callback Queue, and Macrotask Queue Different?

No.

Most of the time, these are simply different names for the same queue.

JavaScript Execution Cheat Sheet

Conclusion

Understanding JavaScript execution isn't about memorizing definitions—it's about understanding the flow.

Every JavaScript program follows the same lifecycle:

1. JavaScript creates an Execution Context.

2. Code starts executing inside the Call Stack.

3. Asynchronous operations are delegated to the environment.

4. Completed callbacks are placed into either the Microtask Queue or the Task Queue.

5. The Event Loop waits for the Call Stack to become empty, executes all pending microtasks, then processes one task, and repeats the cycle.

Once you understand this flow, concepts like Promises, async/await, the Event Loop, setTimeout, and asynchronous programming become much easier to reason about.

If you're preparing for JavaScript interviews, mastering these concepts will help you answer some of the most frequently asked questions with confidence.

It isn't.

Thousands of technically excellent products fail every year because nobody knows they exist. The biggest difference between a successful SaaS founder and an unsuccessful one is rarely coding ability - it's distribution.

This guide summarizes proven insights from successful founders, startup communities, Reddit discussions, Indie Hackers, Y Combinator, SaaStr, and widely recommended startup books.

Think of it as a quick reference whenever you're validating an idea, launching a product, or trying to acquire your first paying customers.

The Biggest Lesson

Distribution comes before perfection.

The order should always be:

1. Find a market that spends money.

2. Find a painful problem.

3. Talk to potential customers.

4. Validate demand.

5. Build the smallest useful solution.

6. Acquire customers.

7. Improve based on feedback.

Never reverse this order.

Best Countries to Sell SaaS

Not every country has the same willingness to pay for software. If you're building globally, prioritize countries where businesses already subscribe to multiple software products.

Priority Markets

If you're a solo founder, focus on:

• 🇺🇸 United States

• 🇬🇧 United Kingdom

• 🇦🇺 Australia

These three markets offer the best combination of purchasing power, English communication, and SaaS adoption.

What Type of Software Sells Best?

For most founders, web applications are the best starting point because they're easy to update, easy to sell through subscriptions, and don't rely on app store approval.

Industries That Happily Pay for Software

Businesses don't pay for software because it's innovative.

They pay because it saves time, increases revenue, or reduces operational costs.

Where Do Customers Discover New Software?

Building software is only half the job. The other half is making sure the right people discover it.

Typical Customer Journey

A buyer rarely discovers software randomly.

Their journey usually looks like this:

Problem
      ↓
Google Search
      ↓
Blog Articles
      ↓
YouTube Videos
      ↓
Reddit Discussions
      ↓
Compare Alternatives
      ↓
Visit Website
      ↓
Free Trial
      ↓
Purchase

This means your marketing should exist across multiple touchpoints, not just your homepage.

The Biggest Mistake New Founders Make

Many developers spend six months building a product before speaking to a single customer.

Instead, spend those months talking to people who already experience the problem.

Ask questions like:

• How do you solve this today?

• What's frustrating about your current solution?

• What tools are you already paying for?

• If you could change one thing, what would it be?

Avoid asking:

"Would you buy my product?"

People often say "yes" to be polite. Their current behavior is a far more reliable indicator than hypothetical answers.

The First 100 Customers

The first customers almost never come from viral marketing.

They come from consistent manual effort.

Focus on:

• Cold emails

• LinkedIn outreach

• Reddit participation

• Community engagement

• Customer interviews

• Founder networking

Don't automate until you've learned what messaging actually resonates.

Reddit Strategy

Reddit is not a place to advertise.

It's a place to build credibility.

Instead of posting:

"Here's my SaaS."

Try:

• Solving someone's problem.

• Writing detailed answers.

• Sharing lessons learned.

• Posting case studies.

• Explaining mistakes.

• Publishing tutorials.

Trust first.

Promotion second.

SEO Strategy

Google is one of the most valuable long-term acquisition channels.

Create content around problems people actively search for.

Examples:

• How to manage interior design clients

• Best CRM for dental clinics

• Invoice templates for freelancers

• AI tools for architects

Your content should solve a real problem before introducing your product.

LinkedIn Strategy

LinkedIn is ideal for B2B software.

Post consistently about:

• Product updates

• Customer stories

• Industry insights

• Lessons learned

• Mistakes

• Behind-the-scenes development

• Educational content

People buy from founders they trust.

YouTube Strategy

You don't need expensive production.

Simple tutorials outperform polished advertisements.

Examples:

• How to solve a common industry problem

• Product walkthroughs

• Customer case studies

• Feature comparisons

• Productivity tips

Teach first.

Sell later.

Cold Email Strategy

Cold email remains one of the fastest ways to validate a SaaS idea.

Keep emails short.

Focus on the recipient's problem.

Never start by listing product features.

Instead:

• Identify the problem.

• Explain the impact.

• Offer a simple solution.

• End with one clear call to action.

Recommended Growth Timeline

Stage 1 (0–10 Customers)

Focus on conversations.

Primary channels:

• Cold Email

• LinkedIn

• Reddit

• Customer interviews

Goal:

Learn.

Not scale.

Stage 2 (10–100 Customers)

Focus on repeatable acquisition.

Add:

• SEO

• Blog posts

• LinkedIn content

• YouTube

• Customer testimonials

Stage 3 (100–1000 Customers)

Focus on systems.

Invest in:

• Google Ads

• Affiliate programs

• Referral systems

• Partnerships

• G2

• Capterra

Books Worth Reading

YouTube Channels Worth Following

Startups

• Y Combinator

• Startup School

• MicroConf

• SaaStr

• Indie Hackers

Marketing

• Ahrefs

• Semrush

• HubSpot

• Exposure Ninja

• Neil Patel

Copywriting & Sales

• Alex Hormozi

• Marketing Against the Grain

• CXL

Product Design

• Design with Arash

• Figma

• Lenny's Podcast

The 80/20 Rule for SaaS Founders

Many developers spend:

• 80% Building

• 20% Marketing

Successful founders usually reverse it after an MVP exists.

A healthier balance is:

• 20% Building

• 40% Talking to Customers

• 20% Marketing

• 20% Content Creation

Your product only grows when people know it exists.

Final Checklist

Before building any SaaS, answer these questions:

• Is this a painful problem?

• Are businesses already spending money to solve it?

• Which country will I target first?

• Who is my ideal customer?

• Where do they spend time online?

• How will I acquire my first 10 users?

• How will I acquire my first 100 users?

• Can I explain my product in one sentence?

• Do I have a distribution plan before writing code?

If you cannot answer these questions, you're not ready to build yet.

Key Takeaways

• Build for markets that already pay for software.

• Validate before you build.

• Talk to customers early and often.

• Master one acquisition channel before expanding.

• SEO compounds over time.

• LinkedIn is powerful for B2B.

• Reddit is for trust, not promotion.

• Cold outreach is still one of the fastest ways to get early customers.

• Content is a long-term asset that attracts buyers continuously.

• Distribution is just as important as product quality.

The founders who succeed are rarely the ones with the most features—they're the ones who consistently solve real problems, reach the right audience, and keep improving based on customer feedback.

If I wanted to build AI applications, I'd eventually have to leave my TypeScript stack behind and learn Python.

As a Full Stack Developer, every AI roadmap I came across looked something like this:

Python → NumPy → Pandas → PyTorch → TensorFlow → Deep Learning → Research Papers...

Honestly, it felt overwhelming.

A few weeks ago, I started digging into how companies actually build computer vision products. Things like:

• Driver monitoring systems in cars

• CCTV analytics

• Smart parking

• Retail theft detection

• Factory safety systems

• Attendance systems

I expected to find hundreds of pages of machine learning magic.

Instead, I found something much more interesting.

AI is just one small part of the system

One thing finally clicked for me.

Most real-world AI products aren't just "an AI model."

They're software systems.

A very simplified architecture looks something like this:

Camera
    ↓
Video Stream
    ↓
AI Model
    ↓
Business Rules
    ↓
Database
    ↓
Notifications
    ↓
Dashboard

The AI model is only one component.

Everything else is just software engineering.

That realization completely changed how I think about AI.

I also misunderstood what YOLO actually does

Before this, I thought models like YOLO somehow understood what was happening inside a video.

They don't.

YOLO doesn't know if someone is cheating in an exam.

It doesn't know if someone is stealing from a store.

It doesn't know if a driver is sleepy.

It simply says things like:

• Person

• Phone

• Bottle

• Car

• Laptop

That's it.

The interesting part comes afterwards.

Your application decides what those detections actually mean.

The business logic is where products become useful

Let's imagine an online exam.

YOLO detects:

• Person

• Phone

Your backend decides:

"If the exam has started and a phone is visible, create an alert."

Now imagine a retail store.

The exact same model detects:

• Person

• Bottle

Different product.

Different business rules.

Same AI model.

That was another big "aha!" moment for me.

You don't always need to train AI models

This was another misconception I had.

I assumed every company trained huge AI models from scratch.

Turns out, many products start with pretrained models.

The engineering effort goes into integrating them into a useful application.

Only after validating the product do teams usually think about collecting their own datasets and improving the model.

The best part?

I don't have to abandon the stack I already enjoy.

I can still build applications using:

• TypeScript

• Node.js

• Next.js

• PostgreSQL

while running pretrained AI models using technologies like ONNX Runtime.

That completely changed how approachable computer vision feels.

I'm still learning

I'm definitely not an expert in this space.

I'm just documenting what I'm learning because I know there are probably other JavaScript developers who think AI is only about ChatGPT or Python.

Over the next few weeks, I'm planning to explore topics like:

• How RTSP cameras actually work

• How AI models process video streams

• Why object tracking matters

• What ONNX Runtime actually does

• How production AI systems are designed

• Building small computer vision projects using TypeScript

If you're also exploring this space, I'd love to connect.

Learning in public has always been one of the best ways I've found to understand something deeply, and hopefully these notes help someone else who's just getting started.

AI Engineering Series – Part 3

If you've started building AI applications, you've probably seen terms like System Role and Temperature.

At first, they look like two simple API parameters. But in reality, these two settings control how an AI behaves and how it generates responses.

Many beginners confuse them because both affect the final output.

The difference is actually very simple.

• System Role decides who the AI should behave as.

• Temperature decides how creative or predictable the AI should be.

By the end of this article, you'll understand both concepts with simple examples, Python code, and interview questions.

What is a System Role?

Think about joining a new company.

Before your manager assigns work, they first assign your role.

You could be:

• A Software Engineer

• A Product Manager

• A QA Engineer

• A Technical Writer

Even if everyone gets the same task, each person approaches it differently because their responsibilities are different.

LLMs work in exactly the same way.

A System Role tells the AI what role it should play before it starts answering your questions.

Simple Definition

A System Role is an instruction that tells an LLM how it should behave throughout the conversation.

How System Role Works

flowchart LR

A[System Role] --> B[LLM]
C[User Prompt] --> B
B --> D[Response Based on Assigned Role]

The model first reads the System Role, then the User Prompt, and finally generates a response based on the assigned role.

Let's Understand with an Example

Suppose the user sends this message.

I love you.

The prompt is always the same.

Only the System Role changes.

This is why the same prompt can produce completely different responses.

The Three Roles in Chat APIs

Every chat-based LLM API uses three message roles.

You can remember them like this:

Why Do We Need a System Role?

Imagine you're building an AI application for a software company.

Instead of creating one AI for everything, you create multiple AI agents.

Even though all agents use the same LLM, each receives a different System Role.

That allows the same model to behave like different professionals.

Using System Role in Practice

Now that you understand what a System Role is, let's see how it works in a real application.

We'll use the same user prompt in both examples.

The only thing we'll change is the System Role.

This will help you understand why System Roles are so powerful.

Example 1: AI Behaves Like a Loving Partner

from groq import Groq

client = Groq()

messages = [
    {
        "role": "system",
        "content": "You are my loving girlfriend."
    },
    {
        "role": "user",
        "content": "I love you."
    }
]

response = client.chat.completions.create(
    model="llama-3.3-70b-versatile",
    messages=messages
)

print(response.choices[0].message.content)

Possible Output

I love you too! That means a lot to me.

The response sounds natural because the model was instructed to behave like a loving partner before processing the user's message.

Example 2: AI Behaves Like an Office Manager

Now let's change only the System Role.

from groq import Groq

client = Groq()

messages = [
    {
        "role": "system",
        "content": "You are my strict office manager."
    },
    {
        "role": "user",
        "content": "I love you."
    }
]

response = client.chat.completions.create(
    model="llama-3.3-70b-versatile",
    messages=messages
)

print(response.choices[0].message.content)

Possible Output

That isn't appropriate in a professional workplace. Let's keep our conversation work-related.

Notice something interesting.

• The user prompt is exactly the same.

• The LLM model is also the same.

• Only the System Role has changed.

Because of that single change, the response is completely different.

How the Model Processes the Request

The model always follows this sequence:

1. Read the System Role.

2. Understand how it should behave.

3. Read the user's prompt.

4. Generate a response according to the assigned role.

This is why the System Role has a significant impact on the final output.

Real-World Example

System Roles become much more useful when building AI applications.

Imagine you're creating an AI platform for a software company.

Instead of using one AI for every task, you can create multiple specialized AI agents.

Although all of these agents use the same underlying LLM, each behaves differently because each receives a different System Role.

This allows one model to perform multiple responsibilities without retraining it.

What is Temperature?

Now that you know how to tell an LLM who it should behave as, let's understand how to control the way it responds.

This is where Temperature comes into the picture.

Many beginners think Temperature changes the intelligence of an AI model.

It doesn't.

Instead, it controls how creative or predictable the model's responses should be.

Temperature is a parameter that controls the randomness of an LLM's output. A lower value makes the response more predictable, while a higher value makes it more creative.

Understanding Temperature with a Simple Example

Imagine you're starting a food delivery company and ask an AI:

Suggest a name for my food delivery startup.

Now let's change only the Temperature value.

The prompt didn't change.

The model didn't change.

Only the Temperature changed.

As the Temperature increases, the model starts generating more creative and unique names.

How Temperature Works

flowchart LR
    A[User Prompt] --> B[LLM]
    C[Temperature] --> B
    B --> D[Final Response]

Unlike the System Role, Temperature doesn't tell the model who it is.

Instead, it influences how the model chooses the next words while generating a response.

Why Does Temperature Change the Output?

To understand this, you first need to know how an LLM works.

Many people think an LLM searches for the correct answer like Google.

That's not true.

An LLM is a prediction model.

It predicts the next most likely word based on the previous words in the conversation.

Temperature changes how safe or adventurous those predictions become.

This is why the same prompt can produce different outputs when the Temperature changes.

Python Example

By default, if you don't specify a Temperature, most models use their default value.

You can control it by passing the temperature parameter while creating the chat completion.

from groq import Groq

client = Groq()

messages = [
    {
        "role": "system",
        "content": "You are a branding expert. Suggest only one name."
    },
    {
        "role": "user",
        "content": "Suggest a name for my food delivery startup."
    }
]

response = client.chat.completions.create(
    model="llama-3.3-70b-versatile",
    messages=messages,
    temperature=0
)

print(response.choices[0].message.content)

Possible Output

Food House

Now, change only the Temperature.

response = client.chat.completions.create(
    model="llama-3.3-70b-versatile",
    messages=messages,
    temperature=1
)

Possible Output

Tasteo

Let's increase it once more.

response = client.chat.completions.create(
    model="llama-3.3-70b-versatile",
    messages=messages,
    temperature=2
)

Possible Output

Swivora

As you can see, increasing the Temperature encourages the model to generate more creative names.

Note: Most LLMs support Temperature values between 0.0 and 2.0. Values outside this range are generally not allowed.

When Should You Use Different Temperature Values?

The ideal Temperature depends on your use case.

System Role vs Temperature

Now let's compare both concepts.

A simple way to remember this is:

• System Role = Who the AI is

• Temperature = How the AI thinks

Conclusion

System Role and Temperature are two of the most important parameters you'll use while working with Large Language Models.

Although they are often mentioned together, they solve different problems.

A System Role gives the AI an identity and defines how it should behave throughout the conversation.

A Temperature value controls how safe, predictable, or creative the generated responses should be.

When these two parameters are used correctly, you can build AI applications that are more reliable, consistent, and tailored to specific use cases.

Whether you're preparing for interviews or building your own AI applications, understanding these concepts will help you design better prompts, create specialized AI agents, and generate higher-quality responses.

JS is an interpreted language that is executed line by line. It doesn't need compilation. It is dynamically typed.

This means the variable in JavaScript is not bound to a specific data type. Types are determined at runtime and can change when the program is executed. JavaScript code is executed in a single thread.

Memory Management is a process of storing variable data in RAM. The Garbage Collector manages memory in JavaScript.

Java and JavaScript use a Garbage Collector. The single-threaded nature makes the app not scalable

The downside of JavaScript:-

Runtime Error

Performance Overhead

File I/O Heavy Operations

Filo I/O refers to a computer program that transfers much data between the program and external systems or devices. These operations usually require waiting for data to be read from or written to sources like disks, networks, databases, or other external devices, which can be time-consuming compared to in-memory computations.

Examples of I/O Heavy Operations:

1. Reading a file

2. Starting a clock

3. HTTP Requests

Callback Function

Callback Functions are the functions that are passed as an argument to another function.

What are Classes in JavaScript?

Classes in JavaScript are a blueprint for creating objects with predefined properties and methods.

Defining a Class

To define a class in JavaScript, you use the class keyword followed by the class name. Inside the class, we define a constructor method, a special method for creating and initialising an object created with a class. You can also define other methods that belong to the class.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is \({this.name} and I am \){this.age} years old.`);
  }
}

In the example above, we have defined a Person class with a constructor that takes name and age as parameters. The greet method is a regular method that prints a greeting message.

Creating an Instance

To create an instance of a class, you use the new keyword followed by the class name and pass any required arguments to the constructor.

const person1 = new Person('Alice', 30);
person1.greet(); // Output: Hello, my name is Alice and I am 30 years old.

Async Await

What is DOM?

DOM stands for Document Object Model. It represents the structure of a web page as a tree of objects.

Why do we need DOM?

The DOM is used to represent the structure of a webpage as a tree of objects, allowing scripts to manipulate the content dynamically.

What is Static HTML?

A Static HTML page is a web document that remains unchanged over time. Unlike dynamic web pages, which can update and display new content based on user interactions or other factors, a static HTML page displays the same information to every visitor.

It is similar to a digital signboard that consistently shows the same message without any alterations. This type of web page is often used for content that does not need to be updated frequently, such as informational pages, company profiles, or contact information.

What is Dynamic HTML?

Dynamic HTML is a web page document where the HTML and its content can change dynamically based on user interactions or other events. This means that the content of the web page is not fixed and can be updated in real time without needing to reload the entire page.

For instance, when you click a button to add a task to a to-do list, the new task appears immediately on the page. This dynamic behaviour is often achieved using JavaScript, which can manipulate the DOM to update the content, styles, and structure of the web page on the fly.

Fetching Elements in DOM

There are 5 Popular methods in which we can fetch our Elements from HTML documents.

• querySelector

• querySelectorAll

• getElementById

• getElementByClassName

• getElementsByClassName

For Example -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   <h1>To Do List</h1>
    <h4 id="task1">1. Go to Gym</h4>
    <h4  id="task2">2. Take Class</h4>
    <h4 id="task3">3 Go</h4>
    <input type="text" placeholder="Type your Task"></input>
    <button onclick="AddTask()">Add Task</button>
</body>
   <script>
var input=document.querySelector("input")
// used to get the value inside the input box
console.log(input.value);
// Selecting Elements using ID
    let task3=document.querySelector("#task3")
    console.log(task3);
   </script>
    
</html>

State-Derived Frontend

The concepts of components and state were introduced to simplify our code and make it more maintainable. Components are reusable, self-contained pieces of UI that can be combined to build complex interfaces.

Each component can manage its own state, which represents the data or properties that control its behaviour and appearance. For example, consider a to-do list application. Each task in the list can be represented as a component.

The application's state might include the list of tasks, the current input value, and any filters applied to the list. When a user adds a new task, the state is updated to include the new task, and the UI re-renders to display it.

We can build more modular, scalable, and interactive web applications using components and states.

Reconciliation

Reconciliation is identifying the differences between the old state and the new state of an application. This process is crucial in modern web development, especially when dealing with dynamic user interfaces that frequently change in response to user actions or data updates.

Node Js

Node.js is a powerful runtime environment that allows developers to execute JavaScript code outside of a web browser. Built on Chrome's V8 JavaScript engine, Node.js is designed to build scalable network applications.

It uses an event-driven, non-blocking I/O model, which makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

What is HTTP Servers

HTTP Servers are essential components that enable communication between clients and servers over the Internet. When a client, such as a web browser, sends a request to access a webpage or resource, the HTTP server processes this request and returns the appropriate response. This response could be an HTML page, a file, or data in formats like JSON or XML.

The server runs various processes to handle these requests efficiently. It listens for incoming requests on specific ports, typically port 80 for HTTP and port 443 for HTTPS.

Upon receiving a request, the server parses it to understand what the client is asking for. It then routes the request to the appropriate handler, which might involve querying a database, executing server-side scripts, or fetching static files from the server's storage.

Why the HTTP Protocol?

The HTTP protocol is essential because it enables machines to communicate with each other over the Internet.

This communication is the backbone of web interactions, allowing browsers to request and receive web pages from servers.

When you type a URL into your browser, an HTTP request is sent to the server hosting the website.

The server then processes this request and returns the appropriate response, which your browser displays as a web page.

What is an IP Address

An IP address, or Internet Protocol address, is a unique identifier assigned to each device connected to a network that uses the Internet Protocol for communication.

Think of it as the digital address of your computer, smartphone, or any other device that connects to the internet.

Just like your home address allows mail to be delivered to your house, an IP address ensures that data sent over the internet reaches the correct destination.

Use the command to check the IP address of any website.

ping website.com

Domain

A domain is a human-readable name mapped to a server's IP address. When someone types the domain name into their browser, the domain name system (DNS) translates this name into the corresponding IP address of the server hosting the website. This process allows users to access websites without remembering complex numerical IP addresses.

For example, when you type "example.com" into your browser, the DNS resolves this domain name to the server's IP address where the website's content is stored. This seamless translation is what makes navigating the internet user-friendly and efficient.

Headers, Query params in Express

What is Headers

Headers are key-value pairs exchanged between the client and the server during HTTP requests and responses. They carry additional metadata that can be used for various purposes, such as authentication, specifying content types, caching policies, and more.

For instance, headers can include information about the type of content being sent (like JSON or HTML), the preferred language of the client, or the credentials needed to access a resource.

When a client makes a request to the server, it can include headers to provide context about the request. For example, the Authorization header might contain a token that the server uses to verify the client's identity.

Similarly, the Content-Type header tells the server what kind of data is being sent, so it knows how to process it.

How to Create Dynamic Endpoints in Express

Creating dynamic endpoints in Express is an essential skill for building flexible and robust web applications. Dynamic endpoints allow your application to handle various routes and parameters, making it more versatile and capable of responding to different user requests.

1. Set Up Your Express Application First, ensure you have Express installed in your project. If not, you can install it using npm:

   npm install express
   

   Then, create a basic Express application:

   const express = require('express');
   const app = express();
   const port = 3000;
   
   app.listen(port, () => {
     console.log(`Server is running on port ${port}`);
   });
   

2. Define a Basic Route Start by defining a simple route to ensure your server is working correctly:

   app.get('/', (req, res) => {
     res.send('Hello, World!');
   });
   

3. Create Dynamic Routes with Route Parameters Dynamic routes use parameters to capture values from the URL. For example, you can create a route that captures a user ID:

   app.get('/user/:id', (req, res) => {
     const userId = req.params.id;
     res.send(`User ID: ${userId}`);
   });
   

   In this example, :id is a route parameter that captures the value provided in the URL.

Types of Routes in Express js

What is Middleware in Express

Middleware in Express is a function that runs during the request-response cycle. It can modify the request or response or end the process. Middleware functions handle tasks like logging, authentication, and error handling.

In simple terms, middleware functions are like a series of steps that a request goes through before getting a response. Each step can perform a specific task, making the process more organized and efficient.

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

// Middleware function to modify request
function modifyRequestMiddleware(req, res, next) {
    // Add a custom property to the request object
    req.customProperty = 'This was added by middleware';

    // Log the original and modified request method and path
    console.log(`Original request URL: ${req.originalUrl}`);
    console.log(`Modified request custom property: ${req.customProperty}`);

    // Continue to the next middleware or route handler
    next();
}

// Use the middleware with a specific route or all routes
app.use(modifyRequestMiddleware);

// Example route
app.get('/', (req, res) => {
    res.send(`Hello, World! Custom Property: ${req.customProperty}`);
});

// Start the server
const port = 3000;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

CORS Middleware - Cross-Origin Resource Sharing

Cross-Origin Resource Sharing (CORS) is a security feature used by web browsers to control how web pages can request resources from a different domain than the one they came from. This is important for keeping the web secure and private. CORS is especially important for web apps that need to talk to APIs on other domains.

For example, if your web app is on example.com and needs to get data from api.example.com, CORS rules will decide if this request is allowed. Without the right CORS setup, these requests might be blocked by the browser, stopping your app from getting the data it needs. So, knowing how to set up CORS correctly is crucial for developers making web apps that use external APIs, ensuring smooth and safe data sharing between different domains.

For Example :

Imagine you have a web application hosted on example.com, and it needs to fetch data from an API hosted on api.example.com. By default, web browsers block these cross-origin requests for security reasons. However, if api.example.com it wants to allow requests from example.com, it can do so by including specific HTTP headers in its response.

For instance, api.example.com it can include the Access-Control-Allow-Origin header in its response, specifying which domains are allowed to access its resources. If the header is set to Access-Control-Allow-Origin: *, it means any domain can access the resources. Alternatively, it can specify a particular domain like Access-Control-Allow-Origin: example.com, to allow only that domain to access the resources.

Why Use CORS?

When building web applications, you often need to make requests to APIs that are hosted on different domains. Without CORS, these requests would be blocked by the browser's same-origin policy. CORS allows you to specify which domains are permitted to access your resources, thereby enabling secure cross-domain communication.

Setting Up CORS in Express

To enable CORS in your Express application, you need to use the cors middleware. First, install the cors package using npm:

npm install cors

Next, integrate the cors middleware into your Express application. Here’s how you can do it:

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

// Use the CORS middleware
app.use(cors());

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

How to Serve Files on IntraNet

Sometimes we need to share files within the same network. A common example is when we host the front end and back end on different ports on our local system. In such cases, we can use an npm library called serve, which allows us to share our files on the local network.

How to use Serve

To share files on the same network, or when hosting frontend and backend on different ports locally, you can use an npm library called serve. This allows you to share files on the local network.

Serve Installation

npm i serve

How to Use Serve

Open the terminal in the folder you want to share, then run the command:

npx serve

What is an Authentication Token

An authentication token is a piece of data that is used to verify the identity of a user or a system. It acts as a digital key that allows access to various resources and services.

Authentication tokens are commonly used in web applications to manage user sessions and ensure secure communication between the client and the server.

How Authentication Tokens Work

1. User Login: When users log in to an application, they provide their credentials, such as a username and password.

2. Token Generation: The server verifies the credentials and, if they are correct, generates an authentication token. This token is usually a long string of characters that is difficult to guess.

3. Token Storage: The token is sent back to the client, where it is stored, typically in local storage or a cookie.

4. Token Usage: For subsequent requests, the client includes the token in the request headers. The server then verifies the token to ensure the request is coming from an authenticated user.

5. Token Expiry: Tokens usually have an expiration time. After this time, the user will need to log in again to get a new token.

Types of Authentication Tokens

• JWT (JSON Web Tokens): These are widely used tokens that contain encoded JSON objects. They are self-contained and can include user information and claims.

• OAuth Tokens: These tokens are used in OAuth authentication, allowing third-party applications to access user data without exposing user credentials.

• Session Tokens: These are simpler tokens used to maintain user sessions. They are often stored on the server side.

Benefits of Using Authentication Tokens

• Security: Tokens help secure user data and ensure that only authenticated users can access certain resources.

• Scalability: Tokens can be easily managed and validated, making them suitable for scalable applications.

Statelessness: Tokens allow for stateless authentication, meaning the server does not need to store session information, which can improve performance.

How to Create an Authentication in Express

Step 1. Initialise an npm project using npm init command.

Step 2. Install the express using npm i express.

Step 3. Create a basic Express app with two endpoints: signin and signup, both using the POST method.

const express = require("express")
const app = express()
const port = 3000
app.use(express.json())
const userDetails = []

app.post("/signup", function (req, res) {
const username = req.body.username
const password = req.body.password
userDetails.push({ username: username, password: password })
res.json({ msg: "You are succefully signed up" })
console.log(userDetails);
})

app.post("/signin")

Step 4. Add middleware app.use(express.json()) to parse the JSON body.

Step 5. Define a sign-up endpoint with middleware that takes username and password from the body.

Step 6. Next, define a global variable that will store the user details in an array.

Step 7. In the sign-up route, push the username and password into the global variable that stores the users' data in JSON format.

Generating a Random Token for the Authentication Process

Step 1. Define a function that generates a random token for the authentication process.

Step 2. Define a token variable as an empty string.

Step 3. Next, define arrays consisting of numbers and alphabets to help generate a unique token.

Step 5. Run a loop through the arrays multiple times to generate a long token, then update the token variable and return it.

function genearateToken() {
    let token = ""
    let options = [
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
        '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'
    ];
    for (let index = 0; index < 32; index++) {
        token = token + options[Math.floor(Math.random() * options.length)]
    }
    return token
}

Generating a Token When Users Sign In to the App

Step 1. Go to the sign-in endpoint and define variables for the username and password, extracting their values from req.body.

Step 2. Check if the given username and password exist in the global variable using the find method and an if-else statement.

Step 3. If the username and password are valid, call the random token generator function, store the generated token in a variable, and push that token into the global variable.

Step 4. If the username and password are not valid, return a message stating that the username and password are not valid.

app.post("/signin", function (req, res) {
    const username = req.body.username
    const password = req.body.password
    const user = userDetails.find((u) => {
        if (u.username == username && u.password == password) {
            const userToken = genearateToken()
            u.token = userToken
            res.json({ "username":username,"password":password,"Token": userToken })

        }
        else {
            res.status(403).send({
                msg: "Invalid Username and Password"
            })

        }
    })
    console.log(userDetails);
    
})

Defining an Authentication Endpoint

Step 1. Define an authentication endpoint with the Get method.

Step 2. Define a variable in the end-points named user token that take value from the req.headers.token

Step 3. And then you have to check if that token in present in the global variable then you can send the actual username and password or else you can send an Invalid Token

Code Example

•                                                         const express = require("express")
                                                          const app = express()
                                                          const port = 3000
                                                          app.use(express.json())
                                                          const userDetails = []
                                                          
                                                          function genearateToken() {
                                                              let token = ""
                                                              let options = [
                                                                  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                                                                  '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'
                                                              ];
                                                              for (let index = 0; index < 32; index++) {
                                                                  token = token + options[Math.floor(Math.random() * options.length)]
                                                          
                                                          
                                                              }
                                                              return token
                                                          
                                                          
                                                          }
                                                          
                                                          app.get("/", function (req, res) {
                                                              res.send("Hello World")
                                                          })
                                                          
                                                          app.post("/signup", function (req, res) {
                                                              const username = req.body.username
                                                              const password = req.body.password
                                                              userDetails.push({ username: username, password: password })
                                                              res.json({ msg: "You are succefully signed up" })
                                                              console.log(userDetails);
                                                          
                                                          
                                                          })
                                                          app.post("/signin", function (req, res) {
                                                              const username = req.body.username
                                                              const password = req.body.password
                                                              const user = userDetails.find((u) => {
                                                                  if (u.username == username && u.password == password) {
                                                                      const userToken = genearateToken()
                                                                      u.token = userToken
                                                                      res.json({ "username": username, "password": password, "Token": userToken })
                                                          
                                                                  }
                                                                  else {
                                                                      res.status(403).send({
                                                                          msg: "Invalid Username and Password"
                                                                      })
                                                          
                                                                  }
                                                              })
                                                              console.log(userDetails);
                                                          
                                                          })
                                                          
                                                          // Authentication End Point
                                                          app.get("/user", function (req, res) {
                                                              let userToken = req.headers.token
                                                              let users = userDetails.find(user => user.token === userToken)
                                                              console.log(users);
                                                          
                                                              if (users) {
                                                                  res.send({ "username": users.username, "password": users.password })
                                                              }
                                                              else {
                                                                  res.send("Invalid Token")
                                                              }
                                                              console.log(userDetails);
                                                          })
                                                          app.listen(port, () => {
                                                              console.log('App is running at port', port);
                                                          
                                                          })
  

How to Perform Authentication Using the JWT Library

Authentication is a critical part of any application, ensuring that users are who they claim to be. In this guide, we will walk through setting up authentication using the JWT (JSON Web Token) library in a Node.js application.

JWT is a popular method for securing APIs, as it allows for stateless authentication, meaning the server does not need to store session information.

What is JWT (JSON Web Token)

JWT stands for JSON Web Token, which is mostly used for authentication and information exchange between the web application.

JWT is stateless, which means that we don’t have to store the session data all the data is stored in the token itself.

Why we use JWT Instead of Random Token

JWTs are stateless, meaning we don’t have to store them in a variable or database. The token itself contains the username and password.

In contrast, random tokens are stateful, meaning we need to store these tokens in a variable or database.

If the token is stateful, we have to send a request to the database every time to verify the token, which increases the database request time.

Step 1: Setting Up Your Project

First, create a new Node.js project and install the necessary dependencies. You will need Express to handle HTTP requests and JSON web tokens to generate and verify tokens.

mkdir jwt-authentication
cd jwt-authentication
npm init -y
npm install express jsonwebtoken

Step 2: Creating the Express Server

Next, create a file named server.js and set up a basic Express server.

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
const port = 3000;

app.get("/", function (req, res) {
    res.send("Hello World")
})

app.listen(port, () => {
    console.log('App is running at port', port);
});

Step 3: Add middleware to parse JSON and Define a global variable to store user details.

In this step, we need to define a global middleware to parse the JSON body from incoming requests. This middleware will allow us to easily access the data sent in the request body, headers, or query parameters

app.use(express.json())

Next, we have to define a global variable that can store user details. Because in this we will not use any database.

app.use(express.json())
const userDetails = []

Step 5. Define a Sign-up Route with POST method for user sign-up

Now, we need to create a sign-up route using the POST method so users can sign up. We define username and password variables to get the information from req.body.

After that, we store this data by pushing it in JSON format to our global array named userDetails. Then, we return a message indicating that the user signed up successfully.

app.post("/signup", function (req, res) {
    const username = req.body.username
    const password = req.body.password
    userDetails.push({ username: username, password: password })
    res.json({ msg: "You are succefully signed up" })
    console.log(userDetails);
})

Step 5. Define a Sign-in Route with POST method for user sign-in

The next endpoint will be the sign-in endpoint using the POST method. Here, we will check if the user enters the correct username and password, and then assign them a JWT token.

We will define two variables, username and password, get the values from req.body. We will check if the username and password are in our global variable.

If valid, we will create a new variable to convert the username into a JWT. We will call jwt.sign with two arguments: the username and JWT_SECRET. Finally, we will return the JSON data with the username, password, and JWT token.

app.post("/signin", function (req, res) {
    const username = req.body.username
    const password = req.body.password
    const user = userDetails.find((u) => {
        if (u.username == username && u.password == password) {
            const userToken = jwt.sign({username:username},JWT_SECRET)
            res.json({ "username":username,"password":password,"Token": userToken })

        }
        else {
            res.status(403).send({
                msg: "Invalid Username and Password"
            })

        }
    })
    console.log(userDetails);
    
})

Step 6. Define a user Route with the GET method for Authentication

Now, we will define a route for the authentication process. We will create a variable userToken to get the value from req.headers. Then, we will define a variable to verify the user token by calling jwt.verify with two arguments: the JWT token and the secret key.

Once we get the actual username, we will check if the user is in our global variable. If the user is present, we will return the username and password. Otherwise, we will return a response saying "Invalid Token".

app.get("/user",function(req,res){
    let userToken=req.headers.token
    const decordeInformation=jwt.verify(userToken,JWT_SECRET) //Convert JWT into json
    const username=decordeInformation.username
    let users=userDetails.find(user=>user.username===username)
    console.log(users);
    
    if (users){
        res.send({"username":users.username,"password":users.password})
    }
    else{
        res.send("Invalid Token")
    }
    console.log(userDetails);
})

Conclusion

The authentication process using JSON Web Tokens (JWT) is now complete. We've set up a route to handle user authentication by verifying the provided token and returning the appropriate user details.

Here's a detailed breakdown of the steps involved:

1. Define the Route: We created a route using the GET method to handle authentication requests. This route is defined at the endpoint /user.

2. Extract the Token: Within the route handler, we extract the token from the request headers. This token is expected to be provided by the client in the req.headers.token field.

3. Verify the Token: We use the jwt.verify method to decode and verify the token. This method takes two arguments: the token itself and the secret key (JWT_SECRET). The result of this verification is stored in the decordeInformation variable, which contains the decoded information from the token.

4. Retrieve the Username: From the decoded information, we extract the username. This is done by accessing the username property of the decordeInformation object.

5. Find the User: We then search for the user in our global userDetails array. This is done using the find method, which checks if any user in the array has a username that matches the extracted username.

6. Return the Response:

   • If the user is found, we send a response containing the user's username and password.

   • If the user is not found, we send a response indicating that the token is invalid.

Here's the complete code for the route:

app.get("/user", function(req, res) {
    let userToken = req.headers.token;
    const decordeInformation = jwt.verify(userToken, JWT_SECRET); // Convert JWT into JSON
    const username = decordeInformation.username;
    let users = userDetails.find(user => user.username === username);
    console.log(users);

    if (users) {
        res.send({"username": users.username, "password": users.password});
    } else {
        res.send("Invalid Token");
    }
    console.log(userDetails);
});

By following these steps, we ensure that only authenticated users can access their details, providing a secure way to handle user authentication in our application.

How to Connect Frontend and Backend

Week 7 Day 1

What is a Database?

A database is an organized collection of data that is stored and accessed electronically. Databases are designed to manage large amounts of information by storing, retrieving, and managing data efficiently.

They are essential for various applications, from simple data storage to complex data analysis and transaction processing.

What is NoSQL Databases

NoSQL Databases are a broad category of databases that diverge from the traditional relational model used in SQL Databases.

They are designed to handle a variety of data models and workloads that may not fit neatly into the tabular schema of relational databases.

Main Advantage of NoSQL Databases

There are mainly two advantages of using NoSQL Databases

1. Schema Flexibility: NoSQL Databases like MongoDB provide Schema flexibility, which means that we can store that in our database which doesn’t have any fixed structure or formats.

2. Scalability: Many NoSQL databases are designed to scale out horizontally, making it easier to distribute data across multiple servers and handle large volumes of traffic.

What is Schema

Schema provides a detailed blueprint and a comprehensive idea of how your database will be structured. It represents the logical organization and storage of data within the database.

Essentially, a schema outlines the way data is organized into tables, the relationships between these tables, and the constraints that govern the data.

What is the Advantage of Using NoSQL Databases?

NoSQL databases offer several advantages over traditional relational databases, making them popular for many modern applications. Here are some key benefits:

1. Scalability: NoSQL databases are designed to scale by distributing data across multiple servers. This horizontal scaling allows them to handle large volumes of data and high traffic loads more efficiently than traditional relational databases, which typically scale up by adding more powerful hardware.

2. Flexibility: Unlike relational databases that require a fixed schema, NoSQL databases offer flexible data models. This means you can store unstructured, semi-structured, or structured data without needing to define a rigid schema upfront. This flexibility is particularly useful for applications that deal with diverse data types or rapidly changing data structures.

3. Performance: NoSQL databases are optimized for specific data models and access patterns, which can result in faster read and write operations. For example, key-value stores are highly efficient for simple lookups, while document stores excel at managing hierarchical data.

4. Availability: Many NoSQL databases are designed with high availability and fault tolerance in mind. They often use replication and distributed architecture to ensure that the system remains operational even if some nodes fail. This makes NoSQL databases a reliable choice for applications that require continuous uptime.

5. Cost-Effectiveness: By leveraging commodity hardware and open-source software, NoSQL databases can be more cost-effective than traditional relational databases. The ability to scale out using inexpensive servers reduces the overall cost of ownership.

6. Handling Big Data: NoSQL databases are well-suited for big data applications that involve large volumes of data generated at high velocity. They can efficiently process and store massive datasets, making them ideal for use cases such as real-time analytics, IoT data storage, and social media data management.

7. Support for Modern Applications: NoSQL databases are designed to meet the needs of modern applications, such as mobile apps, web apps, and cloud-based services. They provide features like automatic sharding, replication, and eventual consistency, which are essential for building scalable and resilient applications.

What is MongoDB

MongoDB is a NoSQL database that uses a document-oriented approach to data storage. Unlike traditional relational databases, MongoDB stores data in flexible, JSON-like documents.

These documents can have nested structures and varied fields, allowing for a more dynamic and adaptable data model. This flexibility makes it easier to handle complex data types and structures without the need for predefined schemas.

MongoDB's ability to store data in this way enables developers to build applications that can evolve, adding new fields and structures as needed without requiring major changes to the database schema. This makes MongoDB an excellent choice for applications that require rapid development and iteration.

What is MongoDB Clusters

A MongoDB Cluster is a group of servers that work together to store and manage a collection of data. In a cluster, data is distributed across multiple machines, which helps to improve performance, scalability, and reliability.

Each machine in the cluster is known as a node, and these nodes can be spread across different geographic locations to ensure high availability and fault tolerance.

Within a MongoDB Cluster, data is stored in collections, which are similar to tables in relational databases. These collections contain documents, which are the basic units of data in MongoDB.

Documents are stored in a flexible, JSON-like format, allowing for nested structures and varied fields. This flexibility makes it easier to handle complex data types and structures without the need for predefined schemas.

Using Mongoose for MongoDB

To use the MongoDB database effectively, we will utilize the Mongoose library. Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It provides a straightforward, schema-based solution to model your application data.

With Mongoose, you can define schemas for your database, which helps structure and validate the data you store.

By defining schemas, Mongoose allows you to enforce a specific structure on the documents within a collection. This means you can specify the types of data each field should contain, set default values, and even create custom validation rules.

This added layer of structure and validation can be incredibly useful for maintaining data integrity and consistency across your application.

Create Schema With Mongoose

Step 1. First Install the Mongoose library using the command given below.

npm i mongoose

Step 2. Now, create a database file with the js extension.

Step 3. The first step is to, import the Mongoose library to a variable.

const mongoose=require("mongoose")

Step 3. Then, You have to import schema and objectId from the Mongoose like this

const Schema=mongoose.Schema
const ObjectId=mongoose.ObjectId

Step 4. Now, define a variable that calls the new Schema constructor and inside it, specify the data type for each field.

const user=new Schema({
    name:String,
    email:String,
    password:String
})

Step 5. Then, you have to create a model using a model function inside the Mongoose library

const usermodel=mongoose.model("users",user)

Step 6. Now, export this model so that we can use it on our backend.

module.exports={usermodel:usermodel}

Connecting MongoDB Database With Backend

To connect your MongoDB database with your backend application, follow these detailed steps:

To connect to your MongoDB database, use the mongoose.connect method. You typically do this in your main server file (e.g., app.js or server.js). Here is an example of how to connect to a MongoDB database:

const mongoose = require("mongoose");
const dataBase=mongoose.connect('mongodb://localhost:27017/yourDatabaseName')

Replace 'mongodb://localhost:27017/yourDatabaseName' with the actual URI of your MongoDB database.

Then you also have to import the database schema

const { usermodel, Todomodel } = require("./db")

Example of Inserting Data into MongoDB Database via Request

Here is an example of inserting a record through an API request:

app.post("/signup", async function (req, res) {
    const name = req.body.name
    const password = req.body.password
    const email = req.body.email

    try {
        let userData = await usermodel.create({
            "name": name,
            "email": email,
            "password": password
        })
        await userData.save()
    } catch (error) {
        res.status(403).json("Some error has been Occured")
    }
    res.json({ msg: "Send Successfully" })
})

Example of Finding Records in MongoDB

app.post("/signin", async function (req, res) {
    const password = req.body.password
    const email = req.body.email
    const user = await usermodel.findOne({
        email: email,
        password: password
    })
    if (user) {
        const token = jwt.sign({ id: user._id }, JWT_Secret)
        res.json({
            "Token": token
        })
    }
    else {
        res.status(403).json({ message: "Incorrect Credentials" })
    }
})

Conclusion

In conclusion, the MongoDB section of this article explores NoSQL databases, highlighting their benefits like schema flexibility and scalability. It introduces MongoDB as a document-oriented database that stores data in a flexible, JSON-like format, suitable for handling complex and evolving data structures.

The section also explains MongoDB clusters, which improve performance, scalability, and reliability by distributing data across multiple nodes. This guide is a valuable resource for developers looking to use MongoDB for their data storage and management needs.

Storing Passwords in the Database with Hashing

Week 7 Day 2

What is Hashing?

Hashing is a process used in computer science and cryptography to transform data into a fixed-size string of characters, which is typically a hash code.

This transformation is accomplished using a hash function, which takes an input (or 'message') and returns a unique hash value. The primary purpose of hashing is to enable fast data retrieval and to ensure data integrity.

Why we should use Hashing

Password hashing is a special technique used to securely store passwords, making them hard to misuse. Instead of storing passwords directly in our database, we should convert them to hashes and then store them.

What is Salt?

A randomly generated value is added to the password before the hashing. This prevents attackers from using precomputed tables (rainbow tables) to crack passwords.

What is Salting?

Salting is a technique used with hashing to make passwords stronger. If two users have the same password, the hash will be the same, making it easy for an attacker to crack. Salting adds randomly generated text to the password and then converts it in the hash, so each hash value differs.

B-Crypt

B-Crypt is a popular password hashing function designed to be computationally intensive to resist brute-force attacks.

It incorporates a salt to protect against rainbow table attacks and includes a work factor, which determines how slow the hashing process will be.

This work factor can be adjusted to make the hashing process more time-consuming, thereby increasing the security of the hashed passwords.

How to use the Bcrypt Library

Convert Password with Hashing

Step 1. First, download the Bcrypt library using the npm command shown below.

npm i bcrypt

Step 2. Next, you need to import bcrypt into your project.

Step 3. Then, convert the user's password using the hash function provided by the bcrypt library.

bcrypt.hash(myPlaintextPassword, saltRounds, function(err, hash) {
    // Store hash in your password DB.
});
///Example
const hashPassword = await bcrypt.hash(password, 8)

Step 4. Now, save the hashed password in the database.

Hash Password Verification with Bycrypt

Once the user sends you the username and password to the signup route, you need to retrieve it from the request header and store it in a variable.

Next, you must check if the user's email is in your database. For example:

app.post("/signin", async function (req, res) {
    const email = req.body.email;
    const password = req.body.password;
    const response = await UserModel.findOne({
        email: email,
    });

If the user's email is not in your database, you need to send a response indicating that the email is not found.

  if(!response){
        res.status(403)
        .json({
            Message:"User Not Found"
        })
    }

But if the user's email is present, you need to check if the password is correct. The question is, how do you check this since the password stored in the database is hashed, and the password the user sends is in plain text?

To do this, you use the compare function from the bcrypt library. It takes two arguments: the first is the password entered by the user, and the second is the hashed password stored in your database, which you can retrieve with a database call.

const passwordMatch= await bcrypt.compare(password,response.password)

The compare function will return true or false. If the password is correct, you can assign a JWT token. If the password doesn't match, you can return an error message.

    if (passwordMatch) {
        const token = jwt.sign({
            id: response._id.toString()
        }, JWT_SECRET);

        res.json({
            token
        })
    } else {
        res.status(403).json({
            message: "Incorrect creds"
        })
    }

Adding Schema Validation Using Zod

When building applications, ensuring that the data you receive and process is valid and structured correctly is crucial.

This is where schema validation comes into play. By using a library like Zod, we can define schemas that your data must adhere to, providing a robust way to validate incoming data.

Why Use Zod for Schema Validation?

Zod is a TypeScript-first schema declaration and validation library. It allows you to define the shape of your data and automatically validate it against this schema.

This helps catch errors early in the development process and ensures that your application handles data consistently.

Setting Up Zod

To get started with Zod, you first need to install it in your project. You can do this using npm or yarn:

npm install zod

Step 1. Import the z variable from the zod module.

const {z}=require("zod")

Step 2. We are adding it for the signup details validation, so we will define a variable under the signup routes and use the z.object() function from Zod to create a Zod object.

const requiredBody=z.object({})

Step 3. In the next step, we will define some keys and their validation rules inside the object method like this:

 const requiredBody=z.object({
//check for email shoud be string
        email:z.string(),
        name:z.string(),
//check for password shoud string with max and min lenght        
        password:z.string().min(6).max(8)
    })

Step 4.Then we need to parse the data, so we will use the .safeParse method from the Zod library, which will pass this data to the request handler.

    const parsebody=requiredBody.safeParse(req.body)

Step 5. After you pass the data to the request handler, it will return two things: success and error. If the validation is correct, thesuccess the key will be true. If not, the success key will be false, and the error will return an object with details about what caused the error and if success is true then data will return an object

const requiredBody=z.object({
        email:z.string(),
        name:z.string(),
        // adding check password should be string with mininum of 6 and maximum of 8 character.
        password:z.string().min(6).max(8)
    })

    const parsebody=requiredBody.safeParse(req.body)
    if(!parsebody.success){
        res.json({
            "Error":"Invalid Format",
            "Exact Error":parsebody.error
        })
        return
    }
//To Access the data
const { email, password, firstName, lastName } = validateData.data

Week 9 React Basics

Why do we need React?

React is a powerful JavaScript library that significantly enhances the process of building front-end applications. It streamlines the development of user interfaces by simplifying the way we write and manage HTML, CSS, and JavaScript code.

With React, developers can use a special syntax called JSX, which allows them to write HTML-like code within JavaScript.

This JSX is then transformed into standard HTML, CSS, and JavaScript, making it easier to create dynamic and interactive web applications.

One of the key advantages of using React is its component-based architecture. This approach enables developers to break down complex user interfaces into smaller, reusable components.

Each component manages its own state and renders independently, which promotes modularity and code reusability. This makes it easier to maintain and update applications as they grow in size and complexity.

To convert React code into a format that browsers can understand, we use the command npm run build. This command compiles the entire application, transforming the JSX and other React-specific code into plain HTML, CSS, and JavaScript files.

These files can then be deployed to a web server, allowing users to access the application through their web browsers. This build process ensures that the application runs efficiently and is optimized for performance.

Why do we use React?

When using DOM manipulation, it's very hard to build large-scale applications. Before React and other frameworks, there were popular libraries like jQuery and Backbone.js that made DOM manipulation easier.

However, the problem wasn't fully solved because building big applications was still difficult to maintain, and developers had to write a lot of code, which is much less with frameworks like React.

What is State in React?

State in React is a JavaScript object representing the application's current status or condition at any given time. It holds information about the app's dynamic parts, which are the elements that can change over time as users interact with the application.

For example, the state can track user inputs, form data, or the results of API calls. By managing the state effectively, React components can update and render themselves automatically whenever the state changes, ensuring the user interface remains in sync with the underlying data.

What is a Component in React?

A component in React is a reusable piece of code that serves as a building block for the user interface. It is designed to take in data, known as "state" or "props," and use this data to render a specific part of the UI.

Components can be as simple as a button or as complex as an entire form. By breaking down the UI into smaller, manageable components, developers can create more organized and maintainable code.

Each component can manage its state and lifecycle, allowing for dynamic and interactive applications. Components can also be nested within each other, enabling the creation of complex interfaces by combining simpler elements.

What is Re-Rendering in React?

A re-render in React refers to the process where the Document Object Model (DOM) is updated to reflect changes in a component's state or props.

When the state of a component changes, React automatically triggers a re-render to ensure that the user interface accurately represents the current data.

This involves recalculating the component's output and updating the DOM with any differences. Re-rendering is a crucial part of React's efficient update mechanism, allowing the UI to stay in sync with the application's data without needing to reload the entire page.

What is JSX?

JSX stands for JavaScript XML. It is a syntax extension that is most commonly used with React, a popular JavaScript library for building user interfaces. JSX allows developers to write HTML-like code directly within JavaScript files.

This capability makes it easier to create and manage the user interface in React applications by allowing developers to visually structure their UI components in a way that resembles HTML. With JSX, you can seamlessly integrate HTML tags with JavaScript logic, making your code more readable and maintainable.

This integration simplifies the process of designing complex user interfaces by enabling developers to use familiar HTML syntax while leveraging the power of JavaScript to handle dynamic data and interactions.

Additionally, JSX helps in catching errors early during compilation, as it provides a more structured way to define UI components. Overall, JSX is a powerful tool that enhances the development experience by bridging the gap between HTML and JavaScript in React applications.

What is useState in React?

useState is a hook provided by React that allows you to add state management to your functional components. Before hooks, state management was primarily handled in class components, but useState enables you to manage the state in a more concise and functional way.

When you call useState, it returns an array with two elements: the current state value and a function to update that state. This hook is particularly useful for managing the local state within a component, such as form inputs, toggles, or any other data that might change over time.

By using useState, you can easily track and update your component's state, ensuring that your user interface reflects the latest data. This makes it a fundamental tool for building interactive and dynamic applications in React.

What is useEffect in React ?

The useEffect hook in React is a powerful tool that allows you to perform side effects in your functional components. Side effects are operations that can affect other parts of your application or interact with external systems, such as fetching data from an API, subscribing to a data stream, or manually changing the DOM.

When you use useEffect, you can specify a function that React will run after the component renders. This function can contain any logic you need to execute as a side effect, and it can also return a cleanup function to tidy up resources when the component unmounts or before the effect runs again.

This cleanup is particularly useful for tasks like unsubscribing from a data stream or clearing timers. The useEffect hook takes two arguments: the effect function and an optional array of dependencies.

The dependencies array allows you to control when the effect should re-run. If you provide an empty array, the effect will only run once, similar to componentDidMount in-class components. If you include variables in the array, the effect will run whenever any of those variables change, mimicking componentDidUpdate.

Week 9.4

Children in React

In React, the concept of children refers to the elements or components that are nested within another component. This is a fundamental aspect of building React applications, as it allows developers to create complex user interfaces by composing components together.

The children prop is a special property that React automatically passes to every component, enabling it to access and render any nested elements. When you define a component, you can use the children prop to render the content that is placed between the opening and closing tags of that component.

This makes it easy to create reusable components that can display different content based on what is passed to them as children. For example, you might have a Card component that can wrap various types of content, such as text, images, or other components, depending on what is passed as children.

Code Example -

import { Children, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
    <Card>
      <div style={{color:'green',}}>
        What do you want to post <br />
        <input type="text" />
      </div>
    </Card>
    </>
  )

  function Card({children}) {
    return <div style={{background:"white",borderRadius:"10",color:"black",padding:"10", margin:"10"}}>
      {children}
    </div>
    
  }
}

export default App

Class-based Components vs. Functional Components

In the world of React, developers have the option to create components using either class-based components or functional components. Understanding the differences between these two approaches is crucial for making informed decisions about which to use in various scenarios.

Class-based Components

Class-based components are the traditional way of writing React components. They are defined using ES6 classes and extend from React.Component. This type of component allows you to use lifecycle methods, which are special methods that get called at different points in a component's life, such as when it is mounted, updated, or unmounted. These lifecycle methods provide a structured way to handle side effects and manage component state over time.

For example, a class-based component might look like this:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    // Code to run after the component is mounted
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

Functional Components

Functional components, on the other hand, are a more modern approach and have gained popularity with the introduction of React Hooks. These components are simply JavaScript functions that return JSX. They are often easier to read and write, especially for components that do not require complex logic or state management.

With Hooks like useState and useEffect, functional components can now manage state and side effects, which were previously possible only in class-based components.

Here is an example of a functional component using Hooks:

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Code to run after the component is mounted
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Key Differences

• Syntax: Class-based components use class syntax and require the render() method, while functional components are plain functions that return JSX.

• State Management: Initially, only class-based components could manage the state, but with Hooks, functional components can also handle the state.

• Lifecycle Methods: Class-based components have built-in lifecycle methods, whereas functional components use Hooks like useEffect to achieve similar functionality.

• Readability and Simplicity: Functional components are generally considered more concise and easier to read, making them a preferred choice for many developers.

Life Cycle Events in React

Lifecycle events in React refer to specific points in a component's life when the component changes. These events help us manage tasks like data fetching, subscriptions, and cleaning up resources.

By leveraging these lifecycle events, developers can ensure that their components behave predictably and efficiently throughout their existence. For instance, when a component is first added to the DOM, developers might use these events to initiate data loading or establish connections.

Similarly, when a component is about to be removed, these events can be used to tidy up any ongoing processes or connections, ensuring that the application remains performant and free of unnecessary resource consumption.

Error Boundaries in React

Error Boundaries in React are an essential feature designed to enhance the stability and reliability of applications. They act as a safety net, preventing the entire application from crashing if an error occurs within a component.

This is particularly useful in large applications where a single component failure could otherwise lead to a poor user experience. Error Boundaries are implemented using class-based components.

They work by catching JavaScript errors anywhere in their child component tree, logging those errors, and displaying a fallback UI instead of the component tree that crashed. This ensures that users can continue interacting with other parts of the application without disruption.

Fragments in React

In React, each component is required to return a single parent element, which can contain multiple child elements within it. This requirement can sometimes lead to the need for unnecessary wrapper elements, which can clutter the DOM and make the code less clean.

To address this issue, React provides a feature called Fragments. Fragments allow developers to group multiple elements without adding extra nodes to the DOM. By using Fragments, we can return various child elements from a component without the need for an additional parent element, thereby keeping the DOM structure clean and efficient.

This is particularly useful when you want to maintain a simple and organized codebase while ensuring that your component structure remains logical and easy to manage.

Week 10 Day 1

Single Page Application in React

A Single Page Application (SPA) in React is a type of web application that loads a single HTML page and dynamically updates the content as the user interacts with the app.

Unlike traditional multi-page applications that require a full page reload for each new piece of content, SPAs offer a smoother and more seamless user experience by only loading the necessary resources and updating the page dynamically.

Routing in React

Routing in React is a crucial concept that allows developers to create a seamless navigation experience within a Single Page Application (SPA). By using routing, you can define multiple routes in your application, each corresponding to a different component or view. This enables users to navigate through various sections of the app without triggering a full page reload, thereby maintaining the fluidity and speed that SPAs are known for.

Steps to Setup Routes in React

Step 1. First Install the react-router-dom package in your project

Step 2. Then, import the BrowserRouter, Routes, Route from the react-router-dom package

import { BrowserRouter, Routes, Route } from 'react-router-dom'

Step 3. Next, define your Route, place it inside the Routes, and then wrap the Routes with BrowserRouter.

The Route will take 2 props: the first is the path where you want to set it up, and the second is the element you want to set up.

Example -

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import './App.css'

function App() {

  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Allen/>} />
          <Route path='/Class11' element={<Class11/>} />
          <Route path='/Class12' element={<Class12/>} />
        </Routes>
      </BrowserRouter>
    </>
  )

  function Allen() {
    return (
      <>
        <div>Welcome to the allen home page</div>
      </>
    )
  }

  function Class11() {
    return (
      <>
        <div>This is class 11th Program</div>
      </>
    )
  }
  function Class12() {
    return (
      <>
        <div>This is class 12th Program</div>
      </>
    )
  }
}
export default App

Link Tag and useNavigate Hook in React

When we need to redirect a user to a new page within a React application, we have two primary methods at our disposal. The first method involves using the Link tag, which is a component provided by the react-router-dom package.

By using the Link tag, we can create navigation links that allow users to move between different routes defined in our application without causing a full page reload. This approach is efficient and maintains the single-page application experience.

The second method for redirecting users is by utilizing the useNavigate hook, also part of the react-router-dom package. This hook provides a programmatic way to navigate between routes. It is particularly useful when you need to redirect users in response to certain actions, such as form submissions or button clicks, where a Link tag might not be appropriate.

The useNavigate hook returns a function that can be called with the desired path, allowing for dynamic and conditional navigation based on the application's state or user interactions.

Routing with the help of link tag

import { BrowserRouter, Routes, Route, Link} from 'react-router-dom'
import './App.css'
function App() {
  return (
    <>
      <BrowserRouter>
    <div>
      <Link to="/">Allen |</Link> 
      <Link to="/Class11">Class 11 |</Link>
      <Link to="/Class12">Class 12 |</Link>
    </div>
        <Routes>
          <Route path='/' element={<Allen/>} />
          <Route path='/Class11' element={<Class11/>} />
          <Route path='/Class12' element={<Class12/>} />
        </Routes>
      </BrowserRouter>
    </>
  )

Routing with useNavigate Hook

In React, another effective way to handle routing is by using the useNavigate hook, which is part of the react-router-dom package. This hook is particularly valuable when you want to implement routing that responds to specific user actions, such as clicking a button or submitting a form. Unlike the Link component, which is used for static navigation, useNavigate allows for more dynamic and flexible routing.

The useNavigate hook returns a function that you can call with the path you want to navigate to. This makes it possible to redirect users based on various conditions or application states.

For instance, you might want to redirect a user to a different page after they successfully submit a form or complete a certain task. By using useNavigate, you can achieve this programmatically, ensuring a smooth and responsive user experience.

Here's a basic example of how you might use the useNavigate hook in a React component:

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    // Perform some logic here
    navigate('/target-path');
  };

  return (
    <button onClick={handleButtonClick}>
      Go to Target Page
    </button>
  );
}

In this example, when the button is clicked, the handleButtonClick the function is triggered, which then calls the navigate function with the desired path. This approach provides a seamless way to manage navigation in response to user interactions, enhancing the overall functionality of your application.

Setup Error Page Route in React

In React, setting up error pages for routes that are not available in our application is a crucial step in improving the overall user experience. When users navigate to a URL that doesn't match any of the defined routes, they can be greeted with a custom error page, often referred to as a "404 page."

This page informs users that the page they are looking for cannot be found, and it can also provide helpful navigation options to guide them back to the main sections of the app.

To implement this, you can define a route that matches all paths not covered by other routes. This is typically done using a wildcard route that catches any unmatched paths. Here’s a detailed example of how you can set up an error page route in a React application using react-router-dom:

import React from 'react';
import { BrowserRouter, Router, Routes, Route } from 'react-router-dom';

function HomePage() {
  return <h1>Welcome to the Home Page</h1>;
}

function AboutPage() {
  return <h1>About Us</h1>;
}

function ErrorPage() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>Sorry, the page you are looking for does not exist.</p>
      <a href="/">Go back to Home</a>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="*" element={<ErrorPage />} />
      </Routes>
    </Router>
  );
}

export default App;

In this example, we have a simple React application with three components: HomePage, AboutPage, and ErrorPage. The ErrorPage component is designed to display a message indicating that the requested page could not be found. It also includes a link to redirect users back to the homepage.

The App component uses react-router-dom to define routes for the home and about pages. The wildcard route (path="*") is used to catch all unmatched URLs, directing users to the ErrorPage component.

This setup ensures that users have a clear understanding of what went wrong and provides them with an easy way to navigate back to familiar territory, thereby enhancing the overall usability and professionalism of your application.

Layout in React with Outlet

In React JS, the Outlet component plays a crucial role when working with nested routes, particularly in applications using react-router-dom. It acts as a placeholder that renders child routes within a parent route.

This is especially useful when you want to create a layout that remains consistent across different sections of your application while allowing specific content to change based on the current route.

For instance, consider a scenario where you have a main dashboard page with several sub-sections like "Profile," "Settings," and "Notifications." You can define a parent route for the dashboard and use the Outlet component to render the appropriate child component based on the user's navigation. This approach not only simplifies the routing logic but also ensures that the overall structure and layout of the dashboard remain intact, providing a seamless user experience.

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Layout />} >
            <Route index element={<Allen />} />
            <Route path='/Class11' element={<Class11 />} />
            <Route path='/Class12' element={<Class12 />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </>
  )

  function Layout() {
    return (
      <>
        <div>
          <Header />
        </div>
        <div>
          <Outlet />
        </div>
        <div>
          <Footer />
        </div>
      </>
    )
  }

useRef Hook in React?

In React, useRef is a hook that provides a way to create a reference to a value or a DOM element that persists across renders but does not trigger a re-render when the value changes.

Key Characteristics of useRef:

1. Persistent Across Renders: The value stored in useRef stays the same between component re-renders. This means the value of a ref doesn't reset when the component re-renders, unlike regular variables.

2. No Re-Renders on Change:Changing the value of a ref (ref.current) does not make a component re-render. This is different from state (useState), which causes a re-render when it changes.

Example

const btnRef=useRef()
  return (
    <>
    Signup Form
    <input ref={btnRef} type="text" />
    <input  type="text" />
    <button onClick={()=>{
      btnRef.current.focus()
    }}>Submit</button>

Week 10 Day 2

Prop Drilling

Rolling up State in React

Rolling up state refers to combining several related state variables into one cohesive state object. Instead of having multiple useState hooks for each individual piece of state, you use a single useState hook with an object that holds all the related state values. This can make your component's state easier to manage and understand.

Benefits of Rolling Up State

1. Simplified State Management: By consolidating state variables, you reduce the number of useState hooks, making your component's logic more straightforward and easier to follow.

2. Easier Updates: When you need to update multiple related state values, you can do so in one operation, reducing the risk of errors and ensuring consistency.

3. Improved Readability: With a single state object, it becomes clearer how different pieces of state relate to each other, improving the readability of your code.

Example

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  return (
    <>
      <LightBulb></LightBulb>
    </>
  )
}

function LightBulb() {
  const [bulb, setbulb] = useState(false)
  return (
    <>
      <BulbState bulb={bulb}></BulbState>
      <ToggleButton setbulb={setbulb} bulb={bulb}></ToggleButton>
    </>
  )
}

function BulbState({bulb}) {
  return (
    <>
      {bulb ? "Bulb is on" : "Bulb is off"}
    </>
  )
}

function ToggleButton({setbulb}) {
  return (
    <>
    <br />
     <button onClick={()=>setbulb(currentState=>!currentState)}>Toggle Button</button>
    </>
  )
}
export default App

Context API

Context API is a powerful tool in React that helps us manage state more effectively across our app, especially with deeply nested components.

It allows us to share values (like state or functions) directly with a component without manually passing props down through each level. By using the Context API, we can create a context object that holds the data or functions we want to share.

This context object can then be accessed by any component within the application that subscribes to it, allowing for a more efficient and cleaner way to manage the state.

Setting up Context API in React

Step 1. Import the useContext and createContext from react.

import { useContext, createContext } from 'react'

Step 2. Define a variable and call the createContext() function.

const BulbContext = createContext()

Step 3. Next, you have to wrap the component under the context provider to specify the value of its context.

import { useState, useContext, createContext } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

const BulbContext = createContext()

function App() {
  const [bulb, setbulb] = useState(false)
  return (
    <>
      <BulbContext.Provider>
        <LightBulb></LightBulb>
      </BulbContext.Provider>
    </>
  )
}

Step 4. Now, you must provide the value you want to pass on in the provider wrapper.

import { useState, useContext, createContext } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

const BulbContext = createContext()

function App() {
  const [bulb, setbulb] = useState(false)
  return (
    <>
      <BulbContext.Provider value={{ bulb: bulb, setbulb: setbulb }}>
        <LightBulb></LightBulb>
      </BulbContext.Provider>
    </>
  )
}

Step 5. To utilize the variable you have passed through the context provider, you need to destructure it and define a hook using useContext.

This hook requires the context you created as its argument. By doing so, you can easily access the context values within your component.

function BulbState() {
  const { bulb } = useContext(BulbContext)
  return (
    <>
      {bulb ? "Bulb is on" : "Bulb is off"}
    </>
  )
}

Custom Hook

A custom hook in React is a special function that internally leverages one or more built-in React hooks. This allows you to encapsulate and reuse stateful logic across different components cleanly and efficiently.

By creating custom hooks, you can extract component logic into reusable functions, making your code more modular and easier to maintain.

Example

import React from "react";
import { useState } from "react";

function useCounter() {
  const [count, setCount] = useState(0)
  function increaseCount() {
    setCount(c => c + 1)
  }
  return {
    count: count,
    increaseCount: increaseCount
  }
}

function App() {
  const{count,increaseCount}=useCounter()
  return (
    <>
      <button onClick={increaseCount}>Counter {count}</button>
    </>
  )
}
export default App

useFetch Hook

The useFetch hook in React is a custom hook designed to simplify the process of making server requests and retrieving data. This hook is particularly useful when you need to perform asynchronous operations, such as fetching data from an API endpoint.

useFetch Hook Example

import { useEffect } from "react";
import { useState } from "react";
export function useFetch(url) {
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState({})
    async function fetchData() {
        setLoading(true);
        const requestURL = await fetch(url)
        const response = await requestURL.json()
        setData(response)
        setLoading(false);
    }
    useEffect(() => {
        fetchData()
    }, [url])
    return {data,loading}
}

uses of useFetch Hook

import React, { useState, useEffect } from "react";
import { useFetch } from "./useFetch";
function App() {
  const [post,setPost]=useState(1)
  const { data, loading } = useFetch("https://jsonplaceholder.typicode.com/posts/"+post)
  return (
    <>
      <button onClick={()=>setPost(1)}>Post 1</button>
      <button onClick={()=>setPost(2)}>Post 2</button>
      <button onClick={()=>setPost(3)}>Post 3</button>
      {loading ? 
      <div>Loading...</div> :
      <pre>{JSON.stringify(data.title)}</pre>}
    </>
  )

}
export default App;

import React, { useEffect } from "react"
import { useState } from "react"

export function useFetch(url,retryTimeout) {
    const [post, setPost] = useState({})
    const [loading,setLoading]=useState(false)

    async function getPost() {
        setLoading(true)
        let data = await fetch(url)
        let response= await data.json()
        setPost(response)
        setLoading(false)
    }

    useEffect(() => {
        getPost()
    }, [url])

    useEffect(() => {
    let autoPostFetch= setInterval(() => {
        getPost()
     }, retryTimeout*1000);
    
      return () => {
        clearTimeout(autoPostFetch)
      }
    }, [])
    
return {
    post,
    loading
}
}

usePrev Hook

The usePrev hook is a custom hook that uses the useRef hook to keep track of the previous value of a state. For example, if a state changes from 0 to 1 and then from 1 to 2, it stores the previous state value, which is 1, when the state updates from 1 to 2.

usePrev hook Example -

import { useEffect, useRef } from "react";
export function usePrev(value) {
const ref = useRef()
// effect will run afeter the ref.current
   useEffect(()=>{
    ref.current=value
   },[value])
   // React return first and then update
   return ref.current
// ref.current first run first
}

Use Case of usePrev hook

import React from "react";
import { useState } from "react";
import { useFetch } from "./hooks/UseFetch";
import { usePrev } from "./hooks/UsePrev";

function App() {
  const [count,setCount]=useState(0)
  const prev=usePrev(count)
  return (
    <>
    <p>Counter value {count}</p>
    <button onClick={()=>{setCount((c)=>c+1)}}>Increae Value</button>
    <p>Previous value {prev}</p>
    </>
  )
}
export default App

useDebounce Hook

The useDebounce hook is a custom hook that delays the execution of a function until a certain amount of time has passed since it was last called. This is useful for optimizing performance by limiting the number of times a function runs, especially in response to user input or other frequent events.

Here's a simple example of how you might use the useDebounce hook:

import React from 'react';
import { useRef } from 'react';
import { useState } from 'react';

function useDebounce(originalfn) {
  const currentClock = useRef()
  const fn = () => {
    clearTimeout(currentClock.current)
    currentClock.current = setTimeout(originalfn, 200)
  }
  return fn
}

function DebounceHook() {
  function callFunction() {
    fetch("https://jsonplaceholder.typicode.com/posts/1/")
  }
  const debounceHook = useDebounce(callFunction)
  return (
    <>
      <input type="text" onChange={debounceHook} />
    </>
  );
}

export default DebounceHook;

Recoil (State Management Library)

Recoil in React is a state management library that provides a way to manage the global state with fine-grained controls. It minimises unnecessary re-renders by rendering the component that depends on the changed atom.

Atom in Recoil

Atoms in Recoil are the units of states that can be read and written from any component. The component that subscribes or uses those atoms will re-render if the atom state changes

How to use Recoil in our Project

Step 1. First, install the recoil npm package for your project.

npm i recoil

Step 2. Wrap the main component with <RecoilRoot>

function App() {
  return (
    <>
      <RecoilRoot>
        <Counter />
      </RecoilRoot>
    </>
  )
}

Step 3. Create a counter atom that takes two values: the first is a the key to uniquely uniquely identifying the atom, and the second its its default value. You can define these atoms in a separate file and import them into your app or component.

const counterAtom=atom({key:"counter",default:0})

Step 4. Now, use the useRecoilValue(atomName) hook and pass the name of the atom you want to display in the app or component.

import React from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { RecoilRoot,useRecoilState,useRecoilValue,useSetRecoilState } from 'recoil'
import {counterAtom} from './store/Counter'

function App() {
  return (
    <>
      <RecoilRoot>
        <Counter />
      </RecoilRoot>
    </>
  )
}

function Counter() {
    return (
    <>
      <CurrentCount/>
      <Increase/>
      <Decrease/>
    </>

  )
}
function CurrentCount(){
  const count=useRecoilValue(counterAtom)
  return(
    <div>{count}</div>
  )
}

Step 5. Next, you need to use the useSetRecoilState(atomName) hook, which is a setter function to update the atom's value. This is how you can change the atom's value.

import React from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { RecoilRoot,useRecoilState,useRecoilValue,useSetRecoilState } from 'recoil'
import {counterAtom} from './store/Counter'

function App() {

  return (
    <>
      <RecoilRoot>
        <Counter />
      </RecoilRoot>
    </>
  )
}

function Counter() {
    return (
    <>
      <CurrentCount/>
      <Increase/>
      <Decrease/>
    </>

  )
}
function CurrentCount(){
  const count=useRecoilValue(counterAtom)
  return(
    <div>{count}</div>
  )
}
function Increase() {
 const setCount=useSetRecoilState(counterAtom)
  function increase() {
    setCount(c => c + 1)
  }
  return (
    <button onClick={increase}>Increase</button>
  )
}

function Decrease() {
  
  const setCount=useSetRecoilState(counterAtom)
  function decrease() {
    setCount(c => c - 1)
  }
  return (
    <button onClick={decrease}>Decrease</button>
  )
}
export default App

Memo API in React

The Memo API in React is a powerful tool designed to optimize the performance of functional components. It allows developers to prevent unnecessary re-renders by memoizing the output of a component.

This means that React will only re-render the component if its props have changed, thus saving computational resources and improving the overall efficiency of the application.

When you use the React.memo function, you wrap your component with it, and React will remember the result of the last render. If the component receives the same props as before, React will skip rendering the component and reuse the last rendered output.

This is particularly useful in scenarios where components rely on expensive calculations or when dealing with large data lists.

To implement the Memo API, you simply import React and use React.memo to wrap your component. For example:

import React from 'react';

const MyComponent = React.memo((props) => {
  // Component logic here
  return <div>{props.value}</div>;
});

In this example, MyComponent will only re-render if the value prop changes. This can significantly enhance the performance of your application, especially when dealing with complex UI structures or when components are nested deeply within the component tree.

Additionally, React.memo can accept a second argument, a custom comparison function, which allows you to define more complex logic for determining when a component should re-render. This function receives the previous and next props as arguments and should return true if the props are equal and false if they are not.

By leveraging the Memo API, developers can create more efficient, responsive, and performant React applications that provide a better user experience.

UI/UX for Developers

Typography

A typeface is the design of the letter. Font means a specific weight and style within the typeface like Poppins Bold 16px . A typeface is the family and a font is an individual font member.

TailwindCSS: A Utility-First CSS Framework

TailwindCSS is a popular utility-first CSS framework that provides developers with a set of predefined classes to build custom designs directly in their markup.

Unlike traditional CSS frameworks that offer a set of pre-designed components, TailwindCSS focuses on providing low-level utility classes that enable developers to create unique designs without having to write custom CSS.

Key Features of TailwindCSS

1. Utility-First Approach: TailwindCSS is built around the concept of utility classes, which are single-purpose classes that apply specific styles. This approach allows developers to quickly style elements by combining these classes directly in the HTML.

2. Highly Customizable: TailwindCSS offers extensive customization options. Developers can easily configure the framework to fit their design requirements by modifying the default theme, extending it with custom styles, or even replacing it entirely.

3. Responsive Design: TailwindCSS includes responsive utility variants, making it straightforward to create responsive designs. Developers can apply different styles at various breakpoints by using responsive prefixes, ensuring that their designs look great on all devices.

4. Built-in Dark Mode Support: Tailwindcss provides built-in support for dark mode, allowing developers to switch between light and dark themes easily. This feature is increasingly important as more users prefer dark mode for its aesthetic and potential eye strain reduction.

5. Community and Ecosystem: TailwindCSS has a vibrant community and a growing ecosystem of plugins and tools. Developers can leverage these resources to extend the framework's functionality and integrate it seamlessly into their projects.

Benefits of Using TailwindCSS

• Rapid Prototyping: With its utility-first approach, TailwindCSS allows developers to quickly prototype designs without writing custom CSS. This speed is invaluable during the early stages of development when iterating on design ideas.

• Consistent Design: By using predefined utility classes, developers can maintain a consistent design language across their projects. This consistency helps in creating cohesive and professional-looking interfaces.

• Reduced CSS Bloat: TailwindCSS encourages the use of utility classes over custom styles, which can lead to a significant reduction in CSS bloat. The JIT compiler further minimises the final CSS size by including only the styles used in the project.

• Improved Collaboration: TailwindCSS's class-based approach makes it easier for teams to collaborate on design and development. Designers and developers can work together more effectively, as the design language is clearly defined and easy to understand.

Setting Up TailwindCSS v4 in a React Project

Integrating TailwindCSS into a React project can significantly enhance your development workflow by providing a streamlined and efficient way to style your application. Here’s a step-by-step guide to setting up TailwindCSS in a React project:

1. Create a New React Project: If you haven't already, start by creating a new React project. You can do this using npm create vite@latest, which sets up a modern web development environment with no configuration needed. Run the following command in your terminal:

   npm create vite@latest
   

2. Install TailwindCSS: Once your React project is ready, you need to install TailwindCSS. Use npm or yarn to add these packages to your project:

   npm install tailwindcss @tailwindcss/vite
   

3. Configure Vite Plugin: After installing TailwindCSS, you need to configure it in vite.config.js the file.

   import { defineConfig } from 'vite'
   import tailwindcss from '@tailwindcss/vite'
   // Import TailwindCSS and add in the condigutation
   export default defineConfig({
     plugins: [
       vite(),tailwindcss(),
     ],
   })
   

4. CSS Imports: Add the @import "tailwindcss"; is your main CSS file like app.css index.css

   @import "tailwindcss";
   

5. Start Your Development Server: Now that TailwindCSS is set up, you can start your development server to see TailwindCSS in action. Run the following command:

   npm run dev
   

Following these steps will help you effectively set up TailwindCSS in your React project, enabling you to take advantage of its powerful utility-first approach to styling. This setup will not only speed up the development process but also ensure a consistent and maintainable design system across your application.

Customisation in TailwindCSS

Manual Dark Mode and Light Mode in TailwindCSS

Creating a Transition in TailwindCSS

Creating a Transition Slidebar with TailwindCSS

Mobile First Approach

Week-14 TypeScript

What is Typescript?

TypeScript is a language developed and maintained by Microsoft. It is built on top of JavaScript, meaning it includes type safety checks that help catch errors during compilation, similar to compilers used for languages like Java and C++.

TypeScript code can't run directly in your browser or even in Node.js. First, it must be compiled into JavaScript, which can then be used for deployment. When TypeScript compiles the code into JavaScript, it performs type checks similar to other languages like Java and C++. The compilation will stop if there is an error.

This process allows you to catch compilation errors and safeguard your code, preventing runtime errors when users are using the application.

TypeScript Compiler

Types of Languages

1. Strongly typed languages - Languages that have strict type-checking are known as strongly typed languages, like C++, Java, Rust, etc. For example, suppose we initialise a variable and define it will store a number, and in the next step we store a string value, then in this case it will throw an error.

2. Loosely typed languages - Languages that do not have strict type-checking are known as loosely typed languages, like JavaScript and Python, etc. For example, suppose we initialise a variable and define it will store a number, and in the next step we store a string value, then in this case these languages don’t throw an error.

3. Compiled Language

4. Interpreted Language

5. High-Level Language - Languages that are readable by humans and understandable are called high-level languages like Java, c++, python, and javascript

6. Low-Level Language - Languages that are not readable by humans and not understandable these languages are called low-level language example -Assembly language

Compilation

A process of checking whether the code is correct or not. If the code has a mistake, then the compilation will fail and give a compilation error. The compiler do the compiler process

Interpreted Language

The interpreted language does both compile and run the code. If the code has a mistake or any issue, then it will throw a runtime error. An interpreted language is faster while writing code because of its two-way combined steps, including compilation and interpretation

Initialise the typescript project

Step 1. npm i -g typescript used to install the typescript in your system globally

Step 2. npx tsc —init to initialise the typescript project

Types in TypeScript

1. Number

2. String

3. Any

Callback function type in TypeScript

function delayedCall(anotherFunction:()=>void){
//code

}

tsConfig File

tsConfig file has some options that you can choose to configure your tsc compiler.

Some of the most common configuration options are

1. target is configuring which ECMAScript version of JavaScript code you want to convert. This is important if you want your code will work on older browsers.

2. rootDir: used to set the root directory of the TypeScript code to split out the js code. So, that you will have a better and more manageable folder structure.

3. outDir: used to set the output directory of the TypeScript code to store the split-out compiler js code.

Interface in TypeScript

In TypeScript, interfaces are a powerful way to define the structure of an object. They allow you to specify the types of properties that an object should have, making your code more robust and easier to understand. When you pass an interface as a type, you are essentially using it to enforce a specific shape for the objects you work with. This ensures that the objects conform to the expected structure, reducing errors and improving code quality.

Optional Parameter in TypeScript

interface user{
    name:string,
    age:number,
    address:{
        // addind ? after city makes it optional
        city?:string,
        country:string
    }
}

let user:user ={
    name:"Aditya",
    age:21,
    address:{
        // city:"Haryanya",
        country:"India"
    }
}

Passing Interface as a Type

When you pass an interface as a type, you are essentially using it to enforce a specific shape for the objects you work with. This ensures that the objects conform to the expected structure, reducing errors and improving code quality.

To pass an interface as a type, you first define the interface with the desired properties and their types. For example, consider an interface named User:

interface User {
    name: string;
    age: number;
    address: {
        city?: string; // The question mark indicates that this property is optional
        country: string;
    };
}

In this example, the User The interface specifies that a user object must have a name of type string, an age of type number, and an address object. The address The object must include a country of type string, and may optionally include a city of type string.

Once the interface is defined, you can use it to type-check objects. For instance, you can create a variable user and assign it an object that adheres to the User interface:

let user: User = {
    name: "Aditya",
    age: 21,
    address: {
        country: "India"
    }
};

In this case, the user The object meets the requirements of the User interface. It includes the mandatory name and age properties, as well as the address object with the required country property. The optional city The property is omitted, which is perfectly acceptable due to its optional nature.

By using interfaces as types, you can ensure that your objects are consistently structured, making your TypeScript code more predictable and easier to maintain. This practice is especially useful in larger projects where the complexity of data structures can increase significantly.

Difference Between Interfaces and Types

Interfaces can be implemented as classes you can’t to in types

Difference Between Abstract Class and Interfaces

1. We can implement

Types in TypeScript

Week 16

Websockets

Websockets provide a way to establish a persistent connection between the client and the backend, full duplex communication channel over a single TCP connection between the client (typically a web browser) and the server.

Websockets offer a robust method for creating a continuous, two-way communication channel between a client, such as a web browser, and a backend server.

Unlike traditional HTTP requests, which require a new connection for each interaction, websockets maintain a single, persistent connection.

This allows for real-time data exchange, making it particularly useful for applications that require instant updates, such as chat applications, live sports scores, or financial trading platforms.

The WebSocket protocol begins its life as an HTTP handshake, which is then upgraded to the WebSocket protocol, enabling this efficient, ongoing data transfer.

This setup not only reduces the latency associated with starting new connections but also decreases the overhead of HTTP headers, resulting in a more efficient and responsive user experience.

Persistent Connection

A persistent connection, also known as a long-lived connection, is a communication link that stays open for a long time, enabling ongoing data exchange between a client and a server. This connection is important when real-time data transfer is needed, like in online gaming, live video streaming, or instant messaging apps.

3-Way Handshake

The 3-way handshake is a fundamental process used to establish a reliable connection between a client and a server over a network. This process is crucial for ensuring that both parties are ready to communicate and that the data can be transferred reliably. The handshake involves three distinct steps:

1. SYN (Synchronise): The client initiates the connection by sending a SYN packet to the server. This packet contains an initial sequence number, which is used to synchronise the sequence numbers between the client and the server. The SYN packet essentially acts as a request to establish a connection.

2. SYN-ACK (Synchronise-Acknowledge): Upon receiving the SYN packet, the server responds with a SYN-ACK packet. This packet serves two purposes: it acknowledges the receipt of the client's SYN packet by including an acknowledgement number, and it also sends its own SYN packet with a sequence number to the client. This step ensures that the server is ready to establish a connection and synchronise sequence numbers.

3. ACK (Acknowledge): Finally, the client sends an ACK packet back to the server. This packet acknowledges the receipt of the server's SYN-ACK packet. Once the server receives this ACK packet, the connection is fully established, and data can begin to flow between the client and the server.

Week-17

PostgreSQL SQL

What are NoSQL databases

NoSQL databases don't have a fixed structure. This means you can store any type of data without limits. MongoDB is a well-known example of a NoSQL database.

Note: When we define a schema with Mongoose, it's done at the Node.js level, and having a schema is helpful.

Advantages of NoSQL Databases

• NoSQL databases are great for handling large volumes of data and complex structures.

• They scale horizontally, allowing you to add more servers as data grows, which is easier than vertical scaling in traditional databases.

• They are schema-less, so you don't need a predefined structure, making it easy to change the data model without complex migrations or downtime.

• NoSQL databases handle complex data types well, such as unstructured or semi-structured data like JSON or XML.

• They are ideal for applications with diverse data formats or those that need rapid development cycles.

• Their adaptability and ease of use make them a popular choice for modern applications that require high performance and flexibility..

Why Not NoSQL Databases

1. Data Inconsistency: One of the main challenges with NoSQL databases is the potential for data inconsistency. Since they do not enforce a strict schema, there is a risk that different parts of the application may interpret the data differently. This can lead to situations where the data is not uniformly updated or maintained, causing discrepancies.

2. Runtime Errors: The flexibility of NoSQL databases can sometimes lead to runtime errors. Without a predefined schema to validate the data before it is stored, errors may only surface during application execution. This can make debugging more difficult, as issues may not be detected until the application is running in a production environment.

3. Excessive Flexibility: While flexibility is often seen as an advantage, it can be a drawback for applications that require strict data integrity and consistency. In scenarios where data relationships and constraints are crucial, the lack of enforced structure in NoSQL databases can lead to challenges in maintaining data accuracy and reliability. For applications that demand a high level of strictness, a more structured database approach may be necessary to ensure data quality.

When to Use?

When we want to do rapid development like hackathons,

Types of Databases

SQL Databases

SQL databases are structured databases that use a fixed schema to define data organisation. They are ideal for applications requiring complex queries and transactions. SQL databases ensure data integrity and consistency, making them suitable for applications where data accuracy is crucial.

Vector Databases

Vector databases, such as Pinecone, are designed to handle high-dimensional data, which is often used in machine learning and AI applications. They efficiently store and retrieve vector embeddings, enabling fast similarity searches and recommendations. These databases are optimised for performance and scalability in handling large datasets.

NoSQL Databases

NoSQL databases are flexible databases that do not rely on a fixed schema, allowing for the storage of unstructured and semi-structured data. They are highly scalable and can easily adapt to changes in data models. NoSQL databases are well-suited for applications with large volumes of diverse data, such as social media platforms and real-time analytics.

1. Store data without a fixed schema for speed and efficiency.

2. Examples - MongoDB

Graph Databases

Graph databases, like Neo4j, are designed to represent and store data in a graph format, with nodes and edges. They excel at managing relationships between data points, making them ideal for applications like social networks, recommendation engines, and fraud detection. Graph databases provide efficient querying of complex relationships and patterns within data.

1. Data is stored as a graph, which is especially useful for storing relationships (like in social networks).

2. Examples - Neo4j

SQL Databases

SQL databases use structured query language (SQL) to manage data. They organise data in rows and columns. Many full-stack applications use SQL databases. Examples include MySQL and PostgreSQL.

1. Stores data in rows

2. Most full-stack applications use this

3. Examples - MySQL, Postgres

Why Not NoSQL

You might have used MongoDB it in your projects. Its schemaless Properties make it an excellent choice for quickly bootstrapping a project. This flexibility allows developers to start building applications without the need to define a rigid schema upfront, which can significantly speed up initial development.

However, this lack of structure can lead to challenges as your application grows and becomes more complex. Without a fixed schema, it becomes very easy for data to become corrupted or inconsistent, as different parts of the application might write data in varying formats or with unexpected fields.

What Does Schemaless Mean?

In a schemaless databases, different rows, or documents, can have different schemas (keys/types). This means that each entry in the database can have its own unique structure, with different fields and data types.

While this offers great flexibility, it also requires careful management and validation to ensure data integrity as the application scales. Without proper oversight, data structure diversity can lead to data consistency and reliability issues, making it harder to maintain and query the database effectively over time.

Problems?

1. Can make the database inconsistent

2. Can cause errors during runtime

3. Is too flexible for apps that need strict rules

Upsides?

1. Can develop quickly

2. Can easily modify the schema