DEV Community: DevFrontier

React Router: A Complete Study Guide for Interviews

DevFrontier — Wed, 03 Sep 2025 06:22:08 +0000

React Router is the standard routing library for React applications. It enables navigation among views, allows dynamic rendering, and provides client-side routing without refreshing the browser.

1. 🔹 Why Do We Need React Router?

By default, React is a single-page application (SPA) framework. Without routing, navigating between pages would require full page reloads.
React Router solves this by:

Handling client-side navigation (no reload).
Synchronizing UI with the browser URL.
Supporting nested routes and dynamic parameters.
Allowing protected routes for authentication.

2. 🔹 Core Concepts
a. Router Components

BrowserRouter: Uses the HTML5 History API. Preferred for modern apps.
HashRouter: Uses # in the URL (e.g., /#/home). Good for static file servers.
MemoryRouter: Keeps history in memory (useful for testing).

b. Routes

Route maps a path to a component.
Example:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

c. Navigation

Link: For client-side navigation.

<Link to="/about">Go to About</Link>

useNavigate: Hook for programmatic navigation.

const navigate = useNavigate();
navigate("/profile");

d. Dynamic Routing

- Define routes with parameters:

<Route path="/users/:id" element={<UserProfile />} />

- Access params:

import { useParams } from "react-router-dom";
const { id } = useParams();

e. Nested Routes
Example:

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="settings" element={<Settings />} />
  <Route path="profile" element={<Profile />} />
</Route>

Inside Dashboard component:

<Outlet />

3. 🔹 Advanced Features
a. Protected Routes

Restrict access to authenticated users.

const PrivateRoute = ({ children }) => {
  const isAuth = localStorage.getItem("auth");
  return isAuth ? children : <Navigate to="/login" />;
};

<Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />

b. Redirects

Use Navigate component.

<Navigate to="/login" replace />

c. Lazy Loading with React Router

Combine React.lazy + Suspense.

const About = React.lazy(() => import("./About"));

<Suspense fallback={<div>Loading...</div>}>
  <Routes>
    <Route path="/about" element={<About />} />
  </Routes>
</Suspense>

d. Search Params

Handle query strings:

const [searchParams, setSearchParams] = useSearchParams();
const filter = searchParams.get("filter") || "";

setSearchParams({ filter: "active" });

4. 🔹 Common Interview Questions

What’s the difference between BrowserRouter and HashRouter?

BrowserRouter uses clean URLs with the History API.
HashRouter uses # in URLs for legacy support.

How do you handle protected routes in React Router?

Create a wrapper component that checks authentication before rendering.

What’s the purpose of useParams, useNavigate, and useLocation?

useParams: Access route parameters.
useNavigate: Navigate programmatically.
useLocation: Get the current URL and state.

How do nested routes work in React Router v6?

Parent route renders an for child routes.

How do you implement redirection in React Router v6?

Use component.

5. 🔹 Best Practices

Always wrap routes in (v6).
Use lazy loading for performance.
Keep route configuration centralized if app grows large.
Combine layout components with nested routes for DRY code.
Use useLocation when handling redirects after login/logout.

✅ Summary:
React Router is essential for building SPA navigation in React. Understanding routing basics, nested routes, dynamic params, and protected routes will prepare you well for interviews.

🧑‍💻 React Router Interview Practice Exercises
Exercise 1: Basic Routing

Task:

Create a simple app with two pages: Home and About.
Display "Welcome to Home Page" on /.
Display "About Us" on /about.
Add navigation links to switch between them.

Solution:

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h2>Welcome to Home Page</h2>;
}
function About() {
  return <h2>About Us</h2>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Exercise 2: Dynamic Routes

Task:
Build a User page that shows user IDs from the URL.

/users/1 → "User Profile: 1"
/users/42 → "User Profile: 42"

Solution:

import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

function User() {
  const { id } = useParams();
  return <h2>User Profile: {id}</h2>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

Exercise 3: Nested Routes

Task:

Create a Dashboard with nested routes:
/dashboard → "Dashboard Home"
/dashboard/settings → "Dashboard Settings"

Solution:

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

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="">Home</Link> | <Link to="settings">Settings</Link>
      </nav>
      <Outlet />
    </div>
  );
}
function DashboardHome() {
  return <p>Dashboard Home</p>;
}
function DashboardSettings() {
  return <p>Dashboard Settings</p>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route index element={<DashboardHome />} />
          <Route path="settings" element={<DashboardSettings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Exercise 4: Protected Route

Task:
Create a protected Profile page.

If logged in → Show "Welcome to your profile".
If not logged in → Redirect to /login.

Solution:

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

function Login() {
  return <h2>Please log in</h2>;
}
function Profile() {
  return <h2>Welcome to your profile</h2>;
}

function PrivateRoute({ children }) {
  const isAuthenticated = false; // change to true for testing
  return isAuthenticated ? children : <Navigate to="/login" />;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/profile" element={<PrivateRoute><Profile /></PrivateRoute>} />
      </Routes>
    </BrowserRouter>
  );
}

Exercise 5: Search Params

Task:
Create a Products page that filters items by query string.

/products?category=shoes → show "Showing shoes".
/products?category=shirts → show "Showing shirts".

Solution:

import { BrowserRouter, Routes, Route, useSearchParams } from "react-router-dom";

function Products() {
  const [searchParams] = useSearchParams();
  const category = searchParams.get("category") || "all";
  return <h2>Showing {category}</h2>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/products" element={<Products />} />
      </Routes>
    </BrowserRouter>
  );
}

Exercise 6: Redirect After Login

Task:
When user logs in, redirect them back to the page they tried to visit.

Solution:

import { BrowserRouter, Routes, Route, Navigate, useLocation, useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();
  const location = useLocation();
  const from = location.state?.from?.pathname || "/";

  const handleLogin = () => {
    localStorage.setItem("auth", "true");
    navigate(from, { replace: true });
  };

  return <button onClick={handleLogin}>Login</button>;
}

function Profile() {
  return <h2>Profile Page</h2>;
}

function PrivateRoute({ children }) {
  const isAuth = localStorage.getItem("auth");
  const location = useLocation();
  return isAuth ? children : <Navigate to="/login" state={{ from: location }} />;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/profile" element={<PrivateRoute><Profile /></PrivateRoute>} />
      </Routes>
    </BrowserRouter>
  );
}

✅ Summary of What You Practiced

Basic routing with Routes & Route
Dynamic route params with useParams
Nested routes with Outlet
Protected routes & redirection
Working with query strings
Preserving navigation state after login

