twitter clone

Twitter Clone สร้างขึ้นใน next.js + typeScript + tailwind CSS โดยใช้ Cloud Firestore และ Storage

ดูตัวอย่าง?

showcase.mp4

คุณสมบัติ

• การรับรองความถูกต้องด้วยการรับรองความถูกต้องของ Firebase
• พิมพ์ส่วนประกอบปฏิกิริยาอย่างมากด้วย typeScript
• ผู้ใช้สามารถเพิ่มทวีตเช่นรีทวีตและตอบกลับ
• ผู้ใช้สามารถลบทวีตเพิ่มทวีตลงในบุ๊กมาร์กและปักทวีตของพวกเขา
• ผู้ใช้สามารถเพิ่มรูปภาพและ GIF ลงในทวีต
• ผู้ใช้สามารถติดตามและเลิกติดตามผู้ใช้รายอื่นได้
• ผู้ใช้สามารถดูผู้ติดตามและผู้ติดตามอื่น ๆ และรายการต่อไปนี้
• ผู้ใช้สามารถดูผู้ใช้ทั้งหมดและรายการที่ได้รับความนิยม
• การอัปเดตแบบเรียลไทม์ไลค์รีทวีตและโปรไฟล์ผู้ใช้
• ข้อมูลที่ได้รับความนิยมแบบเรียลไทม์จาก Twitter API
• ผู้ใช้สามารถแก้ไขโปรไฟล์ได้
• การออกแบบที่ตอบสนองสำหรับมือถือแท็บเล็ตและเดสก์ท็อป
• ผู้ใช้สามารถปรับแต่งโทนสีของไซต์และพื้นหลังสี
• การอัปโหลดรูปภาพทั้งหมดจะถูกเก็บไว้ในที่เก็บข้อมูลบนคลาวด์ Firebase

เทค?

• next.js
• ตัวพิมพ์ใหญ่
• tailwind css
• ฐานไฟ
• SWR
• ui ที่ไม่มีหัว
• ตอบโต้ขนมปังปิ้งร้อน
• การเคลื่อนไหวของ framer

การพัฒนา

นี่คือขั้นตอนในการเรียกใช้โครงการในพื้นที่

1. โคลนที่เก็บ

   git clone https://github.com/ccrsxx/twitter-clone.git

2. ติดตั้งการพึ่งพา

   npm i

3. สร้างโครงการ Firebase และเลือกเว็บแอป

4. เพิ่มการกำหนดค่า firebase ของคุณเป็น. .env.development โปรดทราบว่า NEXT_PUBLIC_MEASUREMENT_ID เป็นทางเลือก

5. ตรวจสอบให้แน่ใจว่าคุณได้เปิดใช้งานบริการ Firebase ต่อไปนี้:

   • การรับรองความถูกต้อง เปิดใช้งานวิธีการลงชื่อเข้าใช้ Google
   • Cloud Firestore สร้างฐานข้อมูลและตั้งตำแหน่งไปยังภูมิภาคที่ใกล้ที่สุดของคุณ
   • ที่เก็บคลาวด์ สร้างถังเก็บข้อมูล

6. ติดตั้ง Firebase CLI ทั่วโลก

   npm i -g firebase-tools

7. เข้าสู่ระบบ Firebase

   firebase login

8. รับรหัสโครงการของคุณ

   firebase projects:list

9. เลือกรหัสโครงการของคุณ

   firebase use your-project-id

10. ณ จุดนี้คุณมีสองตัวเลือก เรียกใช้โครงการนี้โดยใช้ Firebase บนคลาวด์หรือใช้เครื่องจำลอง

    1. ใช้แบ็กเอนด์เมฆ Firebase:

       1. ปรับใช้กฎ Firestore ดัชนี Firestore และกฎการจัดเก็บคลาวด์

          firebase deploy --except functions

       2. เรียกใช้โครงการ

          npm run dev

    2. ใช้ Firebase Local Emulator:

       1. ติดตั้ง Java JDK เวอร์ชัน 11 หรือสูงกว่าก่อนดำเนินการ สิ่งนี้จำเป็นสำหรับการเรียกใช้อีมูเลเตอร์

       2. ตั้งค่าตัวแปรสภาพแวดล้อม NEXT_PUBLIC_USE_EMULATOR เป็น true ใน .env.development สิ่งนี้จะทำให้แอปใช้อีมูเลเตอร์แทนแบ็กเอนด์คลาวด์

       3. ณ จุดนี้คุณสามารถเรียกใช้คำสั่งต่อไปนี้เพื่อให้มีโคลน Twitter ที่ใช้งานได้อย่างสมบูรณ์ในพื้นที่:

          npm run dev:emulators

หมายเหตุ : เมื่อคุณปรับใช้กฎดัชนี Firestore อาจใช้เวลาไม่กี่นาทีในการดำเนินการให้เสร็จสมบูรณ์ ดังนั้นก่อนที่ดัชนีจะเปิดใช้งานคุณจะได้รับข้อผิดพลาดเมื่อคุณดึงข้อมูลจาก Firestore

คุณสามารถตรวจสอบสถานะของดัชนี Firestore ของคุณด้วยลิงก์ด้านล่างแทนที่ your-project-id ด้วยรหัสโครงการของคุณ: https://console.firebase.google.com/u/0/project/your-project-id/firestore/indexes

ไม่จำเป็น:

• หากคุณต้องการรับข้อมูลที่ได้รับความนิยมจาก Twitter API คุณต้องสร้างบัญชีนักพัฒนา Twitter และรับปุ่ม API ของคุณ จากนั้นเพิ่มคีย์ API ของคุณไปที่ .env.development ฉันหวังว่า Elon Musk จะไม่ทำให้ API นี้จ่ายหรือไม่
• หากคุณต้องการทำให้สถิติผู้ใช้ซิงค์กับทวีตที่ถูกลบคุณจะต้องเปิดใช้งานฟังก์ชั่นคลาวด์สำหรับ Firebase จากนั้นปรับใช้ฟังก์ชั่นคลาวด์