From 4d9d159a3011677154d69be45f875d2bc8fa4c0e Mon Sep 17 00:00:00 2001
From: Muhamad Sazwan Bin Ismail <Xxsazend12345@gmail.com>
Date: Mon, 16 Mar 2026 17:55:22 +0800
Subject: [PATCH] Create Github
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 🌟 Projek **codepaul**: Panduan Lengkap – React + Node.js + Express + GitHub Actions

Anda telah melalui pelbagai perbincangan: daripada pengenalan SLSA, kepada pembangunan aplikasi penuh dengan React, Node.js, Express, dan GitHub Actions, sehingga penciptaan repositori GitHub. Kini tiba masanya untuk menggabungkan semua elemen menjadi satu **panduan lengkap** yang boleh terus anda gunakan.

Di bawah adalah **resipi lengkap** untuk membina, menyambung, dan mengautomasikan projek **codepaul** – sebuah aplikasi full‑stack dengan React di frontend, Node.js/Express di backend, dan CI/CD menggunakan GitHub Actions. Semua kod dan arahan disertakan.

---

## 📁 **Struktur Projek**

```
codepaul/
├── client/                 # React frontend
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── App.js
│   │   ├── App.css
│   │   ├── index.js
│   │   └── components/
│   │       └── Hello.js
│   ├── package.json
│   └── README.md
├── server/                 # Node.js/Express backend
│   ├── routes/
│   │   └── api.js
│   ├── server.js
│   ├── package.json
│   └── .env
├── .github/
│   └── workflows/
│       └── ci-cd.yml
├── .gitignore
├── README.md
└── LICENSE
```

---

## 🧰 **Prasyarat**

- Node.js (v18 atau lebih baru)
- npm atau yarn
- Git
- Akaun GitHub

---

## 🛠 **Langkah 1: Membina Backend (Node.js + Express)**

```bash
mkdir codepaul
cd codepaul
mkdir server
cd server
npm init -y
npm install express cors dotenv
npm install --save-dev nodemon
```

Buat fail `server.js`:

```javascript
// server/server.js
const express = require('express');
const cors = require('cors');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());
app.use('/api', require('./routes/api'));

app.get('/health', (req, res) => {
  res.json({ status: 'OK', message: 'Server berjalan' });
});

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
```

Buat fail `routes/api.js`:

```javascript
// server/routes/api.js
const express = require('express');
const router = express.Router();

let items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
];

router.get('/items', (req, res) => res.json(items));

router.post('/items', (req, res) => {
  const newItem = { id: items.length + 1, name: req.body.name };
  items.push(newItem);
  res.status(201).json(newItem);
});

module.exports = router;
```

Dalam `server/package.json`, tambah skrip:

```json
"scripts": {
  "start": "node server.js",
  "dev": "nodemon server.js"
}
```

Buat fail `.env` (pilihan):

```
PORT=5000
```

---

## ⚛️ **Langkah 2: Membina Frontend (React)**

Kembali ke direktori utama:

```bash
cd ..
npx create-react-app client
cd client
```

Edit `src/App.js`:

```javascript
// client/src/App.js
import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState('');

  useEffect(() => {
    fetch('/api/items')
      .then(res => res.json())
      .then(setItems)
      .catch(console.error);
  }, []);

  const addItem = async (e) => {
    e.preventDefault();
    if (!newItem.trim()) return;
    try {
      const res = await fetch('/api/items', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: newItem }),
      });
      const item = await res.json();
      setItems([...items, item]);
      setNewItem('');
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div className="App">
      <h1>Senarai Item</h1>
      <ul>
        {items.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
      <form onSubmit={addItem}>
        <input
          type="text"
          value={newItem}
          onChange={(e) => setNewItem(e.target.value)}
          placeholder="Nama item baru"
        />
        <button type="submit">Tambah</button>
      </form>
    </div>
  );
}

export default App;
```

Dalam `client/package.json`, tambah baris berikut untuk memudahkan panggilan API semasa pembangunan:

```json
"proxy": "http://localhost:5000"
```

---

## 🧪 **Langkah 3: Uji Secara Tempatan**

- Terminal 1 (backend): `cd server && npm run dev`
- Terminal 2 (frontend): `cd client && npm start`
- Buka `http://localhost:3000` – anda sepatutnya dapat melihat dan menambah item.

---

## 📦 **Langkah 4: Sedia untuk Git dan GitHub**

### 4.1 Buat fail `.gitignore` di root projek

```gitignore
# dependencies
node_modules/
package-lock.json
yarn.lock

# environment
.env
.env.local

# build
dist/
build/

# logs
*.log
npm-debug.log*
```

### 4.2 Initialize Git dan commit

```bash
git init
git add .
git commit -m "Initial commit: React + Node.js + Express"
```

### 4.3 Cipta repositori di GitHub

