JavaScript Simplified · One concept, one day, one project · Day 31 of 32

Project Architecture and Code Organization

Moving from "code that works" to "code that is organised". You split a project into clean files with import and export.

By the end of today you can

Explain why organised code matters
Share code between files with export and import
Name things and arrange folders so a project stays clear
Reorganise a to-do app into clean files

Your projects work, but they live in one long file where everything is mixed together. That is fine for 20 lines and painful at 200. Today you learn to split a project into small, focused files that each do one job, the way real codebases are built.

1. Why Organise?

Code is read far more than it is written. Organised code is easier to understand, to find things in, and to change without breaking something else. The goal is simple: each file has one clear job, and its name says what that job is.

2. export and import

Definition

export makes something in one file available to others. import brings it into another file. This lets you put related code in its own file and use it wherever you need.

What this code doesThe task logic lives in its own file and is used from the main file. Two small files, each with one job, instead of one big mixed one.

tasks.js

// tasks.js: everything about a task, in one place

// make this function available to other files
export function createTask(text) {
  return { text: text, done: false };
}

export function summarise(tasks) {
  const done = tasks.filter((t) => t.done).length;
  return tasks.length + ' task(s), ' + done + ' done';
}

app.js

// app.js: the main file, brings in what it needs
import { createTask, summarise } from './tasks.js';

const tasks = [createTask('Learn modules'), createTask('Tidy the project')];
tasks[1].done = true;

tasks.forEach((t) => console.log((t.done ? '[x] ' : '[ ] ') + t.text));
console.log(summarise(tasks));

OUTPUT   TERMINAL

➜ webbo3 node app.js
[ ] Learn modules
[x] Tidy the project
2 task(s), 1 done

tasks.js owns the task logic and exports two functions. app.js imports them and runs the program. If the rules about a task ever change, you know exactly which file to open.

3. Naming and Folders

Good organisation is mostly good names and a sensible layout.

Name a file after its job: tasks.js, storage.js, ui.js.
Name a function after what it does, as a verb: createTask, saveTasks, renderList.
Group files in folders by role, for example a js/ folder for scripts.
Keep each file focused: when a file does two unrelated things, split it.

What this code doesA tidy folder layout for a small project.

folder structure

my-app/
  index.html
  css/
    style.css
  js/
    app.js       the main file, wires things together
    tasks.js     task data and rules
    storage.js   saving and loading
    ui.js        building and updating the page

NOTE   

Each file has one job; the name tells you what is inside. This scales as the app grows.

Today’s Mini Project

📁 Organized To-Do App

Take your persistent to-do app from Day 30 and split it into files: storage (save and load), tasks (the data and rules), ui (building the list), and app (wiring it together). Same behaviour, far clearer code.

In the browser, use type="module"

To use import and export in a page, load your main file with <script type="module" src="js/app.js"></script>. The "module" type is what lets the browser understand import and export.

Challenge (15 minutes)

Add a storage.js file that exports save(tasks) and load() using localStorage, and import them into your main file. Expected: the saving logic lives in its own file.

Try This

Take any one of your earlier projects and move its helper functions into a second file, then import them.

Expected: the project works exactly as before, but the code is split into two clear files.

Picture This

Your code is growing up. It is no longer one long scroll where everything is tangled together, but a set of small files, each with a name that tells you what it does. This is how real projects stay understandable as they grow.

Checkpoint

What do export and import do?

export makes something in one file available to other files; import brings it into another file. Together they let you split code into focused files and reuse it.

Why split a project into several files?

So each file has one clear job and is easy to find and change. One big mixed file becomes hard to work with; small focused files stay clear as the project grows.

What makes a good function name?

A verb that says what it does, like createTask or saveTasks. The name should tell a reader what the function does without reading its body.

Tick Before You Move On

☐ I can explain why organised code matters
☐ I can share code with export and import
☐ I can name files and functions so their job is clear
☐ I reorganised the to-do app into clean files

Quick Recap

Organised code is easier to read, find in, and change safely. export and import share code between focused files. Name files and functions after their job; group them in folders. In the browser, load modules with script type="module".

Next: Day 32, the finish line. You bring everything together and build one complete application of your own choosing.