🛠️ Weekend Project: Build a Modern JavaScript App with Webpack, Babel & Tests

The Goal

Build a Task Manager — add tasks, mark them complete, filter by status, and persist them across reloads — but the app itself is only half the point. The real deliverable is the workflow: a project you scaffolded, modularized, tested, and bundled. This is the shape of every professional JavaScript codebase, from a startup side-project to a framework app.

Everything you write lives as clean source in src/. A build step transforms it into a bundle the browser loads. Keep this pipeline in mind — each stage below is one box in it:

Notice the loop at the bottom: Jest reads the same source your bundle does. Green tests are your permission to build; a red test sends you back to the module — not to the browser to click around and guess. That feedback loop is what "modern tooling" really buys you.

Prerequisites

This is the Week 3 capstone, so it assumes the "Modern JavaScript & Tooling" week is fresh. Before you start, make sure you're comfortable with:

You'll need Node.js 18+ installed (it brings npm with it), a code editor, and a terminal. Check with node --version and npm --version first.

Required Features Checklist

These are the non-negotiables — all achievable with this week's tooling, no framework required. Tick each off as you go.

Project Structure

Here's the layout you're building toward. The golden rule: everything you author lives in src/; dist/ is generated by the build and never edited by hand (git-ignore it). Config files sit at the root where the tools look for them.

task-manager/
├── package.json          <-- scripts + dependencies
├── webpack.config.js     <-- how to bundle
├── babel.config.js       <-- how to transpile
├── jest.config.js        <-- how to test
├── .gitignore            <-- ignores node_modules/ and dist/
├── src/
│   ├── index.html        <-- template Webpack injects the bundle into
│   ├── js/
│   │   ├── models/
│   │   │   └── Task.js          <-- the data (ES6 class)
│   │   ├── services/
│   │   │   └── TaskManager.js   <-- the logic + persistence
│   │   ├── components/
│   │   │   ├── TaskForm.js      <-- UI: add a task
│   │   │   ├── TaskList.js      <-- UI: render tasks
│   │   │   └── TaskFilter.js    <-- UI: filter buttons
│   │   └── app.js              <-- entry point that wires it together
│   ├── css/
│   │   └── styles.css
│   └── __tests__/
│       ├── Task.test.js
│       └── TaskManager.test.js
└── dist/                 <-- GENERATED by `npm run build` (git-ignored)

Each module has one job: Task knows what a task is, TaskManager knows how to store and query tasks, and the components know how to draw them. That separation is exactly what makes the app testable — you can unit-test TaskManager with no browser in sight, because it never touches the DOM.

Stage 1 — Scaffold with npm

Every modern JS project starts the same way: create a folder, initialize npm, and install your tools as dev dependencies (needed to build the app, not to run the shipped bundle). Run these in your terminal:

# Create the project and enter it
mkdir task-manager && cd task-manager

# Create package.json with sensible defaults (the -y skips the prompts)
npm init -y

# Webpack 5 + its CLI and dev server
npm install --save-dev webpack webpack-cli webpack-dev-server

# Babel 7: core, the modern-JS preset, and the Webpack loader
npm install --save-dev @babel/core @babel/preset-env babel-loader

# Jest, plus babel-jest so tests understand ES modules
npm install --save-dev jest babel-jest jest-environment-jsdom

# Webpack plugins/loaders: HTML injection + CSS handling
npm install --save-dev html-webpack-plugin css-loader style-loader mini-css-extract-plugin

Then create the source folders in one go, and add the scripts you'll run every day to package.json:

mkdir -p src/js/models src/js/services src/js/components src/css src/__tests__

{
  "name": "task-manager",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "jest",
    "test:watch": "jest --watch"
  }
}

Stage 2 — Configure the Toolchain

Three small config files teach your tools how to behave. Create each at the project root.

Webpack — webpack.config.js