**Kaedah 1 – melalui laman web:**
- Log masuk ke GitHub, klik **+** → **New repository**
- Nama repositori: `codepaul` (atau apa‑apa nama)
- Jangan pilih mana‑mana pilihan inisialisasi
- Klik **Create repository**

**Kaedah 2 – menggunakan GitHub CLI:**
```bash
gh repo create codepaul/codepaul --public --source=. --remote=origin --push
```

### 4.4 Sambungkan repositori tempatan ke GitHub

```bash
git remote add origin https://github.com/codepaul/codepaul.git
git branch -M main
git push -u origin main
```

Gantikan URL dengan repositori anda.

---

## 🔄 **Langkah 5: CI/CD dengan GitHub Actions**

Buat direktori `.github/workflows` dan fail `ci-cd.yml`:

```yaml
# .github/workflows/ci-cd.yml
name: CI/CD Pipeline

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'

      - name: Install backend dependencies
        working-directory: ./server
        run: npm ci

      - name: Install frontend dependencies
        working-directory: ./client
        run: npm ci

      - name: Build frontend
        working-directory: ./client
        run: npm run build

      - name: Run backend tests (jika ada)
        working-directory: ./server
        run: npm test || echo "No tests yet"

      - name: Run frontend tests
        working-directory: ./client
        run: npm test -- --watchAll=false || echo "No tests yet"
```

Commit dan push fail ini:

```bash
git add .github/
git commit -m "Add CI/CD workflow"
git push
```

Sekarang, setiap push ke `main` akan menjalankan pipeline. Anda boleh melihatnya di tab **Actions** repositori GitHub.

---

## 🚀 **Langkah 6: Deployment (Pilihan)**

### 6.1 Deploy backend ke [Render](https://render.com) atau [Railway](https://railway.app)
- Buat akaun dan sambungkan repositori GitHub.
- Tetapkan arahan mula: `npm start` (dalam direktori `server`).
- Tetapkan pemboleh ubah persekitaran jika perlu.

### 6.2 Deploy frontend ke [Vercel](https://vercel.com) atau [Netlify](https://netlify.com)
- Import repositori GitHub, tetapkan root direktori ke `client`.
- Pastikan pemboleh ubah `REACT_APP_API_URL` ditetapkan ke URL backend yang telah dideploy.

### 6.3 (Lanjutan) Integrasi deployment dalam GitHub Actions
Anda boleh menambah langkah selepas `build` untuk deploy automatik menggunakan token rahsia (GitHub Secrets).

---

## 📄 **Langkah 7: Dokumentasi dan Lesen**

### 7.1 Edit `README.md` di root projek

```markdown
# codepaul – Full‑Stack React + Node.js + Express

Aplikasi contoh dengan React frontend, Node.js/Express backend, dan CI/CD menggunakan GitHub Actions.

## Teknologi
- React (create‑react‑app)
- Node.js + Express
- GitHub Actions

## Cara menjalankan
1. Klon repositori
2. Pasang dependencies: `cd server && npm install` dan `cd client && npm install`
3. Jalankan backend: `cd server && npm run dev`
4. Jalankan frontend: `cd client && npm start`
5. Buka http://localhost:3000

## CI/CD
Setiap push ke `main` akan menjalankan pipeline GitHub Actions (lihat tab Actions).

## Lesen
MIT
```