Interview Prep Q&A – Web Fundamentals

DevFrontier — Wed, 03 Sep 2025 03:20:31 +0000

HTTP Protocol

Q1. What is HTTP and how does it work?
👉 Answer: HTTP (Hypertext Transfer Protocol) is the communication protocol used between clients and servers on the web. It follows a request–response model where the client sends a request (method, headers, body) and the server responds with a status code, headers, and optionally a body.

Q2. Can you explain some common HTTP methods?
👉 Answer:

GET: Retrieve data.
POST: Submit new data.
PUT: Replace an existing resource.
PATCH: Partially update a resource.
DELETE: Remove a resource.

Q3. What are some important HTTP status codes you should know?
👉 Answer:

200 OK (success)
201 Created (resource created)
301 Moved Permanently, 302 Found (redirection)
400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found (client errors)
500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable (server errors)

Q4. How is HTTP/2 different from HTTP/1.1?
👉 Answer: HTTP/2 supports multiplexing (multiple requests over a single connection), header compression, and server push, making it faster and more efficient than HTTP/1.1.

TLS/SSL

Q5. What problem does TLS/SSL solve?
👉 Answer: TLS/SSL secures communication by encrypting data, ensuring confidentiality, integrity, and authentication between client and server.

Q6. How does the TLS handshake work in simple terms?
👉 Answer: The client and server agree on encryption algorithms, exchange cryptographic keys, and the server provides a digital certificate to prove its identity. After that, data is transmitted using symmetric encryption for speed.

Security Best Practices

Q7. What are some common web security vulnerabilities?
👉 Answer:

SQL Injection
Cross-Site Scripting (XSS)
Cross-Site Request Forgery (CSRF)
Weak authentication and session management

Q8. How do you prevent SQL injection?
👉 Answer: By using parameterized queries or prepared statements, never directly concatenating user input into SQL queries.

Q9. How do you protect against XSS?
👉 Answer: Sanitize user inputs and encode outputs (e.g., HTML entity encoding). Using Content Security Policy (CSP) also helps.

Q10. What measures would you take for secure session management?
👉 Answer: Use secure cookies (HttpOnly, Secure, SameSite flags), enforce session timeouts, regenerate session IDs after login, and avoid exposing session tokens in URLs.

Performance & Optimization

Q11. What are some frontend optimization techniques?
👉 Answer: Minifying JS/CSS, compressing and lazy-loading images, using CDNs, enabling caching, and leveraging HTTP/2/3 features.

Q12. What caching strategies do you know?
👉 Answer:

Browser caching with headers (Cache-Control, ETag).
CDN caching to serve static assets from edge locations.
Server-side caching using reverse proxies or distributed caches like Redis.

Q13. How would you optimize backend performance?
👉 Answer: By optimizing database queries with indexes, using caching layers, handling heavy tasks asynchronously (via queues), and scaling horizontally with load balancers.

Q14. How do you measure and monitor performance?
👉 Answer: On the frontend, tools like Google Lighthouse or WebPageTest. On the backend, Application Performance Monitoring (APM) tools like New Relic, Datadog, or Prometheus.

High-Level Wrap-Up

Q15. If asked: "How do you ensure your web app is fast and secure?"
👉 Answer:

For speed: caching, CDNs, minification, optimized queries, HTTP/2/3.
For security: HTTPS (TLS), input validation, proper authentication, secure session management, protection against XSS/SQL injection/CSRF.

HTTP Protocol

Q16. What is the difference between PUT and PATCH?
👉 Answer: PUT replaces the entire resource with a new version, while PATCH updates only specific fields of the resource.

Q17. What is idempotency in HTTP methods?
👉 Answer: An operation is idempotent if multiple identical requests result in the same outcome. GET, PUT, and DELETE are idempotent, while POST is not.

Q18. What are HTTP headers, and why are they important?
👉 Answer: Headers carry metadata about the request or response, such as Content-Type, Authorization, Cache-Control, and User-Agent. They’re crucial for security, caching, and content negotiation.

Q19. What is the difference between Authorization and Authentication?
👉 Answer: Authentication verifies who a user is, while authorization determines what they’re allowed to do.

Q20. Can you explain CORS and why it exists?
👉 Answer: CORS (Cross-Origin Resource Sharing) is a mechanism that controls how a browser requests resources from a different domain. It prevents malicious sites from making unauthorized requests on behalf of users.

TLS/SSL

Q21. What is the difference between symmetric and asymmetric encryption?
👉 Answer: Symmetric encryption uses the same key for encryption and decryption (fast), while asymmetric encryption uses a public/private key pair (secure but slower). TLS uses asymmetric during handshake, then switches to symmetric for data transfer.

Q22. What are some common TLS vulnerabilities?
👉 Answer:

SSLv2/SSLv3 (outdated, insecure).
Weak ciphers (e.g., RC4).
Misconfigured certificates (expired, self-signed).
Lack of HSTS (allows downgrade to HTTP).

Q23. What is HSTS and why is it important?
👉 Answer: HTTP Strict Transport Security forces browsers to only connect via HTTPS, preventing downgrade attacks and cookie hijacking.

Security Best Practices

Q24. What’s the difference between XSS and CSRF?
👉 Answer:

XSS: Attacker injects malicious scripts into a website, executed by unsuspecting users.
CSRF: Attacker tricks a logged-in user into performing unintended actions (e.g., submitting a form) without their knowledge.

Q25. What’s the difference between OAuth and JWT?
👉 _Answer:_OAuth is an authorization framework, while JWT (JSON Web Token) is a token format often used in OAuth. JWTs encode claims about a user and can be signed for integrity.

Q26. How would you secure an API?
👉 Answer: Require authentication (OAuth2/JWT), enforce rate limiting, validate inputs, use HTTPS, and implement RBAC/ABAC for access control.

Q27. What are some OWASP Top 10 risks?
👉 Answer: Injection, broken authentication, sensitive data exposure, XML External Entities (XXE), broken access control, security misconfiguration, XSS, insecure deserialization, using vulnerable components, insufficient logging/monitoring.

Performance & Optimization

Q28. How does a CDN improve performance?
👉 Answer: A CDN caches and serves static assets from geographically distributed servers, reducing latency and improving load times.

Q29. What’s the difference between vertical and horizontal scaling?
👉 Answer:

Vertical scaling: Adding more power (CPU/RAM) to a single server.
Horizontal scaling: Adding more servers and distributing load.

Q30. What is database indexing, and how does it help performance?
👉 Answer: An index is a data structure that improves query speed by reducing the number of rows scanned. However, it can slow down writes due to index maintenance.

