Skip to content
UX/UI Engineer Roadmap

Workshop: Admin Dashboard

Project Brief

Section titled “Project Brief”

Admin Dashboard

สร้าง Admin Dashboard ที่มี Sidebar navigation, Data Table แสดงข้อมูล และ Modal สำหรับเพิ่ม/แก้ไขข้อมูล ใช้ Tailwind CSS เป็นหลักในการ style
  • Sidebar navigation ที่ซ่อนบน mobile แสดงบน desktop
  • Data Table แสดงข้อมูล users พร้อม hover state
  • Modal popup สำหรับเพิ่ม/ดูข้อมูล
  • ใช้ Tailwind CSS utility classes ทั้งหมด
  • ใช้ shadcn/ui design patterns (Button variants, Card, Dialog)
  • Responsive รองรับ mobile, tablet, desktop
What you'll build Preview
1,248 Users
342 Orders
$12.4k Revenue
Name Role Status
Alex D. Admin Active
Ploy K. Editor Active
Tong W. Viewer Inactive

Project Structure

Section titled “Project Structure”
  • Directoryadmin-dashboard/
    • index.html หน้า Dashboard หลัก
    • style.css Tailwind CSS imports + custom styles
    • script.js JavaScript สำหรับ Modal และ Sidebar toggle

Step-by-Step Instructions

Section titled “Step-by-Step Instructions”

  1. Setup โปรเจกต์ + Tailwind CDN

    สร้างโฟลเดอร์ admin-dashboard/ แล้วสร้างไฟล์ index.html, style.css, script.js ใช้ Tailwind CDN สำหรับเริ่มต้นเร็ว:

    index.html
    <!DOCTYPE html>
    <html lang="th">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Admin Dashboard</title>
      <script src="https://cdn.tailwindcss.com"></script>
      <link rel="stylesheet" href="style.css" />
    </head>
    <body class="bg-gray-50 text-gray-900">
      <!-- โค้ดจะอยู่ตรงนี้ -->
      <script src="script.js"></script>
    </body>
    </html>

  2. สร้าง Sidebar Navigation

    สร้าง sidebar ที่มี logo, nav links พร้อม active state ใช้ hidden lg:flex เพื่อซ่อนบน mobile:

    • Logo/Brand name ด้านบน
    • Nav links: Dashboard, Users, Products, Settings
    • ใช้ bg-gray-900 text-white สำหรับ sidebar
    • Active link ใช้ bg-gray-800 เพื่อ highlight

  3. สร้าง Header + Mobile Menu Button

    สร้าง top header ที่มี hamburger button สำหรับ mobile แสดง page title และ user avatar:

    • Hamburger icon ที่แสดงเฉพาะบน mobile (lg:hidden)
    • Page title ตรงกลาง
    • User avatar/profile ด้านขวา

  4. สร้าง Data Table

    สร้างตาราง Users ที่มี columns: Name, Email, Role, Status พร้อม:

    • Table header สีเทาอ่อน
    • Row hover effect ด้วย hover:bg-gray-50
    • Status badge (Active = เขียว, Inactive = แดง)
    • Responsive: แสดงเป็น card บน mobile, table บน desktop

  5. สร้าง Modal (Dialog)

    สร้าง modal popup สำหรับดูรายละเอียด user:

    • Backdrop สีดำ semi-transparent (bg-black/50)
    • Modal card ตรงกลางจอ
    • Close button มุมขวาบน
    • ใช้ JavaScript ควบคุม show/hide

  6. ทำให้ Responsive + Polish

    ตรวจสอบและปรับแต่ง:

    • Mobile: sidebar ซ่อน, table เป็น cards, modal เต็มจอ
    • Tablet: sidebar ยังซ่อน, table แสดงปกติ
    • Desktop: sidebar แสดง, layout เต็มรูปแบบ
    • เพิ่ม transition animations ให้ smooth

เมื่อทำเสร็จแล้ว ไปดูเฉลยได้ที่ Solution เพื่อเทียบกับงานของคุณ