Webpack needs an entry (where to start following imports), an output (where to write the bundle), and rules (how to handle each file type). Exporting a function that receives argv.mode lets one config serve dev and production both.

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    entry: './src/js/app.js',           // start here and follow every import
    output: {
      path: path.resolve(__dirname, 'dist'),
      // Content-hash the filename in prod so browsers cache-bust correctly
      filename: isProduction ? '[name].[contenthash].js' : '[name].js',
      clean: true                        // wipe dist/ before each build (Webpack 5 built-in)
    },
    module: {
      rules: [
        // Every .js file except third-party code gets handed to Babel:
        { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
        // Inject <style> tags in dev; extract to a .css file in prod:
        { test: /\.css$/, use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'
        ] }
      ]
    },
    plugins: [
      // Webpack injects the hashed bundle <script> into this template for you:
      new HtmlWebpackPlugin({ template: './src/index.html' }),
      isProduction && new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' })
    ].filter(Boolean),                   // drop the `false` when not producing
    devServer: { static: './dist', hot: true, open: true },  // hot reload + auto-open
    devtool: isProduction ? 'source-map' : 'eval-source-map'  // debuggable stack traces
  };
};

Babel — babel.config.js

One preset does almost everything: @babel/preset-env reads your target browsers and transpiles exactly as much as it must. The same config is picked up by both babel-loader (build) and babel-jest (tests), so your tests run the same transpiled code your app does.

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      // "Support browsers with >0.25% share that aren't dead" — a sane default.
      targets: '> 0.25%, not dead'
    }]
  ]
};

Jest — jest.config.js

Jest runs in Node, which has no document or localStorage. The jsdom environment fakes a browser so your DOM code and localStorage persistence can be tested without a real page. The moduleNameMapper line stops a CSS import inside a tested module from crashing by mapping it to an empty stub.

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',              // simulate window, document, localStorage
  moduleNameMapper: {
    '\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js'  // stub file: module.exports = {}
  }
};

Stage 3 — Build Feature Modules

Now the application logic — and the best part is that none of it touches the DOM. That's deliberate: pure logic is easy to reason about and trivial to test. Two modules carry the app.

The Task model

