Documentation

เอกสารประกอบ
โปรเจค

คู่มือการติดตั้ง โครงสร้างไฟล์ และ Environment Variables ของ SkillScout สำหรับนักพัฒนาและผู้ดูแลระบบ

Installation Guide File Structure เว็บหลัก

Installation Guide

วิธีการติดตั้ง

ขั้นตอนการติดตั้งและตั้งค่า SkillScout บนเครื่องของคุณ ใช้เวลาไม่เกิน 10 นาที

STEP 01

Clone Repository

ดาวน์โหลด Source Code จาก GitHub Repository ของโปรเจค

git clone https://github.com/your/skillscout-ld.git
cd skillscout-ld

STEP 02

ติดตั้ง Dependencies

ติดตั้ง Package ทั้งหมดที่จำเป็น รวมถึง Next.js 15, HeroUI และ Libraries อื่น ๆ

npm install
# หรือ yarn install

STEP 03

ตั้งค่า Environment

คัดลอกไฟล์ตัวอย่างและกรอกค่า MongoDB, Cloudinary, SMTP และ NextAuth

cp .env.example .env.local
# แก้ไขค่าใน .env.local

STEP 04

รัน Development Server

เริ่มต้น Dev Server แล้วเปิด Browser ที่ localhost:3000

npm run dev
# เปิด http://localhost:3000

STEP 05

ตั้งค่า MongoDB Atlas

สร้าง Cluster บน MongoDB Atlas ตั้งค่า Network Access และ Database User

MONGODB_URI=mongodb+srv://user:pass
@cluster.mongodb.net/skillscout

STEP 06

Deploy to Vercel

Push โค้ดไปยัง GitHub แล้ว Import บน Vercel พร้อมตั้งค่า Env Vars

npm run build
vercel deploy --prod

.env.local — Environment Variables

Database & Auth

MONGODB_URI=mongodb+srv://...

NEXTAUTH_URL=http://localhost:3000

NEXTAUTH_SECRET=your-secret-key

JWT_SECRET=your-jwt-secret

External Services

CLOUDINARY_CLOUD_NAME=your-cloud-name

CLOUDINARY_API_KEY=your-api-key

SMTP_HOST=smtp.gmail.com

SMTP_USER=your@email.com

File Structure

โครงสร้างไฟล์

รายการไฟล์สำคัญในโปรเจค จัดระเบียบตามหน้าที่การทำงาน เพื่อง่ายต่อการดูแลและพัฒนาต่อ

skillscout-ld/ — Project Structure

Core Configuration

next.config.ts

Next.js 15 configuration~2 KB

tsconfig.json

TypeScript configuration~1 KB

tailwind.config.ts

TailwindCSS + HeroUI theme~3 KB

.env.local

Environment variables (ไม่ commit)—

App Router — Pages

app/layout.tsx

Root layout + Providers + Font~4 KB

app/(user)/dashboard/

User dashboard pages~40 KB

app/(organizer)/dashboard/

Organizer management pages~60 KB

app/(admin)/dashboard/

Admin control panel~35 KB

app/api/**/route.ts

API Routes — REST endpoints~120 KB

Library & Models

src/lib/db/models/

MongoDB collection schemas~30 KB

src/lib/mongodb.ts

MongoDB connection utility~2 KB

src/lib/riasec.ts

RIASEC calculation algorithms~8 KB

src/types/index.ts

Centralized TypeScript types~15 KB

Key Components

components/camps/CampCardCompact.tsx

Camp card — list view~5 KB

components/camps/CampCardDetailed.tsx

Camp card — detail view~7 KB

components/pathfinder/PathFinderQuiz.tsx

RIASEC quiz component~12 KB

components/payment/QRPayment.tsx

PromptPay QR generator~8 KB

เอกสารประกอบโปรเจค