Next.js + TypeScript + shadcn/ui boilerplate สำหรับใช้ทดสอบเขียนโปรแกรมสัมภาษณ์งาน

• Next.js 16 - React Framework
• TypeScript - Type Safety
• Tailwind CSS - Styling
• shadcn/ui - UI Components
• ESLint - Code Quality

shadcn/ui components ที่ติดตั้งไว้แล้ว:

• button - ปุ่มต่างๆ
• card - การ์ดสำหรับจัดกลุ่มเนื้อหา
• input - Input field
• label - Label สำหรับ form
• form - Form management (React Hook Form)
• dialog - Modal/Dialog
• select - Dropdown select
• textarea - Text area
• table - ตาราง
• badge - Badge/Tag
• alert - Alert messages

npm install

npm run dev

เปิดเบราว์เซอร์ที่ http://localhost:3000

npm run build
npm start

interview-prep/
├── src/
│   ├── app/              # App Router pages
│   │   ├── layout.tsx    # Root layout
│   │   ├── page.tsx      # Home page
│   │   └── globals.css   # Global styles
│   ├── components/
│   │   └── ui/           # shadcn/ui components
│   └── lib/
│       └── utils.ts      # Utility functions
├── public/               # Static files
└── package.json

import { Button } from "@/components/ui/button"

export default function Example() {
  return (
    <Button variant="default">Click me</Button>
  )
}

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Card content goes here</p>
      </CardContent>
    </Card>
  )
}

"use client"

import { useForm } from "react-hook-form"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function Example() {
  const { register, handleSubmit } = useForm()

  const onSubmit = (data: any) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <Label htmlFor="name">Name</Label>
        <Input id="name" {...register("name")} />
      </div>
      <Button type="submit">Submit</Button>
    </form>
  )
}

หากต้องการเพิ่ม shadcn/ui components อื่นๆ:

npx shadcn@latest add [component-name]

ตัวอย่าง:

npx shadcn@latest add dropdown-menu
npx shadcn@latest add toast
npx shadcn@latest add tabs

ดู components ทั้งหมดได้ที่: https://ui.shadcn.com/docs/components

• Next.js Documentation
• shadcn/ui Documentation
• Tailwind CSS Documentation
• TypeScript Documentation

1. อ่านโจทย์ให้ดี - เข้าใจความต้องการก่อนเริ่มเขียนโค้ด
2. วางแผนก่อน - คิดโครงสร้างและ approach ก่อนเริ่มเขียน
3. เขียนโค้ดที่อ่านง่าย - ใช้ชื่อตัวแปรที่สื่อความหมาย
4. Test ระหว่างทำ - ทดสอบ feature ทีละส่วน
5. จัดการ State ให้ดี - ใช้ React hooks อย่างเหมาะสม
6. Handle Edge Cases - คิดถึงกรณีพิเศษต่างๆ
7. Responsive Design - ทำให้ UI ใช้งานได้บนหลายขนาดหน้าจอ

• Todo List App
• Weather App
• Shopping Cart
• Form Validation
• Data Table with Sorting/Filtering
• Authentication Flow
• API Integration
• Real-time Search

Happy Coding! 🚀