JavaScript Applications – What You Can Build with JavaScript

Web Front-End Applications

The most obvious application of JavaScript is building interactive web user interfaces. Every dynamic behaviour you see on a modern website — dropdowns, modals, infinite scroll, live search, form validation, drag-and-drop — is powered by JavaScript. Modern front-end development is dominated by three frameworks: React (by Meta), Vue (by Evan You), and Angular (by Google).

These frameworks let developers build Single Page Applications (SPAs) — web apps that load once and then update content dynamically without full page reloads. Gmail, Google Docs, Twitter/X, Airbnb, and Netflix all use this approach to deliver an app-like experience inside a browser.

// React component — a simple counter
import { useState } from "react";

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

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>–</button>
    </div>
  );
}

export default Counter;

Back-End and Server Applications

Node.js enables JavaScript on the server side, and it excels at building REST APIs, GraphQL servers, real-time services, microservices, and serverless functions. Frameworks like Express.js, Fastify, and NestJS make building production-grade APIs straightforward.

Companies like LinkedIn, Netflix, Uber, and PayPal migrated significant parts of their infrastructure to Node.js, reporting dramatic improvements in performance and developer productivity. PayPal reported a 35% decrease in average response time and doubled requests per second after moving to Node.js.

// Express.js REST API with async/await
const express = require("express");
const app = express();
app.use(express.json());

// Simulated database
const products = [
  { id: 1, name: "Laptop",  price: 999 },
  { id: 2, name: "Monitor", price: 399 },
];

// GET all products
app.get("/api/products", async (req, res) => {
  res.json({ success: true, data: products });
});

// GET a single product
app.get("/api/products/:id", async (req, res) => {
  const product = products.find((p) => p.id === +req.params.id);
  if (!product) return res.status(404).json({ error: "Product not found" });
  res.json({ success: true, data: product });
});

// POST a new product
app.post("/api/products", async (req, res) => {
  const newProduct = { id: Date.now(), ...req.body };
  products.push(newProduct);
  res.status(201).json({ success: true, data: newProduct });
});

app.listen(3000, () => console.log("Server ready on port 3000"));

Mobile Applications

React Native (by Meta) lets you build genuine native iOS and Android apps using JavaScript and React. Unlike hybrid solutions that wrap a web view, React Native compiles to real native UI components — the result looks and feels exactly like a native app. Expo is a popular toolchain built on top of React Native that simplifies development significantly.

Major apps built with React Native include Facebook, Instagram, Shopify, Discord, Pinterest, and the Microsoft Teams mobile app. With one JavaScript codebase you can target both iOS and Android simultaneously, which is a massive productivity win for teams.

// React Native — a simple greeting screen
import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet } from "react-native";

export default function GreetingScreen() {
  const [name, setName] = useState("");

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to my App</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        onChangeText={setName}
        value={name}
      />
      <Text style={styles.greeting}>
        {name ? `Hello, ${name}!` : ""}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center" },
  title:     { fontSize: 24, fontWeight: "bold", marginBottom: 20 },
  input:     { borderWidth: 1, width: 200, padding: 8, borderRadius: 6 },
  greeting:  { marginTop: 16, fontSize: 18, color: "royalblue" },
});

Desktop Applications

Electron (by GitHub/Microsoft) packages a Node.js runtime and Chromium browser into a standalone desktop application. The result is a cross-platform app that runs identically on Windows, macOS, and Linux, built entirely with HTML, CSS, and JavaScript. Some of the most popular desktop software in the world runs on Electron: Visual Studio Code, Slack, Discord, Figma's desktop app, Notion, and Twitch.

A newer alternative, Tauri (using Rust), produces much smaller and faster desktop apps from web front-end code. Both options let JavaScript developers ship polished desktop software without learning a platform-specific language like Swift, C#, or C++.

Browser Extensions

Browser extensions — the small tools you install in Chrome or Firefox to block ads, manage passwords, or take screenshots — are built with JavaScript using the Web Extensions API. The API is largely standardised across Chrome, Firefox, Edge, and Safari, meaning a single JavaScript codebase works in every major browser.

// Browser Extension — content script that highlights all links on a page
// This runs when the extension is activated by the user

const links = document.querySelectorAll("a");

links.forEach((link) => {
  link.style.backgroundColor = "yellow";
  link.style.outline = "2px solid orange";
});

console.log(`Highlighted ${links.length} links on this page.`);

Game Development

Phaser.js is the most popular JavaScript game framework, used to build 2D games that run in the browser with no plugin required. For 3D games and visualisations, Three.js and Babylon.js provide powerful WebGL abstraction. HTML5 Canvas and WebGL are the underlying browser APIs that make graphics possible.

Browser games have an enormous advantage: they are instantly playable — no download, no install, just a URL. Games like Agar.io (2015) demonstrated that pure browser games can handle millions of concurrent players. Many indie developers build and sell JavaScript games on platforms like itch.io.

Data Visualisation

D3.js (Data-Driven Documents) is the gold standard for data visualisation on the web. It binds data to DOM elements and applies transformations to create bar charts, line graphs, scatter plots, network diagrams, and interactive maps. Major news organisations — The New York Times, The Guardian, FiveThirtyEight — use D3.js for their data journalism. Chart.js is a simpler alternative for standard charts, and Observable Plot is a newer, more approachable option.

// Chart.js — simple bar chart
import Chart from "chart.js/auto";

const ctx = document.getElementById("myChart");

new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    datasets: [{
      label: "Monthly Sales ($k)",
      data: [12, 19, 8, 24, 30, 17],
      backgroundColor: [
        "#4361ee", "#3a0ca3", "#7209b7",
        "#f72585", "#4cc9f0", "#4895ef",
      ],
    }],
  },
  options: {
    responsive: true,
    plugins: { legend: { position: "top" } },
  },
});

IoT and Embedded Systems

Johnny-Five is a JavaScript robotics and IoT framework that lets you program Arduino microcontrollers and many other boards using Node.js. Espruino is a tiny JavaScript interpreter that runs directly on microcontrollers — no host computer required. This means JavaScript developers can build physical devices: LED controllers, temperature sensors, home automation systems, and robots.