A Task is a small ES6 class: it holds the data and knows a few things about itself (whether it's overdue, how to serialize). The toJSON/fromJSON pair is what lets us store tasks as text and rebuild them later.

// src/js/models/Task.js
export default class Task {
  constructor(title, description = '', options = {}) {
    // A collision-resistant id (modern engines also offer crypto.randomUUID()):
    this.id = Date.now().toString(36) + Math.random().toString(36).slice(2);
    this.title = title;
    this.description = description;
    this.completed = false;
    this.createdAt = new Date();
    this.completedAt = null;
    this.dueDate = options.dueDate || null;
    this.priority = options.priority || 'normal';
  }

  complete()   { this.completed = true;  this.completedAt = new Date(); }
  uncomplete() { this.completed = false; this.completedAt = null; }

  isOverdue() {
    if (!this.dueDate || this.completed) return false;
    return new Date() > this.dueDate;
  }

  // Turn the task into a plain, storable object (Dates → ISO strings).
  toJSON() {
    return { ...this,
      createdAt:   this.createdAt.toISOString(),
      completedAt: this.completedAt ? this.completedAt.toISOString() : null,
      dueDate:     this.dueDate ? this.dueDate.toISOString() : null
    };
  }

  // Rebuild a real Task (with methods + Date objects) from stored JSON.
  static fromJSON(json) {
    const task = new Task(json.title, json.description, {
      dueDate: json.dueDate ? new Date(json.dueDate) : null,
      priority: json.priority
    });
    Object.assign(task, {
      id: json.id,
      completed: json.completed,
      createdAt: new Date(json.createdAt),
      completedAt: json.completedAt ? new Date(json.completedAt) : null
    });
    return task;
  }
}

The TaskManager service

The service owns the array of tasks, every operation on it, and persistence. Because it's a plain class with no UI, it's the easiest thing in the app to test — which is exactly what Stage 5 does.

// src/js/services/TaskManager.js
import Task from '../models/Task';

export default class TaskManager {
  constructor() {
    this.tasks = [];
    this.loadTasks();          // rehydrate from localStorage on startup
  }

  loadTasks() {
    const saved = localStorage.getItem('tasks');
    // Map each stored plain object back into a real Task instance.
    if (saved) this.tasks = JSON.parse(saved).map(Task.fromJSON);
  }

  saveTasks() {
    localStorage.setItem('tasks', JSON.stringify(this.tasks));
  }

  addTask(title, description = '', options = {}) {
    const task = new Task(title, description, options);
    this.tasks.push(task);
    this.saveTasks();
    return task;               // return it so the caller can chain, e.g. .complete()
  }

  removeTask(id) {
    this.tasks = this.tasks.filter(task => task.id !== id);
    this.saveTasks();
  }

  getTask(id) { return this.tasks.find(task => task.id === id); }

  getAllTasks() { return [...this.tasks]; }   // a copy, so callers can't mutate our array

  getFilteredTasks(filter = 'all') {
    switch (filter) {
      case 'active':    return this.tasks.filter(t => !t.completed);
      case 'completed': return this.tasks.filter(t => t.completed);
      default:          return this.getAllTasks();
    }
  }
}

Stage 4 — Wire the UI

With the logic done, the UI is thin. Each component is a class that owns a DOM element and calls back to the app when the user acts — it never touches TaskManager directly. The entry point (app.js) is the wiring between them.

The three components

Each component owns a DOM element and a callback, following one shape — build the element, attach a listener, call back to the app. TaskForm is the template for all three:

// src/js/components/TaskForm.js
export default class TaskForm {
  constructor(onSubmit) {
    this.onSubmit = onSubmit;                 // callback into the app
    this.element = document.createElement('form');
    this.element.className = 'task-form';
    this.element.innerHTML = `
      <input type="text" name="title" placeholder="Task title" required>
      <select name="priority" aria-label="Priority">
        <option value="low">Low</option>
        <option value="normal" selected>Normal</option>
        <option value="high">High</option>
      </select>
      <button type="submit">Add Task</button>`;

    this.element.addEventListener('submit', (e) => {
      e.preventDefault();
      const data = new FormData(e.target);
      this.onSubmit({ title: data.get('title'), priority: data.get('priority') });
      e.target.reset();
    });
  }
}

The other two follow suit. TaskList.render(tasks) builds an <li> per task with a checkbox and a delete button, wiring each to onToggle(task.id) / onDelete(task.id). TaskFilter is three buttons that call onFilterChange('all' | 'active' | 'completed') and highlight the active one.

The entry point — app.js

This is the file Webpack starts from. It imports every module (including the CSS — Webpack turns that import into a real stylesheet), constructs the service and components, and defines the handlers that glue them.

// src/js/app.js
import TaskManager from './services/TaskManager';
import TaskForm from './components/TaskForm';
import TaskList from './components/TaskList';
import TaskFilter from './components/TaskFilter';
import '../css/styles.css';                 // Webpack handles this import, not the browser

class TaskApp {
  constructor(root) {
    this.taskManager = new TaskManager();
    this.currentFilter = 'all';

    this.form   = new TaskForm(this.handleAdd.bind(this));
    this.list   = new TaskList(this.handleToggle.bind(this), this.handleDelete.bind(this));
    this.filter = new TaskFilter(this.handleFilter.bind(this));

    root.append(this.form.element, this.filter.element, this.list.element);
    this.render();
  }

  handleAdd({ title, priority }) {
    this.taskManager.addTask(title, '', { priority });
    this.render();
  }

  handleToggle(id) {
    const task = this.taskManager.getTask(id);
    task.completed ? task.uncomplete() : task.complete();
    this.taskManager.saveTasks();
    this.render();
  }

  handleDelete(id) { this.taskManager.removeTask(id); this.render(); }
  handleFilter(filter) { this.currentFilter = filter; this.render(); }

  render() {
    this.list.render(this.taskManager.getFilteredTasks(this.currentFilter));
  }
}

// Boot once the DOM exists.
document.addEventListener('DOMContentLoaded', () => {
  new TaskApp(document.getElementById('app'));
});

The src/index.html template is deliberately bare — a standard <head> plus a body containing just <main id="app"></main> where the components mount. Crucially it has no <script> tag: HtmlWebpackPlugin injects the bundle with its correct hashed filename for you at build time.

Stage 5 — Add Jest Tests

Here's the payoff for keeping logic out of the DOM: you can test the whole "brain" of the app with no browser. A Jest test imports a module, calls it, and asserts with expect(...). Run npm test and Jest finds every *.test.js file automatically.

Testing the Task model

// src/__tests__/Task.test.js
import Task from '../js/models/Task';

describe('Task', () => {
  test('creates a task with sensible defaults', () => {
    const task = new Task('Buy groceries', 'Milk and eggs');
    expect(task.id).toBeDefined();
    expect(task.title).toBe('Buy groceries');
    expect(task.completed).toBe(false);
    expect(task.createdAt).toBeInstanceOf(Date);
  });

  test('complete() flips the flag and stamps a time', () => {
    const task = new Task('Test');
    task.complete();
    expect(task.completed).toBe(true);
    expect(task.completedAt).toBeInstanceOf(Date);
  });

  test('toJSON/fromJSON round-trips a task', () => {
    const restored = Task.fromJSON(new Task('Round trip', '', { priority: 'high' }).toJSON());
    expect(restored.priority).toBe('high');
    expect(restored.createdAt).toBeInstanceOf(Date);   // rebuilt as a real Date, not a string
  });
});

Testing the TaskManager service

beforeEach gives every test a clean slate — a fresh manager and an empty localStorage — so tests never leak into each other.

// src/__tests__/TaskManager.test.js
import TaskManager from '../js/services/TaskManager';

describe('TaskManager', () => {
  let manager;

  beforeEach(() => {
    localStorage.clear();       // jsdom gives us a working localStorage
    manager = new TaskManager();
  });

  test('addTask stores a task; removeTask deletes it by id', () => {
    const task = manager.addTask('Write tests');
    expect(manager.getAllTasks()).toHaveLength(1);
    manager.removeTask(task.id);
    expect(manager.getAllTasks()).toHaveLength(0);
  });

  test('getFilteredTasks separates active from completed', () => {
    manager.addTask('Done').complete();
    manager.addTask('Todo');
    expect(manager.getFilteredTasks('active')).toHaveLength(1);
    expect(manager.getFilteredTasks('completed')).toHaveLength(1);
  });

  test('tasks persist to localStorage across instances', () => {
    manager.addTask('Persisted');
    const reloaded = new TaskManager();   // simulates a page refresh
    expect(reloaded.getAllTasks()).toHaveLength(1);
  });
});

PASS  src/__tests__/Task.test.js
PASS  src/__tests__/TaskManager.test.js

Test Suites: 2 passed, 2 total
Tests:       7 passed, 7 total

// test — write this FIRST; it should fail before the method exists
test('clearCompleted removes only completed tasks', () => {
  manager.addTask('Keep');
  manager.addTask('Remove').complete();
  manager.clearCompleted();
  expect(manager.getAllTasks().map(t => t.title)).toEqual(['Keep']);
});

// implementation (add to TaskManager)
clearCompleted() {
  this.tasks = this.tasks.filter(task => !task.completed);
  this.saveTasks();
}

Stage 6 — Production Build

During development, npm start launches webpack-dev-server with hot reload at http://localhost:8080. When you're ready to ship, npm run build produces an optimized bundle in dist/.

npm start        # dev: hot-reloading server, unminified, opens the browser
npm test         # run the suite (do this before every build)
npm run build    # production: minified, hashed filenames, CSS extracted, source maps

The two modes differ on purpose. Development favours speed and debuggability — unminified output, plain main.js, CSS via <style> tags, fast eval-source-map rebuilds. Production favours a small, cacheable payload — minified code, content-hashed filenames, CSS extracted to its own file, and accurate source-maps.

After a successful build, dist/ holds a self-contained site — an index.html, a hashed JS bundle, and a hashed CSS file. Drag that folder onto Netlify, GitHub Pages, or Vercel and your app is live.

npm create vite@latest task-manager -- --template vanilla
cd task-manager && npm install
npm run dev       # instant dev server (Vite's `npm start`)
npm run build     # production bundle in dist/ (then `npm run preview` to check it)

Stretch Goals

Finished the required build with time to spare? Level it up — pick whichever excites you; none are needed to pass the rubric.

Start with search — the pattern mirrors getFilteredTasks. Write the failing test first, then add a searchTasks(query) method that lower-cases the query and returns tasks whose title or description .includes() it, and wire an input event on a search box to re-render with the results.

Self-Check Rubric

Before you call this done, grade yourself against the rubric. Aim to answer "yes" to everything in the first two columns — the stretch column is bonus.

Summary

This project is proof that Week 3 stuck. You went from writing scripts to engineering an application — modularized, tested, bundled, shippable. That scaffold-modularize-test-build loop is the backbone of every professional JavaScript codebase, and exactly the ground a framework builds on.

📚 Additional Resources

• Webpack — Core Concepts
• Babel — @babel/preset-env
• Jest — Getting Started
• Vite — Getting Started
• MDN — JavaScript modules

🚀 What's Next?

Week 3 is complete — you can now build, test, and ship a modern JavaScript app from scratch. Next week we put this tooling to work behind a framework. First up: What is React and why use it? — where the component thinking you just practised (a TaskForm, a TaskList) is exactly what React formalizes, on a build setup much like the one you wired by hand.