### 7.2 Tambah lesen MIT
Buat fail `LICENSE` dan salin teks dari [https://opensource.org/licenses/MIT](https://opensource.org/licenses/MIT). Gantikan tahun dan nama.

---

## 🎁 Bonus: Integrasi SLSA (Jika Diperlukan)

Daripada perbincangan sebelum ini, anda boleh menambah **SLSA Level 3 provenance** menggunakan workflow `generator-generic-ossf-slsa3-publish.yml`. Contohnya, dalam fail workflow yang sama, selepas langkah build, anda boleh panggil reusable workflow tersebut untuk menjana dan menandatangani provenance.

Contoh potongan:

```yaml
provenance:
  needs: build
  uses: slsa-framework/slsa-github-generator/.github/workflows/generator-generic-ossf-slsa3-publish.yml@v1.7.0
  with:
    artifact-path: ./client/build   # laluan ke artifak yang ingin dibuktikan
  permissions:
    id-token: write
    contents: read
    actions: read
```

Ini memerlukan konfigurasi tambahan dan hanya relevan jika anda ingin memenuhi piawaian SLSA.

---

## ✅ **Semua Sedia!**

Kini anda mempunyai:
- Aplikasi React + Node.js/Express yang berfungsi sepenuhnya.
- Repositori GitHub dengan kod sumber.
- Pipeline CI/CD automatik.
- Dokumentasi dan lesen.

Anda boleh mengklon repositori ini di mana‑mana mesin dan mula membangun dengan segera. Jika ada sebarang soalan atau ingin menambah ciri seperti pangkalan data, autentikasi, atau ujian, beritahu saya – saya sedia membantu!

**Selamat membangun, codepaul!** 🚀
---
 Github repo | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 Github repo

diff --git a/Github repo b/Github repo
new file mode 100644
index 00000000..db2b8904
--- /dev/null
+++ b/Github repo	
@@ -0,0 +1,108 @@
+## 🚀 Menyediakan Repositori GitHub untuk Projek **codepaul**
+
+Anda telah membangunkan projek **React + Node.js + Express** dengan struktur seperti di bawah. Sekarang tiba masanya untuk meletakkannya di GitHub.
+
+```
+codepaul/
+├── client/
+├── server/
+├── .github/
+├── .gitignore
+├── README.md
+└── LICENSE
+```
+
+### 📌 Pilihan 1: Buat Repositori Baru di GitHub (melalui laman web)
+
+1. Buka [GitHub](https://github.com) dan log masuk.
+2. Klik butang **+** di sudut kanan atas, pilih **New repository**.
+3. Isi butiran:
+   - **Repository name**: `codepaul` (atau nama pilihan anda, contoh: `my-app`)
+   - **Description**: (optional) "Full-stack React + Node.js + Express with CI/CD"
+   - **Public** atau **Private** (pilih mengikut keperluan)
+   - **Jangan** tandakan "Initialize this repository with a README" (kerana kita sudah ada README tempatan).
+4. Klik **Create repository**.
+
+### 📌 Pilihan 2: Buat Repositori Menggunakan GitHub CLI (jika dipasang)
+
+```bash
+gh repo create codepaul/codepaul --public --source=. --remote=origin --push
+```
+
+(Gantikan `codepaul/codepaul` dengan username/repo anda)
+
+---
+
+## 🔗 Menyambung Repositori Tempatan ke GitHub
+
+Selepas repositori kosong sedia di GitHub, jalankan arahan berikut dalam terminal di direktori root projek anda:
+
+```bash
+# Jika anda belum menambah remote
+git remote add origin https://github.com/codepaul/codepaul.git
+
+# Tukar nama branch utama kepada main (jika masih master)
+git branch -M main
+
+# Push semua commit ke GitHub
+git push -u origin main
+```
+
+> **Nota**: Gantikan `codepaul/codepaul.git` dengan URL repositori anda yang sebenar.
+
+---
+
+## ✅ Semakan
+
+Selepas push, buka repositori di GitHub – anda akan melihat semua folder dan fail, termasuk `.github/workflows/ci-cd.yml`. Setiap kali anda melakukan `git push` ke branch `main`, GitHub Actions akan menjalankan pipeline CI/CD yang telah ditetapkan.
+
+---
+
+## 🔐 Menyediakan Rahsia (Secrets) untuk Deployment (Pilihan)
+
+Jika anda ingin mengaktifkan langkah deploy dalam GitHub Actions (contohnya ke Vercel, Render, dll.), anda perlu menambah **secrets** di repositori GitHub:
+
+1. Buka repositori di GitHub.
+2. Pergi ke **Settings** → **Secrets and variables** → **Actions**.
+3. Klik **New repository secret**.
+4. Tambah nama (contoh: `VERCEL_TOKEN`) dan nilainya (token daripada Vercel).
+5. Dalam fail workflow, gunakan `${{ secrets.VERCEL_TOKEN }}` untuk merujuknya.
+
+---
+
+## 📦 Struktur Fail yang Telah Disediakan
+
+Ringkasan fail utama yang telah anda hasilkan:
+
+- **`client/`** – Frontend React (dengan `App.js`, komponen Hello, dll.)
+- **`server/`** – Backend Express (dengan `server.js`, routes, dll.)
+- **`.github/workflows/ci-cd.yml`** – Pipeline CI/CD
+- **`.gitignore`** – Fail dan direktori yang dikecualikan
+- **`README.md`** – Dokumentasi projek
+- **`LICENSE`** – Lesen MIT
+
+Pastikan semua fail telah di-commit sebelum push:
+
+```bash
+git add .
+git commit -m "Complete full-stack project with CI/CD"
+git push
+```
+
+---
+
+## 🧪 Uji Pipeline
+
+Selepas push, pergi ke tab **Actions** di repositori GitHub anda. Anda akan melihat workflow `CI/CD Pipeline` sedang berjalan. Klik untuk melihat log. Jika semuanya hijau, tahniah – CI/CD anda berfungsi!
+
+---
+
+## 🎯 Seterusnya
+
+- **Kembangkan projek**: Tambah pangkalan data (MongoDB, PostgreSQL), autentikasi, atau ujian.
+- **Deploy sebenar**: Gunakan Render untuk backend dan Vercel untuk frontend.
+- **Sesuaikan domain**: Beli domain dan pautkan ke perkhidmatan hosting.
+
+Jika anda memerlukan bantuan untuk mana-mana langkah di atas (misalnya menulis konfigurasi deployment untuk Render atau Vercel dalam GitHub Actions), beritahu saya – saya akan bantu!
+
+**Selamat membangun!** 🚀