twitter clone frontend

Twitter Clone Frontend

Deskripsi proyek

Saya sendiri mengambil aplikasi web twitter. Dibangun dengan NextJs dan TailwindCSS dan bekerja dengan backend Fastapi saya yang saya bangun di sini (https://github.com/dericf/twitter-clone-server-fastapi).

Ringkasan

Ini dibangun untuk bekerja di desktop dan seluler (dengan beberapa bug yang pasti diharapkan di ponsel)

Semuanya ditulis dalam TypeScript sejak awal dan menggunakan async / await sedapat mungkin.

Saya tidak mencoba dan benar -benar "mengkloning" Twitter dan semua fungsi atau desainnya. Sebaliknya, saya merancang pendapat saya sendiri dari awal.

Otentikasi/Otorisasi Pengguna

Server diatur untuk menangani token JWT melalui cookie http-khusus atau header otorisasi. Cookie digunakan untuk menjaga hal -hal sederhana.

Setiap permintaan fetch yang mengharuskan auth mengirimkan credentials: "include" .

Otorisasi sangat mendasar - hanya ada 1 jenis pengguna dan server memastikan pengguna hanya mengakses/memodifikasi/menghapus sumber daya yang sebenarnya mereka miliki.

Tweet

Seorang pengguna dapat membuat, mengedit, dan menghapus tweet, serta melihat tweet yang diposting oleh pengguna lain. Saat ini tweet hanya mendukung teks. Teks yang kaya, gambar, pratinjau tautan langsung, dll. Dapat diimplementasikan di masa depan.

Suka tweet

Seorang pengguna dapat menyukai dan tidak seperti tweet apa pun (termasuk milik Anda untuk kesederhanaan)

Komentar

Pengguna dapat membuat, mengedit, dan menghapus komentar di tweet apa pun (termasuk Anda sendiri)

Komentar suka

Seorang pengguna dapat menyukai dan tidak seperti komentar apa pun (termasuk milik Anda untuk kesederhanaan)

Mengikuti

Pengguna dapat mengikuti dan membuka diri pengguna lain dan melihat daftar pengguna yang saat ini mereka ikuti

Pengikut

Seorang pengguna dapat melihat daftar semua pengguna yang saat ini mengikuti mereka

Mengobrol

Saya mengimplementasikan obrolan real-time menggunakan WebSockets dan React Hooks/Context. Saat ini tidak mendukung obrolan grup tetapi itu mungkin diimplementasikan di masa depan. Obrolan berbasis modal sehingga tidak mengganggu aliran Anda sama sekali, cukup buka/tutup modal obrolan dari halaman mana pun tanpa pernah mengarahkan ulang.

Skema

Saya menggunakan naskah untuk mendefinisikan skema ketat untuk data yang mengalir ke dan dari server.

Contoh skema adalah sebagai berikut untuk tweet

 import { APIResponse } from "./API" ;
import { EmptyResponse } from "./General" ;

export interface Tweet {
  tweetId : number ;
  userId : number ;
  username : string ;
  content : string ;
  createdAt : string ;
}

export interface TweetCreateRequestBody {
  content : string ;
}

export interface TweetUpdateRequestBody {
  newContent : string ;
}

export type TweetResponse = APIResponse < Array < Tweet > > ;
export type TweetCreateResponse = APIResponse < Tweet > ;
export type TweetUpdateResponse = APIResponse < EmptyResponse > ;
export type TweetDeleteResponse = APIResponse < EmptyResponse > ;

interface APIResponse<T> adalah antarmuka generik khusus yang dikembalikan setiap respons - mengganti tipe T generik dengan jenis pengembalian yang sesuai dari titik akhir itu dalam nilai yang disebut value .

Misalnya:

 // T could be something like Array<CommentLike> or EmptyResponse
export interface APIResponse < T > {
  value ?: T ;
  error ?: APIResponseError ;
}

class APIResponseError adalah kelas pembungkus yang hanya dipasang ketika ada kesalahan (status respons non-200 atau kesalahan TypeScript dilemparkan). Kelas menyediakan metode objek .errorMessageUI untuk memiliki teks yang sesuai untuk menunjukkan kepada pengguna dalam pemberitahuan atau popup bersulang.

interface EmptyResponse hanya digunakan untuk mewakili tipe pengembalian titik akhir yang didefinisikan secara eksplisit tidak mengembalikan apa pun - biasanya setelah menghapus atau memperbarui catatan. Saya mungkin hanya menggunakan null tetapi saya ingin menjadi eksplisit dan menghilangkan tebakan.

---

Pengujian

Pengujian Komponen

Todo

Teknologi

Nextjs

https://nextjs.org/

Tailwindcss (dengan jit)

https://tailwindcss.com/

Momen

https://momentjs.com/

React-toast-notification

https://github.com/jossmac/react-tast-notifications

React-Select

https://github.com/jedwatson/react-slect

Pengembangan Lokal

Buat file .env dan tambahkan variabel berikut:

 NEXT_PUBLIC_API_URL="http://localhost:<SERVER_PORT>"
NEXT_PUBLIC_API_WS_URL="ws://localhost:<SERVER_PORT>/ws"

Jalankan npm install Kemudian Jalankan npm run dev untuk Memulai Server Pengembangan Berikutnya

Pastikan server backend Anda berjalan (port default 8001)

Menyebarkan

Cara termudah untuk digunakan adalah di Vercel. Cukup buat proyek Vercel baru yang ditautkan ke repo git dan tambahkan NEXT_PUBLIC_API_URL dan NEXT_PUBLIC_API_WS_URL yang menunjuk ke server API yang Anda hosting.

Untuk menggunakan versi baru Just Git Push to Master/Main untuk penyebaran produksi atau dorong ke cabang non-master/utama untuk penyebaran pratinjau/pementasan.

Akhirnya saya ingin mengembangkan alur kerja yang mulus untuk menggunakan NextJs dengan Docker. Ini harus langsung karena tidak ada fungsi tanpa server yang saat ini digunakan.