Volunteer & Service Web

WebFeatured

MSSPSUHATYAI Website

พัฒนา Landing Page สำหรับชมรมมุสลิมในมหาวิทยาลัย โดยใช้เทคโนโลยี Next.js ร่วมกับ Tailwind CSS ในการออกแบบและพัฒนา เน้นโครงสร้างที่เป็นระเบียบ ดีไซน์เรียบง่ายแต่ทันสมัย พร้อมให้ความสำคัญกับประสบการณ์ผู้ใช้ (User Experience) ที่ลื่นไหล รองรับการใช้งานทั้งบนเดสก์ท็อปและอุปกรณ์มือถืออย่างมีประสิทธิภาพ ในส่วนของระบบหลังบ้าน ได้ทำการเชื่อมต่อฝั่ง Frontend เข้ากับ API ที่พัฒนาด้วย NestJS และใช้ MongoDB เป็นฐานข้อมูลหลัก เพื่อจัดเก็บและบริหารจัดการข้อมูลต่าง ๆ ของชมรม ไม่ว่าจะเป็นกิจกรรม ข่าวสาร หรือเนื้อหาสำคัญอื่น ๆ โดยข้อมูลทั้งหมดสามารถดึงมาแสดงผลแบบไดนามิก (Dynamic Content) ทำให้ผู้ใช้งานเห็นข้อมูลที่เป็นปัจจุบันอยู่เสมอ นอกจากนี้ ยังมีการออกแบบโครงสร้างระบบให้สามารถขยายต่อได้ในอนาคต (Scalable Architecture) รองรับการเพิ่มฟีเจอร์ใหม่ ๆ เช่น ระบบจัดการกิจกรรม การอัปเดตข่าวสารผ่านแอดมิน หรือการเชื่อมต่อกับบริการอื่น ๆ ได้อย่างยืดหยุ่น ส่งผลให้เว็บไซต์ไม่เพียงแค่สวยงาม แต่ยังมีประสิทธิภาพ เสถียร และพร้อมใช้งานในระยะยาว

NextJS

NestJS

MongoDB

Tailwind+1+0

DetailsView details

เครื่องมือสร้างโค้ด Angular แบบสำเร็จรูป

เครื่องมือสร้างโค้ด Angular แบบสำเร็จรูป (Angular Code Generator Tool) A high-performance, professional low-code productivity tool designed to automate the creation of Angular CRUD components. Generate complete frontend modules including Services, Interfaces, HTML, and TypeScript in seconds from any data source. ✨ Key Features 🎯 Multi-Source Generation: Relational Databases: SQL Server, MySQL, PostgreSQL. Legacy Systems: Specialized support for AS/400 (IBM i). Modern APIs: Parse REST API structures via URL. JSON Raw Data: Generate code directly from JSON samples. 🎨 UI Strategy Pattern: Supports multiple CSS frameworks: Bootstrap 5 (High-speed, responsive) Angular Material (Premium, standard look) ⚡ Offline Ready: All libraries (Bootstrap, Font Awesome, Prism.js) are localized—no CDN dependencies. 👁️ Real-time Preview: Syntax-highlighted code preview with Prism.js. 📦 ZIP Export: Download your entire generated module as a ready-to-use ZIP package. 📠 Exclusive IBM AS/400 Support This generator provides deep integration with IBM i (AS/400) legacy systems: Library/Table Separation: Precise schema discovery by targeting specific Libraries and Tables. Auto-Labeling: Automatically fetches COLUMN_TEXT labels from AS/400 to use as UI field names. Dapper Integration: Optimized high-speed schema reading using Dapper and OleDb. 🛠️ Tech Stack Backend: ASP.NET Core 8.0 (C#) Data Access: Dapper (High-performance micro-ORM) Frontend: Vanilla JS (AJAX-driven), CSS3, HTML5 Libraries: Prism.js: Code syntax highlighting JSZip: In-browser ZIP generation Font Awesome: Modern vector icons Bootstrap/Material: Modern UI layouts 📖 Usage Connect: Click the Database Status icon to configure your connection. Select Source: Choose between SQL, API, or JSON. Configure: Select your table or paste your API/JSON data. Customization: Select CRUD operations (Get, Post, Put, Delete). Select the CSS framework (Bootstrap/Material). Toggle individual fields to include/exclude. Generate: Click Generate Code and instantly preview your Angular modules. Download: Use Download All (ZIP) to grab the files.