Platform under construction

Modules & Code Organization

Advanced

File Structure & npm

A JavaScript project needs a file structure and package setup that can grow without turning into a folder of random scripts.

src/
  app.js
  api/items.js
  ui/render-items.js

package.json

Modules & Code Organization

Structure code by responsibility, not by accident.

Small projects can start with one script. Real projects need clear folders, entry points and shared helpers.

npm manages project metadata, scripts and dependencies through package.json.

Good structure makes it obvious where new code should go and which files are public entry points.

src folder

Source modules for the application.

entry point

The file loaded by HTML or the build tool.

package.json

Project metadata, scripts and dependencies.

npm scripts

Repeatable commands for development and build tasks.

Examples

Good module code makes dependencies visible instead of magical.

Use clear folders and scripts

src/
  api/
  ui/
  shared/

"scripts": { "dev": "vite", "build": "vite build" }

Random files with unclear ownership

script.js
new-script.js
final-script-v3.js
helpers-copy.js

Code patterns

Reusable examples for quick reference.

These examples focus on imports, exports, module boundaries, on-demand loading and file structure you can use in real projects.

Feature folders

Group related code by feature.

src/features/search/
  search-api.js
  search-view.js
  search-state.js

Shared utilities

Keep generic helpers separate.

src/shared/format-date.js
src/shared/dom.js

npm script

Name repeatable commands.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

Dependency boundary

Import from package names after installing.

import { marked } from "marked";

Rules that matter

Organize by responsibility.

A module system only helps when files have clear jobs, small public APIs and predictable import paths.

Choose one entry point

Make startup easy to find.

Group by responsibility

API, UI and shared logic should be recognizable.

Use npm scripts

Commands should be repeatable by the whole team.

Commit lockfiles for apps

They keep dependency installs reproducible.

Avoid vague filenames

Names should explain purpose.

Document project commands

A README should tell developers how to run the project.

Production thinking

A project that is easy to navigate is easier to debug, test and grow.

Why does this matter?

File structure is architecture. It decides whether a project stays pleasant after the first week.

Accessibility

Shared UI and form helpers make accessible behavior easier to repeat correctly.

Production note

Production projects need reliable installs, repeatable builds and clear ownership of source files.

SEO note

Good build structure helps ship stable assets, correct bundles and predictable page behavior.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a tests folder.
Add one npm script name.
Rename a vague file to a purpose-driven name.

Practice assignment

Do this before moving to the next topic.

Sketch a src folder.
Pick one entry point.
Write two npm scripts.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand File Structure & npm.