🎓 MODJOY – University Activity Platform

พัฒนาในรายวิชา Web Programming I โดย Frontend เขียนด้วย Vanilla JavaScript 100% (ไม่ใช้ Library หรือ Framework)

📌 Concept & Target

MODJOY คือแพลตฟอร์มกลางที่สร้างขึ้นมาเพื่อแก้ปัญหานักศึกษาหาเพื่อนทำกิจกรรมร่วมกันไม่ได้ ไม่ว่าจะเป็น:

• 📚 หาเพื่อนช่วยติวในรายวิชาเดียวกัน
• 🎮 หาคนที่มีความสนใจตรงกัน หรือเหงาอยากหาเพื่อนทำกิจกรรม
• 🏆 หาเพื่อนฟอร์มทีมไปแข่งขันในรายการต่างๆ

---

📸 Screenshots & UI Design

โปรเจคนี้มีการออกแบบ UI/UX ก่อนเริ่มพัฒนาจริง สามารถดูฉบับเต็มได้ที่ Figma Design - MODJOY

หน้า Feed หลักที่เรียงลำดับกิจกรรมตาม Tag ความสนใจของผู้ใช้

(ซ้าย) ระบบกรองกิจกรรมแบบละเอียด / (ขวา) หน้าโปรไฟล์และระบบสะสมเครดิต

---

🛠 Tech Stack

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Backend: Node.js, Express.js
• Database: MySQL
• Tools & Env: dotenv (.env)

---

✨ Key Features

🔐 Authentication & Roles

• สมัครสมาชิกและเข้าสู้ระบบด้วย อีเมลมหาวิทยาลัย
• ระบบ Role-based Access Control แยกระดับสิทธิ์ (Student / Admin)

🏷 Personalized Feed & Search

• Smart Feed: เรียงลำดับกิจกรรมบนหน้า Feed ตามลำดับ Tag ความสนใจของผู้ใช้
• Advanced Search: ค้นหาด้วย Keyword และกรอง (Filter) ด้วย Tag หรือสถานที่ได้พร้อมกัน
• รองรับ Pagination ด้วยการใช้ LIMIT ใน SQL

🏠 Room & Activity Management

• CRUD Operations: ผู้ใช้สามารถ สร้าง, เข้าร่วม, และยกเลิกการเข้าร่วมห้องกิจกรรมได้
• Capacity Limit: กำหนดจำนวนผู้เข้าร่วมสูงสุดในแต่ละกิจกรรม
• Admin Privilege: Admin สามารถจัดการ แก้ไข และเห็นทุกห้องในระบบได้ แต่ไม่สามารถเข้าร่วมกิจกรรมได้

✅ Attendance & Credit System

• ระบบสร้างรหัสเช็คชื่อสำหรับกิจกรรม
• Gamification: เช็คชื่อตรงเวลาได้รับ +10 เครดิต, ขาดกิจกรรมถูกหัก -5 เครดิต
• แสดงสถานะผู้เข้าร่วมชัดเจน (Present / Absent / Pending)

---

⚙️ Architecture & Database

• Frontend: (Vanilla JS) → Express API Server → MySQL Database
• Backend: ทำหน้าที่เป็นตัวกลางในการจัดการ Authentication, ประมวลผล Business Logic, ตรวจสอบสิทธิ์ และการทำ Data Validation

(DBdiagram)

โครงสร้างฐานข้อมูล (Relational Database)

• ตารางหลัก: Users, Rooms, Tags, Locations, Faculty
• ตารางความสัมพันธ์ (Mapping): RoomTag, UserTag, Roommember

---

📂 Project Structure

คลิกเพื่อดูโครงสร้างโปรเจค (Project Structure)

modjoy-university-activity-platform/
│
├── config/
│   └── db.js
├── routes/
│   ├── auth.js
│   └── room.js
├── public/
│   ├── JavaScript/
│   ├── Resource/img
│   ├── css/
│   └── html
├── database/
│   ├── Mock_up_data.sql
│   └── init.sql
├── .env.example
├── server.js
└── package.json

---

🚀 How to Run (Local Environment)

โปรเจคนี้ยังไม่ได้ Deploy สามารถรันในเครื่องได้

1. Clone the repository

git clone https://github.com/codedbypu/modjoy-university-activity-platform.git
cd <project-folder>

2. Install Dependencies

npm install

3. Setup Database

• เปิด MySQL Workbench
• นำเข้า (Import) โครงสร้างฐานข้อมูลจากไฟล์ database/init.sql

4. Environment Variables

• คัดลอกไฟล์ .env.example และเปลี่ยนชื่อเป็น .env
• ตั้งค่าตัวแปรการเชื่อมต่อ Database และ Port ให้ตรงกับเครื่อง

5. Start the Server

node server.js

เปิด Web Browser และไปที่ http://localhost:<PORT>/

---

🚧 แนวทางพัฒนาต่อในอนาคต

• เพิ่มระบบเข้ารหัสรหัสผ่าน (Password Hashing)
• ปรับโครงสร้างโค้ดเป็นรูปแบบ MVC
• เพิ่มระบบทดสอบอัตโนมัติ (Automated Testing)
• พัฒนาให้รองรับการ Deploy บน Cloud

---

📘 เอกสารประกอบโครงการ (Technical Documentation)

เอกสารฉบับเต็มที่อธิบายรายละเอียดของระบบ ได้แก่

• แนวคิดและที่มาของโครงการ
• การออกแบบระบบ (System Design)
• โครงสร้างฐานข้อมูล (Database Schema)
• การทำงานของฟีเจอร์หลัก
• Business Logic ของระบบ

ดูเอกสารฉบับเต็มได้ที่: เอกสารประกอบโครงการ MODJOY