twitter clone

Klon Twitter Dibangun di Next.js + TypeScript + Tailwind CSS Menggunakan Cloud Firestore dan Storage

Pratinjau?

showcase.mp4

Fitur

• Otentikasi dengan otentikasi firebase
• Komponen bereaksi yang sangat diketik dengan naskah
• Pengguna dapat menambahkan tweet, seperti, retweet, dan balasan
• Pengguna dapat menghapus tweet, menambahkan tweet ke bookmark, dan menyematkan tweet mereka
• Pengguna dapat menambahkan gambar dan gif ke tweet
• Pengguna dapat mengikuti dan berhenti mengikuti pengguna lain
• Pengguna dapat melihat pengikut mereka dan lainnya dan daftar berikut
• Pengguna dapat melihat semua pengguna dan daftar tren
• Perbarui Realtime Pembaruan, Retweet, dan Profil Pengguna
• Data tren realtime dari API Twitter
• Pengguna dapat mengedit profil mereka
• Desain responsif untuk seluler, tablet, dan desktop
• Pengguna dapat menyesuaikan skema warna situs dan latar belakang warna
• Semua unggahan gambar disimpan di Firebase Cloud Storage

Teknologi?

• Next.js
• Naskah
• Tailwind CSS
• Firebase
• Swr
• UI tanpa kepala
• Bereaksi Toast Panas
• Gerakan Pembingkaian

Perkembangan

Berikut adalah langkah -langkah untuk menjalankan proyek secara lokal.

1. Klon Repositori

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

2. Instal dependensi

   npm i

3. Buat Proyek Firebase dan pilih Aplikasi Web

4. Tambahkan konfigurasi firebase Anda ke .env.development . Perhatikan bahwa NEXT_PUBLIC_MEASUREMENT_ID adalah opsional

5. Pastikan Anda telah mengaktifkan layanan Firebase berikut:

   • Otentikasi. Aktifkan metode masuk Google.
   • Cloud Firestore. Buat database dan atur lokasinya ke wilayah terdekat Anda.
   • Penyimpanan cloud. Buat ember penyimpanan.

6. Pasang Firebase Cli secara global

   npm i -g firebase-tools

7. Masuk ke Firebase

   firebase login

8. Dapatkan ID Proyek Anda

   firebase projects:list

9. Pilih ID Proyek Anda

   firebase use your-project-id

10. Pada titik ini, Anda memiliki dua pilihan. Jalankan proyek ini menggunakan firebase di cloud atau secara lokal menggunakan emulator.

    1. Menggunakan Firebase Cloud Backend:

       1. Menyebarkan Aturan Firestore, Indeks Firestore, dan Aturan Penyimpanan Cloud

          firebase deploy --except functions

       2. Jalankan proyek

          npm run dev

    2. Menggunakan Firebase Local Emulator:

       1. Instal Java JDK versi 11 atau lebih tinggi sebelum melanjutkan. Ini diperlukan untuk menjalankan emulator.

       2. Atur variabel lingkungan NEXT_PUBLIC_USE_EMULATOR ke true di .env.development . Ini akan membuat aplikasi menggunakan emulator alih -alih cloud backend.

       3. Pada titik ini, Anda dapat menjalankan perintah berikut untuk memiliki klon Twitter yang berfungsi penuh berjalan secara lokal:

          npm run dev:emulators

Catatan : Ketika Anda menggunakan aturan indeks firestore, mungkin perlu beberapa menit untuk menyelesaikannya. Jadi sebelum indeks diaktifkan, Anda akan mendapatkan kesalahan saat mengambil data dari Firestore.

Anda dapat memeriksa status indeks firestore Anda dengan tautan di bawah ini, ganti your-project-id dengan ID proyek Anda: https://console.firebase.google.com/u/0/project/your-project-id/firestore/indexes

Opsional:

• Jika Anda ingin mendapatkan data tren dari API Twitter, Anda perlu membuat akun pengembang Twitter dan mendapatkan kunci API Anda. Kemudian tambahkan tombol API Anda ke .env.development . Saya berharap Elon Musk tidak membuat API ini dibayar?
• Jika Anda ingin membuat statistik pengguna disinkronkan dengan tweet yang dihapus, Anda perlu mengaktifkan fungsi cloud untuk firebase. Kemudian sebarkan fungsi cloud.