Q31. What’s the difference between strong and weak caching?
👉 Answer:

Strong caching: Browser can reuse cached response without re-checking (e.g., Cache-Control: max-age).
Weak caching: Browser must revalidate with the server (e.g., ETag, Last-Modified).

Q32. How do HTTP/2 and HTTP/3 reduce latency compared to HTTP/1.1?
👉 Answer:

HTTP/2: Multiplexing, header compression, server push.
HTTP/3: Uses QUIC over UDP, avoids head-of-line blocking, and enables faster connection establishment.

Advanced Concepts

Q33. What is a reverse proxy, and why would you use one?
👉 Answer: A reverse proxy (like Nginx) sits between clients and backend servers, handling caching, load balancing, SSL termination, and request routing.

Q34. How does DNS resolution work?
👉 Answer: The browser queries DNS resolvers, which may query root, TLD, and authoritative servers until the IP address for a domain is returned.

Q35. What is connection pooling, and why is it useful?
👉 Answer: Connection pooling reuses database connections instead of opening new ones for each query, reducing latency and resource usage.

Q36. What is rate limiting, and why is it important?
👉 Answer: Rate limiting restricts how many requests a client can make within a timeframe, protecting against abuse, brute-force attacks, and DDoS.

Q37. How does lazy loading help performance?
👉 Answer: Lazy loading defers the loading of non-critical resources (like images below the fold) until they’re needed, reducing initial page load time.

Scenario-Based Interview Prep – Web Fundamentals
HTTP & Networking

Q38. Your web app’s API responses are slow. How would you troubleshoot?
👉 Answer:

Check network latency (DNS resolution, TCP handshake, TLS negotiation).
Use tools like Chrome DevTools or cURL to measure request/response times.
Inspect server logs for slow database queries or bottlenecks.
Consider caching responses, using HTTP/2 for multiplexing, and enabling compression (gzip, Brotli).

Q39. A user reports that their browser shows a “Mixed Content” warning. What does this mean and how do you fix it?
👉 Answer:

