📂 Typical Project Layout

Let's take a look at a typical project layout:

project/
├── class/              # Business logic classes (request-scoped)
│   ├── Payment.js
│   └── User.js
├── controller/         # HTTP request handlers
│   ├── api/            # API endpoint controllers
│   │   ├── auth.js
│   │   └── users.js
│   └── page/           # HTML page controllers
│       ├── about.js
│       └── home.js
├── middleware/         # Route middleware functions
│   └── auth.js
├── public/             # Static assets (directly accessible)
│   └── assets/
│       ├── css/
│       │   └── app.css # Auto-generated by Tailwind
│       ├── img/
│       └── js/
├── route/              # Route definitions (subdomain-based)
│   ├── api.js          # Routes for api.example.com
│   └── www.js          # Routes for www.example.com
├── storage/            # App storage (logs, cache, uploads)
│   └── .cache/
├── view/               # HTML templates
│   ├── content/
│   ├── css/            # (Optional) Custom Tailwind entry points
│   ├── footer/
│   ├── header/
│   └── skeleton/
├── .env                # Environment variables (secrets, API keys)
├── odac.json           # App configuration
└── package.json        # Project metadata & npm scripts

📁 Directory Breakdown

CLI Commands

Your package.json includes scripts to manage your project lifecycle:

# STAGE 1: DEVELOPMENT
# Starts dev server with hot-reload & automatic Tailwind CSS
npm run dev

# STAGE 2: BUILD
# Compiles and optimizes assets (CSS) for production
npm run build

# STAGE 3: PRODUCTION
# Starts the optimized server
npm start

Note: For production websites with DNS and SSL, use odac web create to register with Odac server.

Following this structure helps keep your code's responsibilities separate. Your routing logic lives in one place, your app logic in another, and your presentation files in a third. It's a recipe for success!