Cerita Gue Bangun Website Portfolio Pakai React & Express

 

🌙 Pembuka — Dari Template ke Karya Sendiri

Beberapa tahun lalu, portfolio gue cuma pakai template HTML gratisan yang gue ubah-ubah warnanya.
Waktu itu gue belum ngerti React, apalagi backend kayak Express. Tapi makin lama gue pengen punya portfolio yang bener-bener gue banget — interaktif, cepat, dan bisa update konten otomatis tanpa harus edit file HTML tiap kali.

Akhirnya gue nekat:

“Oke, gue bakal bikin website portfolio dari nol pakai React buat frontend dan Express.js buat backend.”

Tantangan? Banyak banget. Tapi dari proyek inilah gue bener-bener belajar gimana ngebangun website modern secara utuh — dari desain, frontend, backend, sampai deploy-nya 🔥

---

💻 Isi — Dari Setup ke Showcase

⚙️ 1. Setup Awal: React di Depan, Express di Belakang

Gue mulai bikin dua folder:

/portfolio
 ┣ /client   ← React
 ┗ /server   ← Express

Di folder client, gue pakai create-react-app (waktu itu belum pindah ke Vite 😅).
Lalu di server, gue setup Express sederhana buat handle API:

const express = require("express");
const app = express();
const PORT = 4000;

app.get("/api/projects", (req, res) => {
  res.json([{ name: "My Web App", tech: "React, Node.js" }]);
});

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

Frontend React gue fetch data dari API ini, dan hasilnya langsung tampil di halaman portfolio.
Itu rasanya keren banget waktu pertama kali berhasil muncul:

“Wah, gue baru bikin website fullstack gue sendiri 😎.”

---

🎨 2. Desain Frontend: Interaktif Tapi Ringan

Gue pengen portfolio gue gak cuma bagus dilihat, tapi juga cepat dan clean.
Jadi gue pakai kombinasi:

• 🎨 Tailwind CSS buat styling cepat

• 💡 Framer Motion buat animasi halus

• ⚡ React Router buat navigasi tanpa reload

Salah satu bagian yang paling gue banggakan adalah section project grid.
Gue buat tampilannya interaktif: pas hover, card project-nya naik dikit dan muncul shadow halus.

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  {projects.map((p, i) => (
    <motion.div key={i} whileHover={{ scale: 1.05 }}>
      <div className="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-md">
        <h3 className="text-lg font-bold">{p.name}</h3>
        <p className="text-sm text-gray-500">{p.tech}</p>
      </div>
    </motion.div>
  ))}
</div>

Tiap project bisa diubah lewat backend Express, jadi kalau gue nambah project baru, React-nya otomatis nampilin data baru — gak perlu edit manual lagi.

---

🔐 3. Backend Express: Sederhana Tapi Efisien

Di sisi server, gue mulai tambahin beberapa fitur:

• Endpoint untuk list project, detail project, dan form kontak

• Middleware CORS biar React bisa akses API

• dan sedikit Express-validator buat validasi input dari form

Contohnya:

app.post("/api/contact", (req, res) => {
  const { name, message } = req.body;
  if (!name || !message) return res.status(400).json({ error: "Data tidak lengkap" });
  console.log(`Pesan dari ${name}: ${message}`);
  res.json({ success: true });
});

Jadi kalau ada yang isi form “Hubungi Saya” di portfolio gue, pesannya langsung masuk ke log server.
Rencananya nanti gue sambungin ke database MongoDB biar bisa simpan pesan permanen.

---

🚀 4. Deploy: Dari Lokal ke Online

Setelah semuanya jalan lokal, gue deploy frontend React ke Vercel, dan backend Express ke Render (karena gratis & cepat).
Triknya adalah pastiin React fetch dari URL API yang sesuai environment-nya.

const API_URL = process.env.NODE_ENV === "production"
  ? "https://server-portfolio.onrender.com"
  : "http://localhost:4000";

Setelah itu gue test lewat HP — dan hasilnya, website-nya cepat banget, bahkan di koneksi 3G 🌀
Rasanya puas banget waktu liat karya sendiri bisa diakses dari mana aja.

---

💬 Penutup — Portfolio Itu Lebih dari Sekadar Tampilan

Dari proyek ini, gue belajar kalau portfolio bukan cuma tempat pamer karya.
Tapi juga representasi cara lo berpikir sebagai developer.
React ngajarin gue gimana bikin UI modular dan efisien.
Express ngajarin gue gimana bikin server cepat dan terstruktur.

Dan yang paling penting: gue jadi ngerti nilai dari control penuh atas kode sendiri.
Gak tergantung template, gak tergantung plugin.
Semuanya hasil dari logika dan usaha gue sendiri 💪

Sekarang setiap kali buka portfolio gue, gue selalu inget malam-malam begadang debugging API, atau error CORS yang bikin frustrasi tapi akhirnya terpecahkan jam 3 pagi 😅

---

✨ Kesimpulan: Tips Buat Lo yang Mau Bikin Portfolio Fullstack

• Mulai dari kecil. Bikin fitur dasar dulu, kayak halaman About & Projects.

• Gunakan React buat UI dinamis, dan Express buat backend fleksibel.

• Pisahkan frontend & backend biar gampang di-deploy.

• Jangan buru-buru ke database — data statis dulu juga gak masalah.

• Pamerin bukan cuma hasilnya, tapi juga proses lo ngebangunnya.

---

🚀 CTA Penutup

Mau portfolio lo tampil beda dari template pasaran?
Coba deh bangun sendiri pakai React + Express. Capek di awal, tapi puas banget hasilnya! 😎