The shape of a project

Open a typical project and the folder list can feel like noise. It isn't — most projects follow a recognizable pattern. Here's a stripped-down web app:

my-app/
├── package.json          # dependencies + run commands (above)
├── package-lock.json     # the lockfile — exact versions
├── .env                  # local secrets/config — NOT shared
├── .gitignore            # files Git should ignore (like .env)
├── README.md             # what this project is, how to run it
├── public/               # static files served as-is (images, icons)
└── src/                  # your actual code lives here
    ├── components/        # reusable frontend pieces (a button, a card)
    ├── pages/ (or app/)   # the screens/routes users navigate to
    ├── lib/               # shared helpers and backend logic
    └── styles/            # CSS

You don't need to memorize this — just recognize it, so when the AI says "I'll add this to src/lib," you know roughly where that is and why. A few load-bearing conventions:

• src/ holds the code you write. The clutter at the top level is mostly configuration.
• Config files at the root (the package.json, the dotfiles) configure the tools, not your app's behavior.
• .gitignore lists files that should not be saved into version control — your .env belongs here, which is exactly how secrets stay out of a shared repo.