รูปร่างของโปรเจกต์หนึ่งชิ้น

เปิดโปรเจกต์ทั่วไปดู แล้วรายการโฟลเดอร์อาจจะรู้สึกเหมือนความอลหม่าน แต่จริงๆ แล้วไม่ใช่ — โปรเจกต์ส่วนใหญ่ทำตามแพตเทิร์นที่จำได้ นี่คือเว็บแอปแบบง่ายๆ:

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

คุณไม่จำเป็นต้องท่องจำสิ่งนี้ — แค่จำได้ว่ามันคืออะไร เพื่อว่าเมื่อ AI บอกว่า "ฉันจะเพิ่มสิ่งนี้ลงใน src/lib" คุณจะรู้คร่าวๆ ว่ามันอยู่ตรงไหนและทำไมถึงอยู่ตรงนั้น มีธรรมเนียมสำคัญบางข้อ:

• src/ เก็บโค้ดที่คุณเขียน ความรกที่ระดับบนสุดส่วนใหญ่เป็นการตั้งค่า
• ไฟล์การตั้งค่าที่ราก (package.json ไฟล์ dotfile ต่างๆ) ตั้งค่าเครื่องมือ ไม่ใช่พฤติกรรมของแอปคุณ
• .gitignore ระบุรายการไฟล์ที่ ไม่ควร ถูกบันทึกลงในระบบควบคุมเวอร์ชัน — .env ของคุณควรอยู่ในรายการนี้ ซึ่งเป็นวิธีที่ทำให้คีย์ลับอยู่นอกรีโพที่แชร์กันได้พอดี