Mixed content happens when a secure page (https://) loads resources (images, scripts, CSS) over http://.
Fix: Ensure all assets are served via HTTPS, update links, and enable Content Security Policy (CSP) to block insecure requests.

Q40. Your site works in HTTP but fails when accessed over HTTPS. How do you debug?
👉 Answer:

Check that the SSL/TLS certificate is valid and not expired.
Verify correct server configuration (Nginx/Apache SSL settings).
Ensure redirects (http:// → https://) are properly set up.
Use tools like SSL Labs Server Test to check for issues.

Security

Q41. A penetration tester reports an XSS vulnerability on your site. What’s your response?
👉 Answer:

Identify where user input is reflected back without sanitization.
Escape or encode output before rendering (e.g., HTML entity encoding).
Use libraries or frameworks that auto-escape.
Add a Content Security Policy to limit script execution.

Q42. Your login endpoint is under brute-force attack. What do you do?
👉 Answer:

Implement rate limiting (e.g., max 5 attempts/min per IP).
Add CAPTCHA for suspicious behavior.
Enforce account lockout after repeated failures.
Monitor logs and block offending IPs with a firewall/WAF.

Q43. Your site must handle sensitive customer data. How do you secure it?
👉 Answer:

Always use HTTPS (TLS).
Encrypt sensitive data at rest (AES) and in transit.
Use strong authentication (multi-factor if possible).
Apply principle of least privilege for database access.
Log and monitor access patterns for anomalies.
Performance & Optimization

Q44. Your homepage takes 5 seconds to load. How would you optimize it?
👉 Answer:

Run Lighthouse or WebPageTest to identify bottlenecks.
Compress and optimize images (use WebP/AVIF).
Minify and bundle JS/CSS.
Enable lazy loading for below-the-fold content.
Serve assets from a CDN.
Use caching headers (Cache-Control, ETag).

Q45. Your API server is experiencing heavy load. What are your options?
👉 Answer:

Short term: Enable caching, use a CDN for static responses, rate-limit abusive clients.
Medium term: Optimize database queries, move long tasks to background jobs.
Long term: Scale horizontally with load balancers, introduce microservices, or use message queues.

Q46. A user in Asia complains your site is slow, but it’s fast in the US. How do you fix this?
👉 Answer:

Deploy a CDN with edge servers closer to the user.
Enable DNS-based load balancing to route users to the nearest server.
Consider deploying infrastructure in multiple regions (multi-region hosting).

Advanced Scenarios

Q47. Your site’s TLS certificate just expired and users are seeing warnings. What do you do?
👉 Answer:

Immediately renew or replace the certificate.
Automate renewal (e.g., Let’s Encrypt + Certbot).
Set up monitoring/alerts for expiring certificates.

Q48. You notice a high number of 500 Internal Server Error responses in logs. How do you debug?
👉 Answer:

Check error logs for stack traces.
Identify failing endpoints and look for recent code/config changes.
Check for database connection limits or third-party API failures.
Add monitoring/alerting to catch future errors early.

Q49. Your team reports a memory leak in the backend. How do you approach it?
👉 Answer:

Use profiling tools to track memory usage.
Identify objects not being freed (e.g., large caches, dangling references).
Implement proper resource cleanup (close DB connections, file handles).
Run load tests to validate the fix.

Q50. An e-commerce site is experiencing cart data loss when multiple users log in. What could be wrong?
👉 Answer:

Possible session management issue: Sessions not isolated properly.
Cookies might not have SameSite or Secure flags.
Server might be using in-memory sessions without sticky sessions in load balancing.
Fix: Use a centralized session store (Redis, DB) and configure session cookies securely.

Everything You Need to Know About JSON.parse() and JSON.stringify()

DevFrontier — Mon, 01 Sep 2025 08:55:53 +0000

Working with JSON (JavaScript Object Notation) is a fundamental skill for any JavaScript developer. Whether you're fetching data from an API, storing state in localStorage, or communicating between services, two methods play a central role:

JSON.parse() – converts JSON strings into JavaScript objects.
JSON.stringify() – converts JavaScript objects into JSON strings.

In this article, we’ll cover how they work, their options, pitfalls, and advanced use cases.

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data format used to represent structured data. It’s human-readable and language-independent, making it the most common format for APIs and data storage.

A JSON string looks like this:

{
  "name": "Alice",
  "age": 25,
  "isAdmin": false,
  "skills": ["JavaScript", "React", "Node.js"]
}

But in JavaScript, this would be represented as an object:

{
  name: "Alice",
  age: 25,
  isAdmin: false,
  skills: ["JavaScript", "React", "Node.js"]
}

JSON.parse()

Basic Usage

JSON.parse() takes a JSON string and converts it into a JavaScript object:

const jsonString = '{"name":"Alice","age":25}';
const obj = JSON.parse(jsonString);

console.log(obj.name); // "Alice"
console.log(obj.age);  // 25

With Arrays

const jsonArray = '[1, 2, 3, 4]';
const arr = JSON.parse(jsonArray);

console.log(arr[0]); // 1

Error Handling
If the string is not valid JSON, it throws a SyntaxError:

try {
  JSON.parse("{name: 'Alice'}"); // Invalid JSON
} catch (e) {
  console.error("Parsing failed:", e.message);
}

Tip: Always wrap JSON.parse() in try...catch when working with external data.

The reviver Function

JSON.parse() can take a second argument — a reviver function — to transform values while parsing:

const data = '{"name":"Alice","birthYear":1995}';

const obj = JSON.parse(data, (key, value) => {
  if (key === "birthYear") {
    return new Date().getFullYear() - value; // Convert to age
  }
  return value;
});

console.log(obj); // { name: "Alice", birthYear: 30 } (assuming current year = 2025)

JSON.stringify()

Basic Usage

**JSON.stringify() **converts an object into a JSON string:

const obj = { name: "Alice", age: 25 };
const jsonString = JSON.stringify(obj);

console.log(jsonString);
// '{"name":"Alice","age":25}'

With Arrays

const arr = [1, 2, 3];
console.log(JSON.stringify(arr)); // "[1,2,3]"

Handling Non-Serializable Values

undefined, functions, and symbols are skipped:

const obj = { a: 1, b: undefined, c: () => {} };
console.log(JSON.stringify(obj)); // '{"a":1}'

NaN, Infinity, and -Infinity become null:

console.log(JSON.stringify([NaN, Infinity, -Infinity])); // "[null,null,null]"

The replacer Function

You can control what gets included using a replacer function or array:

const user = { name: "Alice", age: 25, password: "secret" };

// Function replacer
console.log(JSON.stringify(user, (key, value) => {
  if (key === "password") return undefined;
  return value;
}));
// '{"name":"Alice","age":25}'

// Array replacer (whitelist keys)
console.log(JSON.stringify(user, ["name", "age"]));
// '{"name":"Alice","age":25}'

Pretty Printing (Indentation)
You can add spacing to make JSON more readable:

const obj = { name: "Alice", age: 25 };
console.log(JSON.stringify(obj, null, 2));

Output:

{
  "name": "Alice",
  "age": 25
}

Common Use Cases

Local Storage

localStorage only stores strings, so JSON.stringify() and JSON.parse() are essential:

const user = { name: "Alice", age: 25 };

// Save
localStorage.setItem("user", JSON.stringify(user));

// Retrieve
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // "Alice"

API Requests & Responses

Most APIs send and receive JSON:

fetch("/api/user")
  .then(res => res.json()) // equivalent to JSON.parse()
  .then(data => console.log(data));

When sending data:

fetch("/api/user", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Alice", age: 25 })
});

Deep Cloning Objects

A common trick is to deep-clone an object with JSON:

const obj = { name: "Alice", skills: ["JS"] };
const clone = JSON.parse(JSON.stringify(obj));

clone.skills.push("React");

console.log(obj.skills);   // ["JS"]
console.log(clone.skills); // ["JS", "React"]

⚠️ Caveat: This fails with functions, Dates, Map, Set, and other non-JSON values.

Pitfalls & Limitations

Circular References
Objects with self-references cannot be stringified:

const obj = {};
obj.self = obj;
JSON.stringify(obj); // Throws TypeError

Loss of Data Types

Dates become strings
undefined, functions, symbols are removed
Map, Set, RegExp are not preserved

Performance Concerns
For very large objects, JSON.stringify() and JSON.parse() can be slow. Libraries like flatted or superjson help handle advanced cases.

. Alternatives & Advanced Tools

structuredClone() – modern alternative for deep cloning, supports more types than JSON.parse(JSON.stringify(...)).

Libraries:

superjson
for preserving Dates, Maps, Sets.
flatted
for circular structures.

Quick Reference

Conclusion

JSON.parse() and JSON.stringify() are deceptively simple but incredibly powerful. They’re essential for:

Converting between strings and objects
Safely storing and transmitting data
Controlling serialization with replacer/reviver
Debugging with pretty-printing

By mastering these two methods, you’ll unlock smoother workflows with APIs, storage, and data manipulation in JavaScript.

Mastering Software Development Best Practices: Top Interview Questions and Answers (SOLID, KISS, DRY, YAGNI)

DevFrontier — Thu, 28 Aug 2025 15:12:32 +0000

Clean coding principles aren’t just buzzwords—they’re what separate junior developers from professionals who write maintainable, scalable, and reliable software. In interviews, you’ll often be asked about software best practices to test your ability to write code that’s easy to understand, extend, and maintain.

This article covers the most common interview questions and answers around coding principles like SOLID, KISS, DRY, and YAGNI, plus general development best practices.

⚙️ General Best Practices

Q: Why are coding standards and conventions important?

They make code consistent, easier to read, and easier for teams to maintain.
Reduce bugs and onboarding time for new developers.

Q: What is code refactoring and why is it necessary?

Refactoring = restructuring existing code without changing behavior.
Improves readability, reduces duplication, and simplifies design for long-term maintainability.

Q: Why is writing tests important?

Ensures correctness, prevents regressions, supports refactoring with confidence.
Unit tests validate small pieces, integration tests ensure components work together, end-to-end tests validate the full system.

🧱 SOLID Principles

Q: What is the SOLID principle in OOP?

Acronym for five principles that make code more maintainable and flexible.

S – Single Responsibility Principle (SRP)

A class/module should have only one reason to change.
Example: Don’t mix database logic with UI logic.

O – Open/Closed Principle (OCP)

Entities should be open for extension but closed for modification.
Example: Add new functionality via inheritance or interfaces, not by editing core code.

L – Liskov Substitution Principle (LSP)

Subtypes should be substitutable for their base types without breaking functionality.
Example: If Square inherits Rectangle, it must behave like a Rectangle in all cases.

I – Interface Segregation Principle (ISP)

Don’t force clients to depend on methods they don’t use.
Example: Instead of a giant interface IVehicle, split into smaller ones like IDrive, IFly.

D – Dependency Inversion Principle (DIP)

Depend on abstractions, not concrete implementations.
Example: Code against interfaces, not specific classes.

✨ Other Clean Code Principles

Q: What is KISS?

Keep It Simple, Stupid → Simplicity is key; avoid unnecessary complexity.
Example: Prefer a simple loop over a complex chain of functional calls if it’s more readable.

Q: What is DRY?

Don’t Repeat Yourself → Avoid duplicating logic; extract common functionality.
Example: Instead of repeating validation in multiple places, centralize it in one method.

Q: What is YAGNI?

You Aren’t Gonna Need It → Don’t build features until they are actually required.
Example: Don’t implement multi-language support unless the product roadmap calls for it.

🧩 Scenario Questions

Q: Your codebase is becoming hard to maintain. What steps do you take?

Apply refactoring.
Check for violations of DRY/KISS.
Revisit architecture to apply SOLID principles.
Improve unit/integration test coverage.

Q: You notice duplicate logic across multiple modules. What would you do?

Refactor to follow DRY: extract into a shared function, service, or utility.

Q: A colleague added a very complex design pattern for a simple feature. How do you respond?

Remind them of KISS & YAGNI → complexity should only exist if needed.

🧩 Expanded Scenario Questions

Q: You’re reviewing a teammate’s code and notice a single class with 1,000+ lines handling database queries, business logic, and UI rendering. What principle is being violated and how do you fix it?

Violation: Single Responsibility Principle (SRP).
Fix: Break the class into smaller classes/modules (e.g., UserRepository, UserService, UserController) so each has one clear responsibility.

*Q: The product manager asks you to add a “dark mode” feature, but your teammate hard-coded colors throughout the UI. How do you handle this?
*

Violation: DRY (duplicate logic all over the code).
Fix: Centralize styling into a config/theme system so colors can be reused and updated in one place.

Q: Your API client library has methods that 80% of consumers never use, but they are still forced to implement them. What principle is broken?

Violation: Interface Segregation Principle (ISP).
Fix: Split the large interface into smaller, more specific interfaces (e.g., IReadableClient, IWritableClient).

Q: A teammate wants to add a caching layer “just in case” traffic increases in the future. How do you respond?

Violation: YAGNI.
Fix: Don’t add complexity until the problem actually arises. Wait until metrics justify caching.

Q: You’re debugging an issue and find that a subclass overrides a method but changes its behavior in a way that breaks the parent class contract. What principle is violated?

Violation: Liskov Substitution Principle (LSP).
Fix: Redesign the subclass so it behaves consistently with the parent, or create a separate hierarchy.

Q: You find several places in the code where database queries are written inline as string concatenations. What are the risks, and how would you improve it?

Risk: SQL injection vulnerability, hard-to-maintain queries.
Fix: Use parameterized queries/ORM, extract common queries into repository functions.

Q: Your team has multiple services tightly coupled to a specific third-party payment provider. The company is considering switching providers. What principle was ignored?

Violation: Dependency Inversion Principle (DIP).
Fix: Introduce an abstraction/interface (PaymentGateway) and have services depend on that, so you can swap implementations easily.

Q: A new developer finds the code hard to follow because of clever tricks, deeply nested ternaries, and over-engineered patterns. How do you explain what’s wrong?

Violation: KISS (Keep It Simple, Stupid).
Fix: Refactor into simple, readable methods. Emphasize readability > “cleverness.”

Q: Your microservice logs show identical error handling code repeated across multiple endpoints. What principle is not being followed?

Violation: DRY.
Fix: Extract common error handling into middleware or a reusable utility.

Q: A feature works fine, but performance is slightly slow. A teammate wants to rewrite it using a complex caching system, new data structures, and parallelism. What do you do?

Violation: YAGNI + Premature Optimization.
Fix: Optimize only after profiling shows a bottleneck. Start with simple improvements first.

✅ Conclusion
Best practices and clean coding principles ensure your software is not just working today, but maintainable tomorrow. By understanding SOLID, KISS, DRY, and YAGNI, and applying them in real-world code, you’ll not only ace interview questions but also grow as a professional developer.

Mastering Web Fundamentals: Top Interview Questions and Answers (HTTP, TLS, Security, Performance)

DevFrontier — Thu, 28 Aug 2025 14:50:17 +0000

When preparing for a web developer interview, mastering the fundamentals can give you a huge advantage. Topics like HTTP, TLS/SSL, security best practices, and performance optimization often appear in technical interviews, especially for frontend, backend, or full-stack roles.

In this article, we’ll cover the most common interview questions around these topics—with clear, concise answers—so you’ll be ready to impress your interviewer.

🌐 HTTP Protocol

Q: What is the difference between HTTP/1.1, HTTP/2, and HTTP/3?

HTTP/1.1: One request per TCP connection (pipelining exists but suffers from head-of-line blocking).
HTTP/2: Supports multiplexing multiple requests on one TCP connection, plus header compression.
HTTP/3: Uses QUIC (on UDP) to eliminate TCP head-of-line blocking, reducing latency.

Q: Difference between idempotent and safe HTTP methods?

Safe: No server-side state change (GET, HEAD, OPTIONS).
Idempotent: Multiple identical requests have the same effect (GET, PUT, DELETE).

Q: What is the purpose of the Host header?

Identifies which domain the request is for, enabling multiple domains on one IP (virtual hosting).

Q: Difference between PUT and PATCH?

PUT: Replaces the entire resource.
PATCH: Applies a partial update.

Q: Difference between 301, 302, and 307 redirects?

301: Permanent redirect.
302: Temporary redirect, older browsers often change POST → GET.
307: Temporary redirect, preserves method (POST stays POST).

Q: What are 200, 204, and 304 responses used for?

200 OK: Success with content.
204 No Content: Success without a body.
304 Not Modified: Resource unchanged, client should use cache.

Q: How do ETags and Last-Modified help caching?

They let the client validate cached resources with the server. If unchanged, server returns 304 Not Modified, saving bandwidth.

Q: What is CORS and why is it enforced?

Cross-Origin Resource Sharing controls which origins can request resources. Prevents malicious sites from making unauthorized API calls using a logged-in user’s credentials.

🔒 TLS/SSL & HTTPS

Q: How does TLS establish a secure connection?

Client & server exchange supported ciphers.
Server presents a certificate to prove identity.
They negotiate a symmetric session key via asymmetric crypto.
All future traffic is encrypted with the session key.

Q: Difference between symmetric and asymmetric encryption in TLS?

Asymmetric: Used during handshake (public/private key).
Symmetric: Used for actual data (faster).

Q: What is the purpose of an SSL/TLS certificate?

Binds a domain to a public key and proves ownership, signed by a trusted Certificate Authority.

Q: What is HSTS and why is it important?

HTTP Strict Transport Security forces browsers to always use HTTPS, preventing downgrade and SSL stripping attacks.

Q: Why are TLS 1.0/1.1 deprecated?

They use weak ciphers and are vulnerable to known attacks. Modern systems require TLS 1.2+.

Q: Self-signed vs CA-issued certificates?

Self-signed: Not trusted by browsers, used only for dev/test.
CA-issued: Trusted because the CA is in the browser/OS trust store.

🛡️ Security Best Practices

Q: How do you protect against XSS?

Escape user input in HTML.
Use CSP (script-src 'self').
Avoid dangerous functions like eval().

Q: What are HttpOnly, Secure, and SameSite cookie flags?

HttpOnly: JS can’t access cookie.
Secure: Sent only via HTTPS.
SameSite: Restricts cross-site sending (mitigates CSRF).

Q: How does CSRF work and how to prevent it?

Attacker tricks a logged-in user’s browser to make requests.
Prevention: SameSite cookies, CSRF tokens, and re-authentication for sensitive actions.

Q: What is a Content Security Policy (CSP)?

A header defining allowed sources for scripts, images, etc. Prevents execution of untrusted scripts.

Q: How to protect against SQL injection?

Use parameterized queries or ORM. Never concatenate untrusted input directly.

Q: Why use rate limiting?

To prevent brute force, API abuse, or DoS attacks.

Q: Authentication vs Authorization?

Authentication: Verifying identity (who you are).
Authorization: Verifying permissions (what you can do).

Q: Why hash passwords instead of storing plaintext?

If breached, plaintext leaks all accounts. Always hash with bcrypt/Argon2 + salt.

Q: Same-Origin Policy vs CORS?

Same-Origin Policy: Default browser restriction blocking cross-origin requests.
CORS: Server-side mechanism to relax that restriction.

⚡ Performance & Optimization

Q: How does browser caching improve performance?

Reduces network requests by storing files locally → faster load times.

Q: Cache-Control: no-cache vs no-store vs max-age?

no-cache: Must revalidate before using cached copy.
no-store: Never cache (sensitive data).
max-age=N: Cache for N seconds without revalidation.

Q: Why use Content-Encoding: gzip/br?

Compresses text-based responses to reduce payload size.

Q: How does a CDN improve performance?

Caches content globally, serving from the nearest edge server to reduce latency.

Q: Lazy loading vs preloading resources?

Lazy load: Load only when needed (e.g., images below fold).
Preload: Fetch critical resources early.

Q: How does HTTP/2 multiplexing help?

Multiple requests in parallel on a single TCP connection, avoiding head-of-line blocking.

Q: Render-blocking vs non-blocking resources?

Render-blocking: Stop rendering until loaded (CSS, synchronous JS).
Non-blocking: Loaded asynchronously (defer, async).

Q: What are Core Web Vitals?

LCP (Largest Contentful Paint): Measures loading speed.
CLS (Cumulative Layout Shift): Measures visual stability.
INP (Interaction to Next Paint): Measures responsiveness.

Q: How to optimize large JavaScript bundles?

Code splitting, tree shaking, minification, lazy loading, CDN hosting.

🧩 Scenario Questions

Q: Users’ sessions are being hijacked. What could be wrong?

Cookies lack Secure/HttpOnly flags.
Session token exposed via XSS.
No HTTPS → MITM attacks.
Session fixation attacks.

Q: The site is slow for overseas users. How do you fix it?

Use a CDN.
Deploy regional servers.
Improve caching and compression.

Q: Client is randomly logged out. Why?

Session timeout too short.
Load balancer missing sticky sessions.
Cookie blocked due to SameSite misconfiguration.

✅** Conclusion**

Interviewers love to test candidates on the fundamentals of web technologies. If you can explain how HTTP works, why TLS matters, how to secure apps, and how to optimize performance, you’ll stand out immediately.

By practicing these Q&A, you’ll not only prepare for interviews but also become a stronger developer with a solid foundation in web engineering.

Understanding the useContext Hook in React

DevFrontier — Tue, 26 Aug 2025 13:57:13 +0000

State management is one of the most important aspects of building dynamic React applications. While props help pass data from parent to child, this approach can quickly become cumbersome when components are deeply nested. This is where React Context and the useContext Hook come in.

What is React Context?

React Context provides a way to share values (like state, functions, or themes) across your component tree without having to pass props manually at every level.

The Role of the useContext Hook

The useContext Hook allows functional components to consume values from a Context directly. Instead of wrapping components in a Consumer component, useContext makes it simpler and more readable.

1. Create a Context

2. Provide the Context Value
Wrap your component tree with the Provider to make data available.

3. Consume the Context Value
Inside any child component, use useContext to access the value.

When to Use useContext

When you need to avoid prop drilling.
To manage global state like user authentication, theme toggles, or language settings.
To share functions or configuration across deeply nested components.

Best Practices

Keep your contexts small and focused. Each context should ideally handle a single concern (e.g., user, theme, settings).
Combine useContext with useReducer for more complex state management.
Use clear and descriptive context names to improve maintainability.

Introduction to GraphQL: Basics and Examples

DevFrontier — Tue, 26 Aug 2025 10:28:40 +0000

GraphQL is a powerful query language for APIs and a runtime for executing those queries. Developed by Facebook, GraphQL provides a more flexible and efficient way to interact with data compared to traditional REST APIs. Here's a beginner-friendly overview with examples.

What is GraphQL?

GraphQL is a query language that allows clients to specify exactly what data they need from an API. Instead of multiple endpoints, GraphQL uses a single endpoint and provides data in a predictable structure.

Key Benefits:

Single Endpoint: All requests are sent to one endpoint.
Efficient: Clients only receive the data they ask for.
Strongly Typed: The schema defines types and relationships clearly.
Flexible: Perfect for frontend apps needing specific data.

Core Concepts

Schema: Defines the shape of your data (types, fields, and relationships).
Query: The read operation to fetch data.
Mutation: Used to modify or add data.
Resolver: Functions that handle fetching or modifying data for each field.

Why Use GraphQL?

Great for mobile and frontend apps needing efficient data fetching.
Reduces over-fetching and under-fetching common in REST APIs.
Makes APIs self-documenting through schemas and introspection.

Getting Started

Server: Apollo Server, GraphQL Yoga.
Client: Apollo Client, Relay.
Tools: GraphiQL or GraphQL Playground for testing queries.

Conclusion
GraphQL is an essential tool for modern web development, offering flexibility and efficiency in data handling. By learning its schema, queries, and mutations, developers can build powerful, scalable APIs. Start experimenting with tools like Apollo to see how GraphQL can enhance your projects.

Array Methods Every Programmer Should Know

DevFrontier — Tue, 26 Aug 2025 09:58:43 +0000

Arrays are one of the most fundamental data structures in programming, and mastering array methods can significantly improve your efficiency and code readability. Whether you're working with JavaScript, Python, or other languages, understanding these key methods is essential.

1. forEach()
This method allows you to iterate over an array without creating a new one. It's commonly used for performing actions on each element.

2. map()
map() creates a new array by applying a function to each element. It's ideal when you want to transform data.

3. filter()
filter() returns a new array containing only elements that meet certain criteria.

4. reduce()
reduce() condenses an array into a single value, making it great for sums, products, or aggregations.

5. find()
find() returns the first element that satisfies a condition, making it useful when you need just one match.

6. some() and every()

some() checks if at least one element meets a condition.
every() checks if all elements meet a condition.

7. includes()
Checks if an array contains a specific value.

8. sort()
sort() arranges elements in order. It can be customized using a comparator.

9. slice() and splice()

slice() returns a portion of an array without modifying it.
splice() modifies the original array by adding/removing elements.

10. flat() and flatMap()

flat() flattens nested arrays.
flatMap() maps and flattens in one step.

Conclusion
Mastering these array methods will make your code more concise, readable, and powerful. Whether you're manipulating data, searching through elements, or transforming arrays, these tools will streamline your workflow and help you write more elegant solutions.

Understanding Redux: A State Management Library for JavaScript Applications

DevFrontier — Mon, 25 Aug 2025 15:50:56 +0000

In modern web development, managing state effectively is a critical challenge, especially in large and complex applications. State refers to the data that determines the behavior and rendering of an application at any given time. As applications grow, keeping track of state across multiple components can become complicated. This is where Redux comes in.

What is Redux?

Redux is a predictable state container for JavaScript applications. It is most commonly used with libraries like React, but it can work with any JavaScript framework or even plain JavaScript. Created by Dan Abramov and Andrew Clark, Redux is inspired by the Flux architecture but with simpler and more predictable patterns.

The core idea of Redux is that the entire application state is stored in a single store, making it easier to track changes and debug. The state in Redux is immutable, meaning it cannot be changed directly; instead, actions describe what happened, and reducers specify how the state should change.

Key Concepts of Redux

Store: The centralized place where the entire state of the application is kept.

Actions: Plain JavaScript objects that describe an event or change in the application. They must have a type property.

Reducers: Pure functions that take the current state and an action and return a new state based on that action.

Dispatch: The method used to send actions to the store.

Selectors: Functions used to extract specific pieces of state.

Why Use Redux?

Predictability: The single source of truth (store) and immutability make state changes predictable and easier to debug.

Maintainability: Clear separation of actions and reducers improves code organization.

Developer Tools: Redux DevTools enable time-travel debugging and easy inspection of state changes.

Scalability: Suitable for applications with complex state logic and multiple UI components sharing state.

How Redux Works

Action Creation: When something happens in the UI (e.g., button click), an action is created and dispatched.

Reducer Execution: The reducer function checks the action type and returns a new state without mutating the original state.

State Update: The store updates with the new state, triggering subscribed UI components to re-render.

When to Use Redux

Redux is powerful but not always necessary. For small or simple applications, using React's built-in useState and useContext might be sufficient. However, if your app has:

Complex state management needs
Multiple components needing the same state
Frequent state changes

Then Redux can be a great choice.

Conclusion

Redux provides a robust way to manage application state, making it predictable and easier to maintain. While there is a learning curve, especially for beginners, its benefits in scalability and debugging are substantial. Understanding Redux fundamentals—store, actions, reducers—lays the foundation for building reliable and maintainable applications.

Understanding React Lifecycle Methods in Class Components

DevFrontier — Mon, 25 Aug 2025 15:30:44 +0000

When working with React, components have a life cycle that consists of different phases. Lifecycle methods are special functions that allow you to run code at specific points during a component's creation, update, and removal. Here’s a breakdown of these lifecycle stages:

1. Mounting Phase (When the Component is Added to the DOM)

- constructor(props)
This is called first when a component is created. It’s used to initialize state and bind methods.

- static getDerivedStateFromProps(props, state) (rarely used)
Updates the state based on changes in props before rendering.

- render()
Describes what to display in the UI. It must be pure and cannot cause side effects.

- componentDidMount()
Runs after the component has been inserted into the DOM. It’s commonly used for API calls, subscriptions, or starting timers.

2. Updating Phase (When Props or State Change)

- static getDerivedStateFromProps(props, state) (rarely used)
Executes before every re-render, allowing state updates based on new props.

- shouldComponentUpdate(nextProps, nextState) (optional)
Controls whether the component should re-render. Useful for performance optimization.

- render()
Called again to update the UI.

- getSnapshotBeforeUpdate(prevProps, prevState) (rarely used)
Captures information (like scroll position) from the DOM before it changes.

- componentDidUpdate(prevProps, prevState)
Runs after the component updates. Ideal for additional API calls or DOM manipulations.

3. Unmounting Phase (When the Component is Removed)

- componentWillUnmount()
Called right before the component is destroyed. Perfect for cleanup tasks like removing event listeners, canceling API calls, or clearing timers.

Lifecycle Flow Overview

Hooks Equivalent in Functional Components

With the introduction of Hooks, functional components can mimic these lifecycle behaviors:

componentDidMount → useEffect(() => {...}, [])
componentDidUpdate → useEffect(() => {...}, [dependencies])
componentWillUnmount → Cleanup function inside useEffect

Understanding these lifecycle methods is crucial for building robust and optimized React applications. Whether you use class components or modern functional components with hooks, knowing when and how components render and update is essential for effective development.

REST vs GraphQL vs WebSockets: Understanding the Differences

DevFrontier — Fri, 22 Aug 2025 05:12:32 +0000

When building modern applications, especially those that need to exchange data between clients and servers, choosing the right communication method is crucial. Three common approaches are REST, GraphQL, and WebSockets. While they all enable data exchange, they work very differently and are suited for different scenarios.

1. REST (REpresentational State Transfer)

REST is the most traditional and widely used method for building APIs. It uses standard HTTP methods like GET, POST, PUT, and DELETE to interact with resources. Each resource has its own endpoint (e.g., /users, /products/123).

How it works:

The client sends a request to a specific endpoint.
The server responds with a predefined data structure.
Each request is independent, meaning no persistent connection is kept.

Example:
GET request (fetching data)

// Get user details
fetch('https://api.example.com/users/42')
  .then(response => response.json())
  .then(data => {
    console.log('User details:', data);
  })
  .catch(error => console.error('Error:', error));

POST request (creating new data)

// Create a new user
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Alice',
    email: 'alice@example.com'
  })
})
  .then(response => response.json())
  .then(data => {
    console.log('New user created:', data);
  })
  .catch(error => console.error('Error:', error));

