Gambaran besar: apa kita nak buat

Okay harini kita nak belajar pasal macam mana nak buat gallery blog (takde idea lah nak kasi nama apa). Nanti kita pilih sama-sama.

Okay berdasarkan yang kau cakap hari tu kan — basically kau nak buat website yang orang boleh tgk gambar-gambar yang kau post, and boleh comment or maybe like. But you want to build it in your own design kann. Sooo its very simple actually — but let think it in flow, macam mana a user akan guna dia.

Nama dulu — sebab ni yang paling susah

Ni part paling susah sebenarnya. Bukan kod tapi nama (dgn nada melawak). Tekan mana-mana satu yang kau rasa kena:

Apa yang projek ni kena ada

Okay senang cerita — ni senarai benda yang projek ni kena boleh buat. Tick la yang kau dah ada:

Yang belum ada tu tak kisah langsung. Kita akan setup satu-satu dalam lesson akan datang.

Flow: macam mana orang guna website ni

First we need to understand that bila kau masuk website tu, obviously benda yang orang akan nampak adalah gambar-gambar etc. And then maybe die boleh open gambar tu and comment or like, dan sebagainya.

Tapi ingat — flow dia bukan satu, tapi dua. Ada flow visitor, dan ada flow admin (kau). Tekan tab tu dan tengok satu-satu:

Haa tu je sebenarnya flow dia. Simple kan?

Tapi tunggu — gambar tu datang dari mana?

Ni part yang orang selalu terlepas pandang. Visitor nampak gambar je — tapi macam mana gambar tu sampai ke sana?

So sekarang kau ada dua bahagian besar yang jelas:

Thats about how it works. Simple right?

Tech stack: apa kita pakai untuk bina ni

Now we go into tech stack. Haa this is pretty wide — sebab you can use anything. Laravel pun boleh, PHP pun boleh, WordPress pun boleh. But for simplicity, let just use react + expressjs + neon + r2 cloudflare. Simple and practical.

Kenapa stack ni? Sebab dia satu bahasa — JavaScript dari depan sampai belakang. Kau tak payah switch otak antara dua bahasa yang berbeza.

Macam mana semua ni bersambung

Ni part paling penting dalam lesson ni — macam mana semua benda tu bercakap antara satu sama lain. Tekan dua-dua flow tu:

Struktur projek: mono repo

Last sekali — mono repo structure. Mono repo ni maksudnya satu repo, banyak app. Instead of asingkan frontend dan backend dalam repo berlainan, kita letak semua dalam satu:

            
              gallery-blog/
            
            
          
            
              ├─ apps/
            
             semua app dalam satu tempat
          
            
              │  ├─ web/
            
             React — public site + admin UI
          
            
              │  │  ├─ src/
            
            
          
            
              │  │  └─ package.json
            
             dependencies untuk web
          
            
              │  └─ api/
            
             Express — REST API
          
            
              │     ├─ src/
            
            
          
            
              │     └─ package.json
            
             dependencies untuk api
          
            
              ├─ packages/
            
             barang yang dikongsi
          
            
              │  └─ shared/
            
             types & helper kongsi
          
            
              ├─ package.json
            
             scripts untuk semua app
          
            
              └─ README.md
            
             cara nak run projek
          

Kenapa? Sebab React dan Express kongsi benda yang sama. Contoh, bentuk data Photo — dua-dua perlukan dia:

// packages/shared/src/types.ts
// Satu "bentuk" data yang dikongsi oleh web + api
export interface Photo {
  id: number;
  title: string;
  folder: string;
  imageUrl: string; // URL dari Cloudflare R2
  createdAt: string;
}

Kalau dua repo berasingan, setiap kali tukar bentuk data ni kena copy-paste kat dua tempat. Satu repo — senang, takde nak sync sana sini.

Cuba dulu: demo yang boleh klik

Okay sekarang part paling best. Ni demo gallery blog yang kita akan bina — bukan screenshot, betul-betul boleh klik:

galeri-kito.my

VisitorAdmin

Semua8Alam2Makanan2Kucing2Jalanan2

Ni yang visitor nampak. Nak upload? Tukar ke Admin

Pagi kat gunungAlam12Sunset tepi pantaiAlam24Nasi lemak pagiMakanan31Kopi aisMakanan8Kucing jiranKucing45Kucing gemukKucing19Lorong belakangJalanan6Hujan kat bandarJalanan14

Try buat macam ni:

1. Pergi Admin, upload gambar baru.
2. Create folder sendiri, susun gambar ikut suka.
3. Balik ke Visitor, klik gambar tu, like dan tinggal komen.

Semua yang kau baru buat tu — itulah projek kita. Bezanya nanti, data tu duduk dalam Neon dan gambar duduk dalam R2, bukan dalam browser je.

Recap: apa kita dah tau harini

That’s it untuk sub-lesson pertama ni. Kalau kau baca sampai habis — tahniah, kau dah faham bentuk projek kita sebelum tulis walau satu line kod pun.