Careeroza

Folder Structure

The Generated Project

shopease/
├── app/
│   ├── favicon.ico
│   ├── globals.css        global styles (Tailwind import)
│   ├── layout.tsx         root layout: <html> and <body>
│   └── page.tsx           home page  ->  /
├── public/                static files served as-is (/logo.svg)
│   └── next.svg
├── next.config.ts         Next.js configuration
├── next-env.d.ts          Next.js types (do not edit)
├── tsconfig.json          TypeScript settings, "@/*" alias
├── eslint.config.mjs      ESLint rules
├── postcss.config.mjs     Tailwind via PostCSS
├── package.json
└── node_modules/

Where Your Code Goes

Folder	Contains
`app/`	Routes: pages, layouts, loading/error UI, route handlers
`components/`	Reusable UI pieces (ProductCard, Navbar). Not routes.
`lib/`	Helpers: database client, formatters, API calls
`public/`	Images, fonts, robots files served from `/`
`types/`	Shared TypeScript types (`Product`, `Order`)

Note: Only special files inside app/ (like page.tsx) become routes. A components/ folder inside app/ is fine too, because a folder without page.tsx is not a public URL.

The @ Import Alias

tsconfig.json maps @/* to the project root, so imports stay short no matter how deep the file is:

{
  "compilerOptions": {
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "bundler",
    "plugins": [{ "name": "next" }],
    "paths": { "@/*": ["./*"] }
  }
}

// instead of '../../../components/ProductCard'
import ProductCard from '@/components/ProductCard';
import { formatPrice } from '@/lib/format';