PUT request (updating existing data)

// Update user details
fetch('https://api.example.com/users/42', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: 'newalice@example.com'
  })
})
  .then(response => response.json())
  .then(data => {
    console.log('User updated:', data);
  })
  .catch(error => console.error('Error:', error));

DELETE request (removing data)

// Delete a user
fetch('https://api.example.com/users/42', {
  method: 'DELETE'
})
  .then(response => {
    if (response.ok) {
      console.log('User deleted successfully');
    } else {
      console.error('Failed to delete user');
    }
  })
  .catch(error => console.error('Error:', error));

When to use REST:

When data needs are simple and predictable.
When you want a well-established, easy-to-implement approach.

2. GraphQL (Graph Query Language)

GraphQL is a more flexible API query language. Instead of multiple endpoints, there’s typically one endpoint where the client specifies exactly what data it needs.

How it works:

The client sends a query describing the required fields.
The server responds with only that data—no more, no less.

Example:
Query to get a user’s name and email along with their last 3 orders:

POST https://api.example.com/graphql
Body:
{
  user(id: 42) {
    name
    email
    orders(limit: 3) {
      id
      total
    }
  }
}

Response:

{
  "data": {
    "user": {
      "name": "Alice",
      "email": "alice@example.com",
      "orders": [
        { "id": 101, "total": 250 },
        { "id": 102, "total": 180 },
        { "id": 103, "total": 90 }
      ]
    }
  }
}

