Lesson 1
Project architecture
Build a practical mental model for project architecture and use it in working JavaScript.
By the end, you will be able to…
- Explain project architecture in your own words
- Use project architecture in a small program
- Recognize and debug a common failure mode
Build the mental model
Project architecture is the set of decisions about how code is organized — where UI lives versus logic versus data — made deliberately up front so the codebase stays navigable as it grows.
Syntax and working example
Read the code from inputs to output. Predict what it prints, then run it and change one value.
Why this matters
A clear structure means any contributor (including future you) can predict where new code belongs without asking.
Real-world example
This platform's own src/app, src/components, src/content, src/lib, src/types split is exactly this kind of deliberate architecture.
Common mistakes
- Letting UI components directly own business logic that should be testable in isolation
- Mixing data, logic, and presentation in one file as a project grows
- Copying a folder structure without understanding what problem it solves
Try it yourself
Challenge
Given a mixed function, separate the pure calculation from the console output.
Knowledge check
Why separate pure calculation logic from console/UI output?
Summary
Separate UI, logic, and data deliberately so the codebase stays predictable and testable as it grows.