Frontend: https://fullstack-course-murex.vercel.app/ Backend: https://fullstack-course-backend.vercel.app/
Checkout following branches to learn step-by-step.
-
frontend-01-nuxt- ติดตั้ง Nuxt
- ทำความรู้จัก TailwindCSS
- ติดตั้ง TailwindCSS
- ลองสร้าง Components ด้วย TailwindCSS
- ทำความรู้จัก
<template> - ทำความรู้จัก
<script setup>
-
frontend-02-pages-and-layouts- ทำความรู้จัก pages
- สร้าง page หน้าแรก
- สร้าง page หน้า portfolio
- สร้าง page หน้า login
- สร้าง layout สำหรับหน้าปกติ
- สร้าง layout สำหรับหน้า login
-
frontend-03-component-badge- ทำความรู้จัก components
- base prefix
- ลองสร้าง BadgeItem
- รู้จัก slot
- ลองสร้าง BadgeList
- รู้จัก for loop
- รู้จัก props
-
frontend-04-component-button-and-link- ลองสร้าง Button
- ลองสร้าง Link
- ทำความรู้จัก Composables
- รู้จัก Fallthrough attributes
-
frontend-05-component-icon- ทำความรู้จักการสร้าง icon
- การนำ icon ไปใช้
-
frontend-06-component-header- การสร้าง component สำหรับใช้ครั้งเดียว
- นำไปใช้ใน layout
-
frontend-07-component-footer- นำไปใช้ใน layout
-
frontend-08-page-homepage- รู้จักกับ useHead
- และจะเริ่มสร้างรายละเอียดของหน้าแรก
-
frontend-09-component-skill-list- สร้างรายละเอียดของหน้า skill list
- ทำความรู้จัก if else condiution
- ทำความรู้จัก event
-
frontend-10-component-experience-item- ทำความรู้จักกับ moment
- ทำความรู้จักกับ computed
-
frontend-11-component-experience-list- สร้าง list สำหรับ experience
-
frontend-12-component-portfolio-list- สร้าง list สำหรับ portfolio
-
frontend-13-page-login- เราจะเริ่ม implement หน้า login กัน
-
frontend-14-component-login-form- รู้จักกับ vee-validate
- รู้จักกับ middlewares
- รู้จักกับ prism เพื่อจำลอง API ของ Open API (Swagger)
-
frontend-15-component-input- สร้าง input component
-
frontend-16-component-error-message- สร้าง error message สำหรับแสดง error
-
frontend-17-state-management- รู้จักกับสิ่งที่้เรียกว่า stage management
-
frontend-18-store-pinia- pinia เข้ามาช่วยอะไร
-
frontend-19-store-auth- เขียน store ของ auth
-
frontend-20-component-skill-form- สร้าง skill form ขึ้นมา
-
frontend-21-component-editable- สร้าง editable เพื่อใช้แสดง mode ของ view และ edit
-
frontend-22-store-profile-skill- implement store สำหรับ profile โดยเริ่มจาก skill
-
frontend-23-component-experience-form- สร้าง form สำหรับ experience
-
frontend-24-component-experience-form-field- สร้าง form สำหรับ experience ในแต่ละก้อนย่อย
-
frontend-25-store-profile-experience- implement store สำหรับ experience
-
frontend-26-store-profile-portfolio- implement store สำหรับ portfolio
-
frontend-27-page-portfolio-id- implement portfolio page
- ทำความรู้จัก carousel
-
backend-01-handler-auth- ทำความรู้จัก express.js
- ทำความรู้จัก dependency injection
- สร้าง handler เพื่อส่งค่า login กลับไป
-
backend-02-handler-profile- สร้าง handler เพื่อส่งค่า login กลับไป
-
backend-03-handler-portfolio- สร้าง handler เพื่อส่งค่า login กลับไป
-
backend-04-service-auth- เติม service ใน dependency injection
- ย้าย business logic มาไว้ในนี้
- เขียน validation
-
backend-05-service-profile- เติม service ใน dependency injection
- ย้าย business logic มาไว้ในนี้
- เขียน validation
-
backend-06-service-portfolio- เติม service ใน dependency injection
- ย้าย business logic มาไว้ในนี้
- เขียน validation
-
backend-07-repository-user- สร้าง mongoose
- implement repository
- เติม repository ใน dependency injection
- เปลี่ยนให้ service มาเรียกใช้ mongodb
-
backend-08-repository-profile- สร้าง mongoose
- implement repository
- เติม repository ใน dependency injection
- เปลี่ยนให้ service มาเรียกใช้ mongodb
-
backend-09-repository-portfolio- สร้าง mongoose
- implement repository
- เติม repository ใน dependency injection
- เปลี่ยนให้ service มาเรียกใช้ mongodb