Portfolio Website

Frontend: https://fullstack-course-murex.vercel.app/ Backend: https://fullstack-course-backend.vercel.app/

How to use this repo

Checkout following branches to learn step-by-step.

Frontend Development

1. frontend-01-nuxt

   1. ติดตั้ง Nuxt
   2. ทำความรู้จัก TailwindCSS
   3. ติดตั้ง TailwindCSS
   4. ลองสร้าง Components ด้วย TailwindCSS
   5. ทำความรู้จัก <template>
   6. ทำความรู้จัก <script setup>

2. frontend-02-pages-and-layouts

   1. ทำความรู้จัก pages
   2. สร้าง page หน้าแรก
   3. สร้าง page หน้า portfolio
   4. สร้าง page หน้า login
   5. สร้าง layout สำหรับหน้าปกติ
   6. สร้าง layout สำหรับหน้า login

3. frontend-03-component-badge

   1. ทำความรู้จัก components
   2. base prefix
   3. ลองสร้าง BadgeItem
   4. รู้จัก slot
   5. ลองสร้าง BadgeList
   6. รู้จัก for loop
   7. รู้จัก props

4. frontend-04-component-button-and-link

   1. ลองสร้าง Button
   2. ลองสร้าง Link
   3. ทำความรู้จัก Composables
   4. รู้จัก Fallthrough attributes

5. frontend-05-component-icon

   1. ทำความรู้จักการสร้าง icon
   2. การนำ icon ไปใช้

6. frontend-06-component-header

   1. การสร้าง component สำหรับใช้ครั้งเดียว
   2. นำไปใช้ใน layout

7. frontend-07-component-footer

   1. นำไปใช้ใน layout

8. frontend-08-page-homepage

   1. รู้จักกับ useHead
   2. และจะเริ่มสร้างรายละเอียดของหน้าแรก

9. frontend-09-component-skill-list

   1. สร้างรายละเอียดของหน้า skill list
   2. ทำความรู้จัก if else condiution
   3. ทำความรู้จัก event

10. frontend-10-component-experience-item

    1. ทำความรู้จักกับ moment
    2. ทำความรู้จักกับ computed

11. frontend-11-component-experience-list

    1. สร้าง list สำหรับ experience

12. frontend-12-component-portfolio-list

    1. สร้าง list สำหรับ portfolio

13. frontend-13-page-login

    1. เราจะเริ่ม implement หน้า login กัน

14. frontend-14-component-login-form

    1. รู้จักกับ vee-validate
    2. รู้จักกับ middlewares
    3. รู้จักกับ prism เพื่อจำลอง API ของ Open API (Swagger)

15. frontend-15-component-input

    1. สร้าง input component

16. frontend-16-component-error-message

    1. สร้าง error message สำหรับแสดง error

17. frontend-17-state-management

    1. รู้จักกับสิ่งที่้เรียกว่า stage management

18. frontend-18-store-pinia

    1. pinia เข้ามาช่วยอะไร

19. frontend-19-store-auth

    1. เขียน store ของ auth

20. frontend-20-component-skill-form

    1. สร้าง skill form ขึ้นมา

21. frontend-21-component-editable

    1. สร้าง editable เพื่อใช้แสดง mode ของ view และ edit

22. frontend-22-store-profile-skill

    1. implement store สำหรับ profile โดยเริ่มจาก skill

23. frontend-23-component-experience-form

    1. สร้าง form สำหรับ experience

24. frontend-24-component-experience-form-field

    1. สร้าง form สำหรับ experience ในแต่ละก้อนย่อย

25. frontend-25-store-profile-experience

    1. implement store สำหรับ experience

26. frontend-26-store-profile-portfolio

    1. implement store สำหรับ portfolio

27. frontend-27-page-portfolio-id

    1. implement portfolio page
    2. ทำความรู้จัก carousel

Backend Development

1. backend-01-handler-auth

   1. ทำความรู้จัก express.js
   2. ทำความรู้จัก dependency injection
   3. สร้าง handler เพื่อส่งค่า login กลับไป

2. backend-02-handler-profile

   1. สร้าง handler เพื่อส่งค่า login กลับไป

3. backend-03-handler-portfolio

   1. สร้าง handler เพื่อส่งค่า login กลับไป

4. backend-04-service-auth

   1. เติม service ใน dependency injection
   2. ย้าย business logic มาไว้ในนี้
   3. เขียน validation

5. backend-05-service-profile

   1. เติม service ใน dependency injection
   2. ย้าย business logic มาไว้ในนี้
   3. เขียน validation

6. backend-06-service-portfolio

   1. เติม service ใน dependency injection
   2. ย้าย business logic มาไว้ในนี้
   3. เขียน validation

7. backend-07-repository-user

   1. สร้าง mongoose
   2. implement repository
   3. เติม repository ใน dependency injection
   4. เปลี่ยนให้ service มาเรียกใช้ mongodb

8. backend-08-repository-profile

   1. สร้าง mongoose
   2. implement repository
   3. เติม repository ใน dependency injection
   4. เปลี่ยนให้ service มาเรียกใช้ mongodb

9. backend-09-repository-portfolio

   1. สร้าง mongoose
   2. implement repository
   3. เติม repository ใน dependency injection
   4. เปลี่ยนให้ service มาเรียกใช้ mongodb