JavaScript Mini Project Patterns

Project setup ideas in plain JavaScript

js-project-patterns.jsPROJECTS

Folder Structure

project/
  index.html
  css/style.css
  js/app.js
  js/api.js
  js/ui.js

Module Split

// api.js
export async function getUsers() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
}

UI Renderer

// ui.js
export function renderUsers(users) {
  const root = document.querySelector("#users");
  root.innerHTML = users.map((u) => `${u.name}`).join("");
}

App Entry

// app.js
import { getUsers } from "./api.js";
import { renderUsers } from "./ui.js";

async function init() {
  const users = await getUsers();
  renderUsers(users);
}

init();

Practice Hub Course