Membangun Platform Trading Kripto Futuristik sebagai Portfolio Web Developer
Proyek ini merupakan antarmuka platform trading kripto berbasis web yang dirancang sebagai portfolio UI/UX dan demonstrasi integrasi API real-time. Website ini bukan platform trading nyata, melainkan showcase desain modern, interaktivitas, animasi, serta visualisasi data yang profesional.
Tujuan utama proyek ini adalah menunjukkan kemampuan dalam:
Mendesain UI modern berbasis Tailwind CSS
Mengelola tema Dark/Light secara dinamis
Mengintegrasikan API publik (CoinGecko)
Menampilkan data dalam bentuk grafik interaktif (Chart.js)
Membangun pengalaman pengguna yang imersif dengan animasi dan efek visual
Konsep Desain: Futuristik, Glassmorphism, dan Neon UI
Tampilan website mengusung konsep visual yang kuat dan modern, meliputi:
Glassmorphism:
Efek transparansi dengan blur menggunakan backdrop-filter, memberikan kesan “kaca buram” yang elegan pada kartu, panel, dan navigasi.
Neon Glow UI:
Teks dan elemen utama memiliki efek cahaya (glow) untuk menonjolkan brand dan kesan futuristik.
Animated Background & Grid System:
Latar belakang memiliki animasi lembut serta pola grid yang menambah kedalaman visual.
Responsive Design:
Layout dioptimalkan untuk desktop, tablet, dan mobile menggunakan Tailwind CSS.
Semua styling utama dibangun dengan Tailwind CSS (CDN), dikombinasikan dengan CSS custom untuk efek visual lanjutan seperti:
gradient borders
hover lift effect
custom scrollbar
shimmer loading animation
animated floating icons
Sistem Tema: Dark Mode sebagai Default
Website menggunakan sistem Dark/Light Mode berbasis atribut data-theme pada tag <html>.
Default tema diatur oleh baris berikut di JavaScript:
const currentTheme = localStorage.getItem('theme') || 'dark';
Artinya:
Jika pengguna belum pernah mengganti tema, website otomatis memakai dark mode
Jika sudah pernah mengganti tema, preferensi disimpan di localStorage dan dipakai kembali saat halaman dimuat ulang
Perubahan tema dilakukan dengan event listener:
themeToggle.addEventListener('click', function() { const newTheme = htmlElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; htmlElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); });
Di sisi CSS, warna dikelola menggunakan CSS variables:
:root { --bg-primary: #050810; --text-primary: #e0e6ed; } [data-theme="light"] { --bg-primary: #f0f4f8; --text-primary: #1a1f2e; }
Pendekatan ini membuat seluruh tampilan bisa berubah hanya dengan mengganti nilai data-theme.
Visualisasi Data dengan Chart.js
Website menampilkan beberapa jenis grafik untuk mensimulasikan dashboard trading profesional.
1. Assets Distribution (Doughnut Chart)
Menampilkan distribusi portfolio dalam bentuk grafik donat (doughnut chart). Data bersifat dummy (statis) sebagai ilustrasi:
const portfolioChart = new Chart(portfolioCtx, { type: 'doughnut', data: { labels: ['Bitcoin', 'Ethereum', 'Binance Coin'], datasets: [{ data: [35, 25, 15] }] } });
Fungsi utama grafik ini adalah menunjukkan bagaimana tampilan portfolio bisa divisualisasikan secara profesional.
2. Trading Chart (Line Chart) — Data Real-Time
Bagian ini adalah inti dari integrasi API. Data harga diambil dari CoinGecko API:
const chartUrl = `${COINGECKO_API}/coins/${coinId}/market_chart?vs_currency=usd&days=7`;
Data kemudian dipetakan ke grafik garis interaktif dengan:
tooltip custom
animasi smooth
efek hover pada titik data
tampilan responsif
Ini menunjukkan kemampuan mengolah data eksternal dan memvisualisasikannya dengan Chart.js.
3. Trend & Volume Chart (Analytics Section)
Terdapat dua grafik tambahan di bagian Analytics:
Market Trend (Line Chart)
Trading Volume (Bar Chart)
Keduanya menggunakan data simulasi untuk meniru dashboard analitik tingkat profesional.
Live Crypto Prices (Integrasi API Real-Time)
Bagian “Live Trading” menampilkan harga kripto secara real-time dari CoinGecko API:
const url = `${COINGECKO_API}/coins/markets?vs_currency=usd&ids=bitcoin,ethereum`;
Informasi yang ditampilkan meliputi:
Harga saat ini
Persentase perubahan 24 jam
Volume perdagangan
Mini sparkline chart untuk setiap koin
Setiap kartu koin bisa diklik untuk memperbarui grafik utama di bagian Trading Chart.
CORS Handling (Bagian Penting dalam Pengembangan)
Awalnya proyek ini menggunakan proxy:
const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/';
Namun layanan tersebut sudah dibatasi, sehingga diperbarui menjadi:
const CORS_PROXY = 'https://cors-anywhere.com/';
Solusi ini cukup untuk development/portfolio, tetapi tidak direkomendasikan untuk production.
Solusi yang lebih profesional (disarankan):
Buat proxy sendiri di server, misalnya proxy.php:
<?php header("Access-Control-Allow-Origin: *"); echo file_get_contents($_GET['url']);
Lalu di JavaScript:
const CORS_PROXY = 'https://domainkamu.com/proxy.php?url=';
Pendekatan ini lebih stabil, aman, dan tidak bergantung pada layanan pihak ketiga.
Teknologi yang Digunakan
- HTML5
- Tailwind CSS (CDN)
- Vanilla JavaScript
- Chart.js
- Font Awesome
- CoinGecko API
Fitur Utama
- Dark/Light Mode dengan penyimpanan preferensi di localStorage
- Glassmorphism & Neon UI
- Animated Background & Smooth Scroll
- Live Crypto Prices (Real-Time)
- Interactive Trading Chart
- Portfolio Distribution (Doughnut Chart)
- Market Trend & Volume Analysis
- Intersection Observer Animations (animasi saat scroll)
Cara Menjalankan Proyek
- Download atau clone repository
- Buka file index.html di browser
- Pastikan koneksi internet aktif (untuk API CoinGecko)
Status Proyek
✅ UI/UX: Selesai
✅ Integrasi API: Selesai
⚠️ Backend: Tidak ada (hanya frontend + proxy)
⚠️ Trading Engine: Tidak ada (hanya simulasi tampilan)
Kesimpulan
Website ini sangat cocok sebagai:
- Portfolio frontend developer
- Showcase UI/UX modern
- Studi kasus integrasi API publik
- Demonstrasi penggunaan Chart.js
- Contoh implementasi Dark/Light Mode profesional
Disclaimer:
Website ini dibuat hanya untuk keperluan portfolio dan demonstrasi, bukan platform trading resmi atau produk komersial.