SE NPRU TaskFlow Mini

เจ้าของผลงานเล่าไว้แบบนี้

https://task-flow-mini-ten.vercel.app # SE NPRU TaskFlow Mini (คู่มือการใช้งาน) โปรเจกต์นี้เป็นการพัฒนาระบบ TaskFlow Mini (ระบบจัดการงานส่วนบุคคล) แบบ Fullstack ตามขอบเขตการสอบไล่ (Lab Exam) แบ่งการทำงานออกเป็น Frontend (React + Vite) และ Backend (Node.js + Express) โดยมีการจัดการ Global State ด้วย Zustand ## 🛠️ โครงสร้างเทคโนโลยีที่เลือกใช้ (Technology Stack) - **Frontend**: React (Vite), TailwindCSS, React Router DOM, Axios, **Zustand** (Global State Management) - **Backend**: Node.js, Express, MongoDB (Mongoose), JSON Web Token (JWT), bcryptjs - **Global State Justification (Zustand)**: เลือกใช้ Zustand เนื่องจากมีโครงสร้างที่เข้าใจง่าย กระชับ ลดปัญหา Boilerplate โค้ดที่ซับซ้อนเมื่อเทียบกับ Redux และหลีกเลี่ยงปัญหา Context Hell ของ Context API ทำให้การจัดการ state กลางอย่าง `authUser` (ข้อมูลผู้ใช้และ Auth Token) และ `tasks` (รายการงาน สถานะโหลด และ Error) ทำได้อย่างมีประสิทธิภาพ รองรับ action สำหรับ CRUD งาน ล็อกอิน และล็อกเอาท์ ได้อย่างเป็นระบบ --- ## 🚀 วิธีการติดตั้งและรันระบบ (Local Development) ### 1. การตั้งค่า Backend 1. เปิด Terminal และเข้าไปที่โฟลเดอร์ `backend` ```bash cd backend ``` 2. ติดตั้ง Dependencies ```bash npm install ``` 3. สร้างไฟล์ `.env` โดยดูตัวอย่างจาก `.env.example` (กำหนดค่า `MONGODB_URI`, `PORT`, `JWT_SECRET`) 4. รัน Backend Server ```bash npm run dev ``` *(API จะเปิดที่พอร์ตที่ตั้งไว้ เช่น http://localhost:5000)* ### 2. การตั้งค่า Frontend 1. เปิด Terminal หน้าต่างใหม่ แล้วเข้าไปที่โฟลเดอร์ `frontend` ```bash cd frontend ``` 2. ติด

โดย Natsuda006 · ดูโพสต์ต้นทาง