When to use GraphQL:

When different clients (web, mobile, IoT) need different sets of data.
When performance and efficiency in data fetching matter.

3. WebSockets

WebSockets create a persistent, two-way connection between the client and server, allowing instant updates without repeated requests.

How it works:

Once the connection is established, both client and server can send messages anytime.
This enables real-time updates, perfect for live features.

Example:
A chat app using WebSockets:

// Client connects
ws = new WebSocket("wss://chat.example.com")
ws.onmessage = (event) => console.log("New message:", event.data)

// Server sends updates instantly
Server -> Client: { "from": "Bob", "text": "Hello, Alice!" }

When to use WebSockets:

When your application needs live updates (chat, dashboards, multiplayer games).
When speed and continuous communication are essential.

Choosing the Right Approach

Use REST when you need simplicity and well-structured, predictable endpoints.
Use GraphQL when you want flexibility and efficiency in fetching data.
Use WebSockets when you need real-time, continuous communication.

In some cases, applications even combine these technologies. For example, an app might use REST or GraphQL for fetching static data and WebSockets for live updates.

Node.js: Practical Coding Challenges

DevFrontier — Sun, 10 Aug 2025 16:33:31 +0000

Create a Simple HTTP Server
Challenge: Create a server that returns "Hello World" when visiting /, and returns "Not Found" with a 404 status for other routes.

