A modern, cloud-native, and full-featured School Management & Digital Campus System engineered to digitize all academic, financial, administrative, and student life workflows. Originally a legacy monolithic PHP system, it has been re-architected from the ground up using Go (Fiber v2) + React (Vite) + Three.js 3D WebGL, delivering enterprise-grade performance, sub-millisecond response times, and an intuitive responsive user experience across desktop and mobile devices.
Experience the full interactive system live on cloud production servers:
| Component | Platform | URL |
|---|---|---|
| Public Website & Portals (Frontend) | Cloudflare Pages | 🔗 https://school-web-new-daw.pages.dev/ |
| RESTful API Backend | Render Cloud (Go Binary) | 🔗 https://school-web-new-api.onrender.com/ |
| Online Admissions Form | Cloudflare Pages | 🔗 https://school-web-new-daw.pages.dev/apply |
Tip
Instant 1-Click Demo Login (No Registration Required!)
On both login screens, click the "⭐ Auto Fill Demo Login" buttons to instantly sign in with pre-seeded test accounts:
- Administrator: Username:
admin| Password:password - Teacher / Faculty: Username:
teacher1| Password:password - Student: Username:
STU20261| Password:password - Parent / Guardian: Username:
parent1| Password:password
| Category | Module / System | Key Features | Admin | Teacher | Student / Parent |
|---|---|---|---|---|---|
| 🌍 Public | 3D Digital Twin Campus | Real-time WebGL 3D architectural models, Day/Night mode, building inspection cards | ✅ | ✅ | 🌐 (Public) |
| 🌐 Public | 4-Language Switcher | Instant multilingual switching: English 🇬🇧, Thai 🇹🇭, Chinese 🇨🇳, Japanese 🇯🇵 | ✅ | ✅ | 🌐 (Public) |
| 📝 Admissions | Online Admissions | Online application submission, document upload, and automated Applicant-to-Student conversion | ✅ | ❌ | 🌐 (Public) |
| 👥 Core | User Management | Student & staff CRUD, bulk CSV import/export, and single-click mass grade promotions | ✅ | ❌ | ❌ |
| 📅 Academic | Attendance Tracking | Daily lecture attendance, tardiness logs, medical absence tracking, and analytics | ✅ | ✅ | ✅ (View) |
| 📚 Academic | Homework & Grading | Digital assignments, student file submissions, deadline counters, and teacher feedback | ✅ | ✅ | ✅ |
| 📜 Academic | Report Cards & GPA | Automated term report card compilation, weighted GPA calculations, and printable transcripts | ✅ | ❌ | ✅ (View) |
| ⚖️ Behavior | Conduct & Discipline | Positive merit points, demerit penalty logging, disciplinary records, and parent notifications | ✅ | ✅ | ✅ (View) |
| 💸 Finance | Invoices & Billing | Tuition invoice creation, payment status tracking, and PromptPay EMVCo QR Code generation | ✅ | ❌ | ✅ |
| 🛒 Commerce | School E-Shop | Internal uniforms, books, and merchandise ordering with real-time inventory deductions | ✅ | ❌ | ✅ |
| 🚌 Logistics | School Bus Router | Transport route selection, designated pickup/drop-off stop registration, and fleet tracking | ✅ | ❌ | ✅ |
| ⚽ Life | ECAs & Activities | After-school club registrations, extracurricular activity schedules, and summer courses | ✅ | ❌ | ✅ |
| 📖 Library | Digital Library | Catalog search, physical book borrowing/return records, and overdue tracking | ✅ | ❌ | ✅ |
| 🏥 Health | Infirmary Medical Logs | Clinic visits, incident reports, medication allergy tracking, and physical limitations | ✅ | ✅ | ✅ (View) |
| 🎫 Support | Helpdesk Tickets | Campus IT and facility maintenance ticketing system with reply threads and status updates | ✅ | ✅ | ✅ |
| 📢 Resources | Information Hub | Centralized school policy handbooks, academic curriculum outlines, and external digital links | ✅ | ❌ | ✅ |
- 3D Campus Explorer: Scroll to the 3D Campus section. Left-click and drag to rotate the campus in 360 degrees. Scroll the mouse wheel to zoom in/out. Click on any building (e.g., Discovery Hall, STEM Complex, Olympic Stadium) to view facility specifications and photos.
- Multilingual Support: Click the flag badge in the navigation bar to instantly switch between English (EN), Thai (TH), Chinese (CN), and Japanese (JP).
- School Video & Stories: Watch the featured campus spotlight video and browse through the auto-sliding narrative gallery showcasing student research, arts, and athletics.
- Navigate to Admissions Application.
- Complete Step 1: Student Profile (Name, Date of Birth, Grade Applying: K1 to Grade 12).
- Complete Step 2: Parent / Guardian Details (Full name, Email, Phone contact).
- Enter any special learning requirements or medical notes in Step 3.
- Submit the form. The system will automatically generate a unique Application Number (e.g., SSS-2026-XXXXX) and register the applicant into the administrative queue.
Log in at /admin/login using admin / password.
- Review all submitted public applications with filtering by grade and status.
- Update application statuses: Pending, Under Review, Interview Scheduled, Approved, or Rejected.
- Convert to Student: When tuition is finalized, click "Convert to Student" to automatically generate a formal Student ID, create login credentials, and assign the applicant to their academic grade.
- Add / Edit / Remove Students: Update personal profiles, parent contact information, emergency contacts, and assigned classes.
- CSV Bulk Import: Upload a standard
.csvfile to import hundreds of student records simultaneously. - CSV Data Export: Export student records to CSV for government reporting or external backups.
- Mass Promotion Tool: At the end of the academic year, use the Mass Promotion feature to promote all students to the next grade level with a single click.
- Create itemized billing statements for tuition, cafeteria fees, transport, or lab materials.
- When an invoice is created, the system generates a dynamic PromptPay QR Code matching the exact invoice amount.
- Mark invoices as Paid or Cancelled upon payment verification.
- School Shop: Add new uniform items, textbooks, and supplies. Set unit prices and manage stock quantities. Fulfill incoming student orders.
- School Bus Routing: Define bus routes, stops, and driver assignments. Review registered student riders per route.
Log in at /admin/login using teacher1 / password.
- Select your assigned classroom or homeroom.
- Mark each student as Present, Late, Excused Absence, or Unexcused Absence.
- Submit the attendance record. Daily attendance metrics are immediately updated on the student's and parents' portals.
- Click "New Assignment", choose the subject, input instructions, and specify the due date.
- Review student digital file submissions and text answers.
- Enter grades and qualitative feedback. Grades automatically feed into term evaluation calculations.
- Award positive merit points for leadership, academic achievement, or community service.
- Log demerit points with official remarks for policy violations. Disciplinary actions are visible to parents in real time.
Log in at /login using STU20261 (Student) or parent1 (Parent) with password password.
- GPA & Progress: View cumulative GPA, attendance rates, and behavioral score balances.
- Homework Portal: View active homework assignments, submit completed work digitally, and inspect teacher feedback.
- Report Cards: Review end-of-term academic evaluations, grade breakdowns, and printable report cards.
- Timetable: Access weekly class schedules, lecture room locations, and teacher details.
- School Store: Browse school uniforms and supplies, add items to cart, and checkout.
- Instant PromptPay Payment: Click "Pay via QR" on any invoice or shop order to display a high-resolution PromptPay QR code. Scan using any Thai Mobile Banking app to complete payment instantly.
- Bus & ECA Registration: Register for school bus transportation and enroll in after-school clubs (Robotics, Model UN, Orchestra, Soccer).
- Leave Requests & Helpdesk: Submit absence leave requests directly to teachers, or file IT/facility maintenance tickets.
- โมเดล 3D เสมือนจริง (3D Campus Twin): เลื่อนลงมาที่หัวข้อ Explore Our 3D Campus สามารถคลิกเมาส์ซ้ายค้างเพื่อหมุนดูโรงเรียนได้รอบทิศ 360 องศา, หมุนลูกกลิ้งเมาส์เพื่อซูมเข้า-ออก, และสามารถคลิกที่ตัวอาคารเพื่อดูข้อมูลสิ่งอำนวยความสะดวกและรูปภาพจริงได้ทันที
- ปุ่มสลับภาษา 4 ภาษา: คลิกที่ปุ่มธงชาติด้านบนขวาเพื่อเปลี่ยนภาษาทั้งเว็บเป็น ไทย (TH), อังกฤษ (EN), จีน (CN), หรือ ญี่ปุ่น (JP) ได้แบบเรียลไทม์
- วิดีโอแนะนำและแกลเลอรีเรื่องราว: รับชมวิดีโอแนะนำโรงเรียนระบบ HD และแกลเลอรีรูปภาพเล่าเรื่องราวชีวิตนักเรียนที่เลื่อนเปลี่ยนภาพอัตโนมัติ
- เข้าไปที่เมนู สมัครเรียนออนไลน์ (Admissions)
- กรอก ข้อมูลนักเรียน: ชื่อ-นามสกุล, วันเกิด, ระดับชั้นที่ต้องการเข้าเรียน (อนุบาล 1 ถึง มัธยมศึกษาปีที่ 6)
- กรอก ข้อมูลผู้ปกครอง: ชื่อผู้ปกครอง, อีเมล, เบอร์โทรศัพท์ติดต่อ
- กรอกข้อมูลเพิ่มเติม เช่น ข้อมูลสุขภาพ หรือความสนใจพิเศษ
- กดปุ่มส่งใบสมัคร ระบบจะออก หมายเลขอ้างอิงใบสมัคร (เช่น SSS-2026-XXXXX) และส่งข้อมูลเข้าสู่ฐานข้อมูลระบบรับสมัครของฝ่ายธุรการทันที
เข้าสู่ระบบที่ /admin/login โดยใช้ชื่อผู้ใช้ admin / รหัสผ่าน password
- ตรวจสอบรายชื่อผู้สมัครที่ส่งข้อมูลเข้ามาผ่านหน้าเว็บไซต์
- เปลี่ยนสถานะใบสมัคร: รอตรวจสอบ, นัดสัมภาษณ์, ผ่านการคัดเลือก, หรือปฏิเสธ
- ปุ่มแปลงเป็นนักเรียน (Convert to Student): เมือนักเรียนชำระค่ามอบตัวเสร็จสิ้น สามารถกดปุ่มนี้เพื่อเปลี่ยนสถานะจาก "ผู้สมัคร" เป็น "นักเรียนในระบบ" พร้อมออกรหัสนักเรียน (Student ID) ให้อัตโนมัติ
- เพิ่ม/ลบ/แก้ไขข้อมูล: จัดการข้อมูลส่วนตัว ประวัติครอบครัว ข้อมูลสุขภาพ และระดับชั้นเรียน
- นำเข้าข้อมูลจำนวนมาก (CSV Bulk Import): อัปโหลดไฟล์
.csvเพื่อเพิ่มรายชื่อนักเรียนหลายร้อยคนเข้าสู่ระบบพร้อมกันในคลิกเดียว - ส่งออกข้อมูล (CSV Export): ดาวน์โหลดไฟล์ข้อมูลนักเรียนทั้งหมดออกมาเป็น CSV เพื่อทำรายงานทางการศึกษา
- ระบบเลื่อนชั้นเรียนอัตโนมัติ (Mass Promotion): เมื่อสิ้นสุดปีการศึกษา แอดมินสามารถกดปุ่มเลื่อนชั้นเรียนเพื่อปรับระดับชั้นของนักเรียนทั้งโรงเรียนขึ้น 1 ชั้นพร้อมกันอัตโนมัติ
- สร้างใบแจ้งหนี้ค่าเทอม ค่ากิจกรรม หรือค่าอุปกรณ์การเรียน
- ระบบจะสร้าง PromptPay QR Code ที่ระบุยอดเงินตรงกับใบแจ้งหนี้โดยอัตโนมัติ
- ตรวจสอบยอดเงินและกดยืนยันการชำระเงินเมื่อได้รับการโอนเรียบร้อยแล้ว
- School Shop: จัดการสินค้าในสหกรณ์ (ชุดนักเรียน, หนังสือ, อุปกรณ์) เพิ่มสต็อกสินค้า และตรวจสอบออเดอร์ของนักเรียน
- School Bus: กำหนดสายรถโรงเรียน จุดรับ-ส่ง คนขับรถ และตรวจสอบรายชื่อนักเรียนที่ใช้บริการในแต่ละสาย
เข้าสู่ระบบที่ /admin/login โดยใช้ชื่อผู้ใช้ teacher1 / รหัสผ่าน password
- เลือกระดับชั้นหรือห้องเรียนที่รับผิดชอบ
- เช็คสถานะนักเรียนรายบุคคล: มาเรียน (Present), สาย (Late), ลาป่วย/ลากิจ (Excused), หรือขาดเรียน (Absent)
- กดยืนยัน ข้อมูลการเข้าเรียนจะอัปเดตไปยังหน้านักเรียนและผู้ปกครองทันที
- กดสร้างการบ้านใหม่ ระบุวิชา คำชี้แจง และกำหนดเวลาส่ง (Due Date)
- ตรวจงานที่นักเรียนส่งผ่านระบบ (รองรับทั้งการพิมพ์ตอบและแนบไฟล์)
- ให้คะแนนและข้อเสนอแนะ ซึ่งคะแนนจะนำไปคำนวณในเกรดประจำภาคเรียนโดยอัตโนมัติ
- ให้คะแนนพฤติกรรมเชิงบวก (บวกแต้มความประพฤติ) สำหรับนักเรียนที่ทำความดี หรือสร้างชื่อเสียง
- หักคะแนนความประพฤติพร้อมระบุเหตุผลกรณีฝ่าฝืนกฎระเบียบ โดยผู้ปกครองสามารถตรวจสอบได้ทันที
เข้าสู่ระบบที่ /login โดยใช้ชื่อผู้ใช้ STU20261 (นักเรียน) หรือ parent1 (ผู้ปกครอง) / รหัสผ่าน password
- สรุปภาพรวม: ดูเกรดเฉลี่ยสะสม (GPA), ร้อยละการเข้าเรียน, และคะแนนความประพฤติ
- การบ้านของฉัน: ดูการบ้านที่ต้องส่ง ส่งงานผ่านระบบ และดูคะแนนที่ครูตรวจแล้ว
- สมุดรายงานผลการเรียน (Report Card): ดูเกรดแยกรายวิชาและสามารถสั่งพิมพ์เอกสารผลการเรียนได้
- ตารางเรียน: ดูตารางสอนประจำสัปดาห์ ห้องเรียน และชื่อครูผู้สอน
- ร้านค้าสหกรณ์ออนไลน์ (School Shop): เลือกซื้อชุดนักเรียนและอุปกรณ์การเรียนลงตะกร้าและสั่งซื้อได้ด้วยตนเอง
- ชำระเงินด้วย PromptPay QR: เมื่อมีใบแจ้งหนี้หรือสั่งซื้อของ สามารถกดปุ่ม "Pay QR" เพื่อเปิด QR Code พร้อมเพย์ และใช้แอปพลิเคชันธนาคารสแกนจ่ายได้ทันที
- ลงทะเบียนรถโรงเรียนและชมรม: สมัครใช้บริการรถรับส่งนักเรียน และลงทะเบียนเข้าร่วมกิจกรรมชมรมหลังเลิกเรียน (เช่น หุ่นยนต์, ดนตรี, ฟุตบอล)
- ยื่นใบลาและศูนย์ช่วยเหลือ: ส่งใบลาป่วย/ลากิจออนไลน์ให้คุณครูอนุมัติ และแจ้งปัญหาหรือข้อร้องเรียนผ่านระบบ Ticket
git clone https://github.com/Disorn1998/school-web-new.git
cd school-web-newThe backend uses SQLite with GORM auto-migrations. No external database setup is required. The database file and all demo seed data will be generated automatically upon startup.
cd backend
# Download Go modules
go mod download
# Run the Fiber server (Listens on http://localhost:3000)
go run cmd/api/main.goOpen a separate terminal window:
cd frontend
# Install Node dependencies
npm install
# Start the Vite development server (Listens on http://localhost:5173)
npm run devVisit http://localhost:5173 in your browser. All API requests are configured to seamlessly connect to your local backend server.
graph TD
A[Public User / Applicant] -->|View 3D Campus & Apply| B[Cloudflare Pages Frontend]
C[Student / Parent] -->|Check Grades, Pay QR, Shop| B
D[Teacher] -->|Take Attendance, Grade Tasks| B
E[Administrator] -->|CRUD, Finance, Mass Promotion| B
B -->|REST API over HTTPS / JWT| F[Render Cloud / Go Fiber Backend]
subgraph Go Fiber Backend Core
F --> G[JWT Authentication & RBAC]
F --> H[PromptPay EMVCo Generator]
F --> I[GORM ORM Layer]
end
I -->|Auto-Migrate / Read / Write| J[(SQLite / PostgreSQL DB)]
Distributed under the MIT License. Created with excellence for the Simple School System (SSS) educational community.