Mini Project: Finance Management

Finance Management เป็นเว็บไซต์สำหรับบันทึกรายรับรายจ่าย ซึ่งสามารถใช้งานได้ทั้งผู้ที่สมัครเป็นสมัครมชิก และ ไม่ได้เป็นสมาชิก

ส่วนที่หน้าสนใจ คือ การนำเทคโนโลยีใหม่ ๆ เข้ามาใช้งาน เช่น tailwindcss มาทำส่วน Dark mode

ซึ่งสามารถทำได้ง่ายไม่ยุ่งยากมาก แต่อาจจะติดปัญหาตรง config นิดหน่อย โค้ดก็สั้นมาก (โค้ดมีการเซ็ต theme color ไว้ด้วยครับ)

<div className=”flex justify-between items-center bg-white text-bgx dark:bg-bgnav dark:text-primary”> </div>

ศึกษาเพิ่มได้จาก บันทึกการเปลี่ยนเว็บไซต์ไปใช้ Tailwind CSS (aofleejay.com)

ส่วนที่หน้าสนใจ คือ มีการใช้ state management ที่ชื่อว่า zustand โครงสร้างจะประมาณนี้โดยมีการเขียน Type ให้ Store เพิ่มด้วย ในตัวอย่างจะเป็นการสร้าง Store เบื้องต้น โดยฟังก์ชันการทำงานหลัก ๆ มี get คือการดึงค่าใน store มาใช้ และ set คือการจัดการตัวแปรใน store

การเรียกใช้ก็ไม่ยากอย่างที่คิด

import { TransactionStore } from "../store";
const { userID, tranID, tranDate, tranNote, tranType, tranAmount,} 
= TransactionStore();

ศึกษาเพิ่มได้จาก Zustand (surge.sh)

และส่วนสุดท้าย การเขียนด้วย Typescript หลัก ๆ คือการเขียนกำหนด Type ให้กับพวกตัวแปร เพื่อง่ายต่อการตรวจสอบข้อผิดพลาด

และ นี้คือข้อดีที่เห็นได้ชัดเมื่อเราพลาดใส่ข้อมูลที่ Type ไม่ตรง จะมี error ขึ้นมาเตือนอัตโนมัติ

ลองศึกษาดูเพิ่มเติมได้ตามลิงค์ด้านล่างครับ

TypeScript คืออะไรว่ะ ของ่ายๆหน่อย

แนะนำการใช้งานระบบ

เริ่มจากส่วนติดตั้งโปรเจคกันก่อนนะครับโดยจะแบ่งเป็น 2 ฝั่งคือ Frontend, Backend

Backend

git clone https://github.com/Jetnipat-c/mini-project-backend.git
cd mini-project-backend
yarn
yarn start

Frontend

git clone https://github.com/Jetnipat-c/mini-project-frontend.git
cd mini-project-frontend
yarn
yarn run dev

เปิด Browser web แล้วเข้าไปที่ http://localhost:3000/

จะพบกับหน้าเข้าสู่ระบบ ประกอบไปด้วย ปุ่มสมัครสมาชิกหรือเข้าใช้งานแบบ guests user

หน้าเข้าสู่ระบบ

หน้าสมัครสมาชิก

หากเข้าสู๋ระบบรหัสผ่านหรือผู้ใช้งานไม่ถูกต้องจะมีข้อความแจ้งเตือนขึ้นมา

หน้าแรกเมื่อเข้าสู๋ระบบ จะแบ่งออกเป็น 2 Component

Manage Transaction

คือ ส่วนที่ไว้เพิ่มรายการเข้าไป

Lastes Transaction

คือ ส่วนที่จะดึงข้อมูลรายการมาแสดง

ต่อไปคือหน้าส่วน admin http://localhost:3000/admin

Lastes Transaction

คือ ส่วนที่จะดึงข้อมูลรายการมาแสดง และ ปุ่มเลือกมีไว้สำหรับเลือกรายการข้อมูลไปแก้ไขข้อมูลต่อไป

Manage Transaction

คือ ส่วนที่จะดึงข้อมูลรายการที่เรากดปุ่มเลือกมาแสดง

และหน้าเว็บทั้งหมดเป็นแบบ Responsive โดยระบบหลัก ๆ จะมีเพียงเท่านี้

ลิงค์แนะนำการใช้งาน https://youtu.be/kl2kruOx9_M

source code ทั้งหมดอยู่ที่ Github นะครับ

Jetnipat-c/mini-project-frontend

Jetnipat-c/mini-project-backend