Solution:

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/' && req.method === 'GET') {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World');
  } else {
    res.writeHead(404, { 'Content-Type': 'text/plain' });
    res.end('Not Found');
  }
});

server.listen(3000, () => console.log('Server running on port 3000'));

Key Points:

Basic http module usage.
Correct status codes & headers.
Route/method checking.

Read and Write a File
Challenge: Read a data.txt file, append " - Updated" to its contents, and save to output.txt.

Solution:

const fs = require('fs');

fs.readFile('data.txt', 'utf8', (err, data) => {
  if (err) throw err;
  const updatedData = data + ' - Updated';
  fs.writeFile('output.txt', updatedData, (err) => {
    if (err) throw err;
    console.log('File written successfully');
  });
});

Key Points:

Use asynchronous file I/O.
Proper error handling.

Handle POST Request Data
Challenge: Create a server that accepts JSON data via POST and responds with { received: true, data: ... }.

Solution:

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.method === 'POST') {
    let body = '';
    req.on('data', chunk => (body += chunk));
    req.on('end', () => {
      try {
        const data = JSON.parse(body);
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({ received: true, data }));
      } catch (err) {
        res.writeHead(400, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({ error: 'Invalid JSON' }));
      }
    });
  } else {
    res.writeHead(405, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({ error: 'Method Not Allowed' }));
  }
});

