ตรวจบุญ (Traudboon)

Donation Verification System

Protect yourself from donation scams — verify before you transfer

---

📋 Overview

Traudboon is a LineOA web application designed to verify donation accounts before you transfer money, helping protect users from scam operations disguised as legitimate charitable organizations. Simply enter account details or upload a QR code to check against our verified foundation database.

✨ Features

• Real-time Verification — Instant account validation against verified foundations
• Scam Detection — Pattern matching to identify suspicious accounts
• QR Code Support — Upload and verify payment QR codes
• Mobile Responsive — Optimized for all screen sizes
• Fast & Lightweight — Built with modern web technologies

💻 System Architecture

MVP

Scalable Production

🚀 Quick Start

Prerequisites

• Node.js 18.x or higher
• pnpm (recommended) or npm

Installation

# Clone the repository
git clone https://github.com/Methasit-Pun/truad-boon-app-mockup.git
cd truad-boon-app-mockup

# Install dependencies
pnpm install

# Start development server
pnpm dev

Open http://localhost:3000 to view the app.

Build for Production

# Create optimized build
pnpm build

# Start production server
pnpm start

🛠️ Tech Stack

Category	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
Styling	Tailwind CSS 4
UI Library	shadcn/ui + Radix UI
Icons	Lucide React
Theme	next-themes

📂 Project Structure

truad-boon-app-mockup/
├── app/
│   ├── globals.css         # Global styles & theme variables
│   ├── layout.tsx          # Root layout & metadata
│   ├── loading.tsx         # Loading UI
│   └── page.tsx            # Main application page
├── components/
│   ├── theme-provider.tsx  # Theme context provider
│   └── ui/                 # Reusable UI components
├── hooks/                  # Custom React hooks
├── lib/
│   └── utils.ts            # Utility functions
├── types/                  # TypeScript type definitions
└── public/                 # Static assets

🎨 Customization

Adding UI Components

This project uses shadcn/ui. Add new components:

npx shadcn@latest add [component-name]

Theme Customization

Modify color tokens in app/globals.css:

:root {
  --kbank-green: oklch(0.62 0.18 155);
  --navy-blue: oklch(0.25 0.08 250);
  /* ... customize other colors */
}

📜 Available Scripts

Command	Description
pnpm dev	Start development server
pnpm build	Build for production
pnpm start	Start production server
pnpm lint	Run ESLint

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🙏 Acknowledgments

• Built with Next.js
• UI components from shadcn/ui
• Icons from Lucide

---

Report Bug • Request Feature

Made with ❤️ for safer donations