trello clone mern

Trello Clone กับ Mern Stack!

นี่คือแอพที่สร้างขึ้นด้วย Mern Stack และคุณสามารถเข้าถึงการสาธิตสดได้ที่นี่และคุณสามารถคลิกภาพต่อไปนี้เพื่อดูวิดีโอ!

คลิกที่ภาพเพื่อดูวิดีโอ!

วัตถุประสงค์

จุดประสงค์ของฉันในการพัฒนาโครงการนี้คือการแสดงสิ่งที่ฉันสามารถทำได้ทั้งสองอย่างในส่วนหน้าและแบ็กเอนด์ ฉันอยากจะชี้ให้เห็นว่ามันเป็นโครงการแรกของฉันในฐานะ Mern Stack

คุณสมบัติ

• การออกแบบที่ตอบสนองอย่างเต็มที่เช่น Trello
• ลงทะเบียนและเข้าสู่ระบบ
• สร้างบอร์ดหลายบอร์ดเลือกพื้นหลังใด ๆ และเพิ่มสมาชิก
• สร้างหลายรายการ
• สร้างการ์ดหลายใบ
• ลากและวางรายการหรือการ์ด
• เปลี่ยนชื่อและพื้นหลังของบอร์ด
• เพิ่มคำอธิบายสำหรับบอร์ด
• เปลี่ยนชื่อเรื่องของรายการ
• เพิ่มคำอธิบายสีปกสมาชิกป้ายวันที่เริ่มต้นวันครบกำหนดรายการตรวจสอบหลายรายการและสิ่งที่แนบมาหลายรายการ
• ลบบอร์ดรายการหรือการ์ด
• ติดตามบันทึกกิจกรรมทั้งหมดของการ์ดและบอร์ด
• แสดงความคิดเห็นในการ์ดหรือบอร์ด
• บอร์ดค้นหาหรือชื่อการ์ด

เทคโนโลยีที่ใช้แล้ว

ด้านเซิร์ฟเวอร์	ฝ่ายลูกค้า	การพัฒนาเท่านั้น
Expressjs	องค์ประกอบสไตล์	พยักหน้า
อย่างชัดแจ้ง	reduxjs-toolkit
พังพอน	react-beautiful-dnd
ไม้กางเขน	วัสดุ -ui
เส้นทาง	ซอกซอก
dotenv	วันที่
jsonwebtoken	ช่วงเวลา
bcryptjs	Atlaskit/CSS-Reset
	react-hook/mouse-position
	ตอบโต้
	เบ็ดตอบสนอง

วิธีการวิ่ง?

• ดาวน์โหลด nodejs ที่นี่

• สำหรับฐานข้อมูลคุณสามารถใช้ MongoDB ในท้องถิ่นหรือ Mongo Atlas ดูที่นี่

• โคลนที่เก็บ:

  git clone https://github.com/umurdogann/trello-clone-mern

• เปลี่ยนไดเรกทอรี:

  cd trello-clone-mern

• เปิดเทอร์มินัลที่สองตำแหน่งเดียวกัน:

  • Ubuntu: gnome-terminal
  • Windows: start

• เปลี่ยนไดเรกทอรีของเทอร์มินัลแรกและติดตั้งแพ็คเกจ:

  cd server

  npm install

• สร้างไฟล์. env ในไดเรกทอรีเซิร์ฟเวอร์เช่น. env.example และป้อนตัวแปรที่ต้องการ

• เริ่มต้นเซิร์ฟเวอร์:

  npm run start

• สลับเทอร์มินัลที่สอง

• เปลี่ยนไดเรกทอรีของเทอร์มินัลที่สองและติดตั้งแพ็คเกจ:

  cd client

  npm install

• เริ่มต้นลูกค้า:

  npm run start