server.listen(3000, () => console.log('Server running on port 3000'));

Key Points:

Manual body parsing without libraries.
JSON validation with try/catch.
Proper HTTP status codes.

Use Streams for Large File Copy

Challenge: Copy large.txt to copy.txt using streams.

Solution:

const fs = require('fs');

const readStream = fs.createReadStream('large.txt');
const writeStream = fs.createWriteStream('copy.txt');

readStream.pipe(writeStream);

writeStream.on('finish', () => {
  console.log('File copied successfully');
});

Key Points:

Use .pipe() for efficient data transfer.
Handle big files without loading them fully into memory.

Promise-based File Reading
Challenge: Create a function readFileAsync that returns a promise with file content.

Solution:

const fs = require('fs');

function readFileAsync(path) {
  return new Promise((resolve, reject) => {
    fs.readFile(path, 'utf8', (err, data) => {
      if (err) reject(err);
      else resolve(data);
    });
  });
}

readFileAsync('data.txt')
  .then(content => console.log(content))
  .catch(err => console.error(err));

Key Points:

Promise wrapper for callback-based APIs.
Proper resolve/reject handling.

Async/Await API Call
Challenge: Fetch data from an API and log the title of the first item.

Solution:

const https = require('https');

async function fetchData() {
  return new Promise((resolve, reject) => {
    https.get('https://jsonplaceholder.typicode.com/posts', res => {
      let data = '';
      res.on('data', chunk => (data += chunk));
      res.on('end', () => resolve(JSON.parse(data)));
    }).on('error', reject);
  });
}

(async () => {
  try {
    const posts = await fetchData();
    console.log(posts[0].title);
  } catch (err) {
    console.error('Error fetching data:', err);
  }
})();

Key Points:

Async/Await with Promises.
Native https request handling.

Simple Express API
Challenge: Build a small Express server with /hello route returning JSON { message: "Hello" }.

Solution:

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

app.get('/hello', (req, res) => {
  res.json({ message: 'Hello' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

Key Points:

Express routing basics.
Returning JSON.