Halo gua Faisal dari ethjkt, selamat datang di fullstack web3 dev roadmap ETH JKT. repo ini gua buat untuk resources pemula yang mau zero to hero untuk menjadi web3 developer. setelah gua speak di eth jkt intro, ini adalah lanjutan journey kalian untuk belajar semua materi blockchain development. ini akan menjadi journey yang sangat panjang, karna repo ini fokus mulai dari fundamental yang kuat dan dibuat se detail mungkin agar kalian menjadi web3 developer yang baik. Bisa dibilang ini kuliah online dengan eth jkt haha.
RPN adalah resource belajar web2 development buatan gua sendiri, jadi gue akan senang sekali jika kalian belajar pake resource ini karena ini gratis dan materi materi nya persis gua design seperti apa yang gua pelajarin pas gua awal awal jadi pemula.
Full-stack Web3 Developer adalah developer yang mampu membangun aplikasi terdesentralisasi (DApp) secara menyeluruh, mulai dari frontend hingga smart contract blockchain.
Mari kita breakdown komponen-komponennya:
"Full-stack" artinya:
- Menguasai development Frontend (UI)
- Menguasai development Backend (server logic)
- Mampu mengintegrasikan keduanya
"Web3" menambahkan kemampuan:
- Development Smart Contract
- Integrasi dengan blockchain
- Pengelolaan data terdesentralisasi
Tanggung Jawab Utama:
- Membuat UI yang interaktif
- Membuat dan men-deploy smart contract
- Mengintegrasikan wallet crypto (seperti MetaMask)
- Mengelola transaksi blockchain
- Mengimplementasikan fitur DeFi, NFT, atau DAO
- Menjaga keamanan aplikasi
Perbedaan dengan Web2 Developer Tradisional:
Web2 (Tradisional):
- Data terpusat di server
- Menggunakan database tradisional
- Autentikasi dengan username/password
- Pembayaran melalui gateway tradisional
Web3:
- Data terdesentralisasi di blockchain
- Menggunakan smart contract
- Autentikasi dengan crypto wallet
- Transaksi menggunakan cryptocurrency
Tools dan Teknologi yang Digunakan:
Frontend:
- React/Vue/Angular
- Web3.js/Ethers.js
- MetaMask integration
Smart Contract:
- Solidity
- Hardhat/Truffle
- IPFS
Backend:
- Node.js
- Web3 libraries
- Blockchain nodes
Contoh Aplikasi yang Dibuat:
- DEX (Decentralized Exchange)
- NFT Marketplace
- DeFi lending platform
- DAO governance systems
- Play-to-earn games
Keuntungan Menjadi Web3 Developer:
- Permintaan tinggi di industri
- Gaji kompetitif
- Bekerja dengan teknologi cutting-edge
- Berkontribusi pada masa depan internet
- Komunitas yang aktif dan mendukung
Tantangan yang Dihadapi:
- Teknologi yang berkembang cepat
- Kompleksitas keamanan tinggi
- Perlu memahami ekonomi token
- Testing yang lebih kompleks
- Gas optimization
Peluang Karir:
- Web3 Developer
- Smart Contract Engineer
- Web3 Solutions Architect
- DeFi Protocol Developer
- Blockchain Consultant
- Blockchain Protocol Developer
Kita langsung saja mulai di phase 0, phase dimana kalian belajar fundamental dari programming, web apps, dan nyicil belajar teori blockchain. Di journey gua ini, kita pake bahasa javascript untuk handle fullstack (front end & backend). alasannya karna javascript ini bahasa paling flexible. Dia bisa membuat (front end & backend) dengan 1 bahasa yang sama. Ini akan mempercepat learning curve kalian dari pada kalian harus belajar bahasa pemrograman yang lain.
*Untuk yang NON IT, dan pertama kali menyentuh programming atau orang" yang belum mengerti dasar komputer silahkan belajar dasar dasar IT
📚Resources (NON IT INTRO) :
- Introduction to Programming and Computer Science - FreeCodeCamp
- 100+ Computer Science Concepts Explained - FireShip
Untuk orang" yang sudah mengerti konsep IT dan dasar komputer bisa lanjut untuk roadmap phase 0 foundation nya.
Foundation ini terbagi menjadi 4 part, part terakhir untuk "Blockchain Foundation" dan bisa dicicil selagi kalian menjalani roadmapnya.
- Set Up Node.js
- Integrated Development Environment (IDE) ( VS Code, VIM, IntelJ )
- NPM
- Github
- Command line basics
📚Resources (Basic Tools) :
- node js installation - geeksforgeeks
- TOP 10 IDE
- Git Tutorial
- Git Tutorial - PetaniKode
- List command line
- Algorithm & Pseudocode
- Variable
- Conditional Statements
- Looping
- Function
- Basic Data Structures (Array, Object)
📚Resources (Javascript Foundation) :
- Javascript list course sandhika galih
- w3schools
- Javascript Full Course - freeCodeCamp
- Javascript Tutorial - PetaniKode
- Gitbook javascript
- RPN Phase 0 JS Syntax
- 18 repos for learning JS
Selama belajar javascript syntax ini, kalian wajib ngelatih skill logic di competitive programming. Gua waktu awal" belajar suka pake codewars buat ngelatih logic nya.
code wars: https://www.codewars.com/
Asah level logic kalian sampe bisa menyelesaikan kyu 6/5 di codewars, ini akan membantu banget untuk pemahaman data flow, syntax dan algoritma yang kalian pakai untuk solving problem.
- HTML
- CSS
- Javascript (DOM, AJAX)
- API Theory
- Build first static website
📚Resources (Web2 Basics Development) :
Distage ini kalian mulai belajar membuat UI di website, HTML & CSS adalah makananan kalian sehari hari. Utamakan pelajarin konsepnya daripada mempercantik website saja. karna masalah bagus" an UI itu masuknya di phase 2 nanti front end advance. di stage ini fokus kalian untuk pengenalan cara website bekerja di web2.
- Blockchain architecture
- Consensus mechanisms
- Public vs private blockchains
- Cryptographic primitives
- Digital signatures & hashing
📚Resources (Blockchain Theory) :
-
Whiteboard Crypto White board crypto ini berguna banget buat pemula, video yang dia buat sangat interaktif dan mudah dimengerti. kalian bisa langsung tulis aja keyword blockchain yang kalian mau pelajari seperti ini :
"Whiteboard Crypto What is Blockchain" -> https://www.youtube.com/watch?v=kHybf1aC-jE&t=1s
-
Blockchain Knowledge - BlockDevID -> Newbie friendly dan berbahasa indonesia, salah satu komunitas web3 dev terbesar di indo.
Blockchain theory ini panjang sekali belajarnya. jadi boleh kalian cicil selama phase 0 sampe phase 2. Ini kalian bisa pelajari pelan pelan dan coba praktek kecil kecilan. praktek paling simple adalah mencoba untuk mebuat wallet di web3, swap token di berbagai DApp, interact ke beberapa smartcontract. Jika kalian trader yang sudah paham flow exchange dan DEX harusnya teori kalian dalam blockchain sudah lumayan kuat. Tinggal pelajari gimana mekanisme network blockchain bekerja saja dan Cryptographic hash nya.
Sering sering membaca transaction hash juga habbit yang bagus, karna ketika menjadi web3 dev kalian akan sering untuk manage Tx hash. kalian bisa build habbit nya dari sekarang pas awal" membuat pondasi pemrograman.
Ini adalah target" yang harus kalian capai di phase foundation, parameter inilah yang membuktikan kalo kalian pantas untuk melanjutkan phase selanjutnya.
- JS Codewars, Kyu 5/6
- Github Commits, Collaboration, and resolving conflicts
- Web2 apps using DOM
- Pehamahan Blockchain
Backend Aplikasi Terdesentralisasi sangat berbeda dari backend aplikasi “standar”, dimulai dari fakta bahwa teknologi Blockchain digunakan sebagai sumber utama penyimpanan data terdesentralisasi, sedangkan backend standar biasanya menggunakan Basis Data atau Penyimpanan Objek.
Namun, sebagian besar prinsip teknis tetap sama, dan tidak disarankan untuk langsung terjun ke pengembangan blockchain dan web3.0 tanpa landasan yang kuat dari prinsip utama pengembangan web2 standar.
- Clean Code Introduction
- Time Complexity
- Next level algorithm (Searching Algo, Sorting Algo, Djakstra, Hashing)
- OOP Konsep
- Linux Command Line
📚Resources (Enhance Logic) :
Pada pengembangan backend , logika pemrograman adalah segalanya. karena modul modul API ini berkatian dengan business flow dari project yang kita buat. Materi" Enhance logic ini jarang dibahas di bootcamp manapun, sering sekali course course online diluar melewati step ini. padahal fundamental seperti ini sangat berpengaruh dalam pembuatan server backend.
- RESTful APIs
- Express.js/Node.js
- Database management (MongoDB/PostgreSQL)
- API authentication & security
- Backend testing
📚Resources (Backend API) :
- RPN Phase 1
- Rest API in nodejs
- Node js beginner - fireship
- Node js & Express Crash Course - FreeCodeCamp
Di Stage ini kalian akan belajar Memasak berbagai hidangan yang akan kalian sajikan kepada para tamu nantinya. layaknya seperti seorang koki yang menyiapkan masakan dan meja makan untuk menghidangkan makanan, kalian para back end akan menyiapkan bermacam function dan data untuk diberikan kepada front end dan front end akan mem-visualisasikan data tersebut kedalam web. di sinilah kalian akan mempelajari bumbu-bumbu masakan tersebut untuk menciptakan hindangan yang lezat sebagai seorang backend seperti API, database, advance algorithm, Authentication & Authorization, dan lainnya.
- Understanding Cloud Services
- Types of cloud services (IaaS, PaaS, SaaS)
- Deploy Backend Services
- CI/CD
📚Resources (Cloud Deployment) :
- What is Cloud Computing -Aws
- Cloud Computing Full Course
- Deploy Backend Node To Vercel - geeksForGeeks
- Node js & Express Crash Course - FreeCodeCamp
Cloud services stage terakhir diphase backend development, disini kalian akan belajar cara deploy API service kalian sampai bisa di konsum secara public/private dari forntend. Stage ini mungkin sangat membingunkan buat kalian, karena ada banyak banget service" cloud yang bisa dipakai di dunia IT. Benefitnya juga ada banyak berbagai macam jadi kalian harus cari mana yang cocok dan sesuai kebutuhan project kalian.
ini tips dari gua untuk learn cloud deployment dan menghindari yang namanya "tutorial hell"
Mulailah dari yang Kecil:
- Mulailah dengan deploy situs web statis
- Tambahkan kompleksitas secara bertahap
- Berlatihlah secara teratur dengan proyek-proyek kecil
Jalur Fokus:
- Kuasai satu cloud service terlebih dahulu (disarankan AWS)
- Pelajari fitur fitur cloud secara menyeluruh
- Bangun practical project
Jebakan Umum yang Harus Dihindari:
- Jangan mencoba mempelajari semuanya sekaligus
- Fokus pada pemahaman daripada menghafal
- Selalu pertimbangkan dasar-dasar security
Ketika kalian sudah menyelesaikan phase 1, harusnya kalian sudah bisa bekerja sebagai backend developer di web2. inilah milestone yang akan tercapai jika kalian finish phase 1 secara menyeluruh :
- Mastering Algorithm (Bisa Selesaikan LeetCode Medium problems)
- Design Database (know business logic pattern, ERD, pre development)
- Backend Development (REST API)
- Deploy Backend Services
Di phase 2 ini kalian akan banyak belajar "sihir", sama seperti kalian menggunakan item-item dari pocket Doraemon. Semakin kalian banyak belajar item tersebut, semakin seru. Karena di front end ini dunia visual, belajar nya bakal lebih semangat karena hasil codingan kalian terlihat di layar. Item-item Doraemon ini sama saja seperti library-library front end yang kita pelajari, karena ada banyak sekali kombinasi framework + library di development front end.
- React.js
- Props & State
- UseEffect
- State management (Redux/Context API)
- CSS Library/Framework (TailwindCSS, MaterialUI, etc)
- Frontend testing (Jest, React Testing Library)
- Backend API Integration (Fetch, Axios, dll)
📚Resources (Front End Development) :
- RPN Phase 2 : Reactjs
- ReactJs Crash Course - TraversyMedia
- Belajar TailwindCSS - WPU
- Redux - FireShip
Di stage ini sudah saatnya kalian gabungkan Service Backend API dengan Front end untuk membuat 1 aplikasi fullstack utuh, kalian bisa merasakan flow engineering pada web2 dan cara kerja Web Apps sepenuhnya.
- Vite Bundler
- Advance React Hooks (useMemo, useCallback, useContext, useForm)
- NextJS Framework
- Pre-rendering and Data Fetching (SSG, SSR)
- Dynamic Routes
- Tanstack
- Realtime Data (Websockets)
📚Resources (Front End Advance) :
- RPN Phase 2 : Advanced React Concept
- Next JS Learn
- WebSockets Learn
- 10 React Hook Explained - FireShip
Ketika kalian sudah ketemu dengan mid scale app, atau aplikasi yang lumayan besar. Maka akan sangat susah sekali untuk memanage komponen" react ini. Deliver datanya akan semakin sulit, rerendering semakin slow karena proses useEffect dimana mana, bahkan props yang terlalu banyak untuk dihandle karna komponen tree nya sudah sangat luas.
Di stage inilah kalian akan belajar konsep advance frontend dimana kalian akan improve speed cara kerja komponen react dalam development website. Bagaimana cara mengatur props dan state yang banyak, bagaimana kita mengatur suatu unique hooks untuk beberapa case, dan masalah malah latency speed dalam pemrosesan komponen react ke dalam website. Kalian akan belajar menggunakan vite, dimana tools ini akan membungkus react project kalian dan menggunakan rollup modul dengan HMR vite agar pengaturan modul" yang ada react jadi ringan. Kalian juga akan belajar Core hooks (useRef, useContext, useCallback, useMemo) untuk menghandle case yang sulit, dan Advance React Concepts seperti (rendering logic, reusable hooks, patterns, composition to avoid prop drilling).
Di Phase 2 ini akan sangat dinilai banget performance website react kalian, kalian dituntut untuk develop website react secara professional dimana data handling nya rapih dan komponen react reusable dan efektif di setiap case unique. tidak ada lagi membuat state banyak dan onChange banyak untuk handling form, tidak ada lagi useEffect sana sini untuk mengatur pengolahan data dari API. hal hal seperti itulah yang harus kita hindari di week3 ini.
- Web3.js/Ethers.js
- Wallet Introduction
- MetaMask integration
- Simple Dapp
- Reading SmartContract
📚Resources (Web3 Integration) :
Stage terakhir dari phase 2 adalah Web3 Integration, dimana perjalanan web3 kalian mulai dari sini. skill fullstack web2 kalian akan dikombinasikan dengan integrasi tools web3. Basic ini yang akan jadi penghubung kalian di next phase untuk belajar blockchain development sepenuhnya. Jadi fokus untuk develop fundamental Web3 dan cobain fitur fitur dari web3 js dan ethers.
Di phase 2 harusnya kalian sudah bisa bekerja sebagai Fullstack developer di web2. dan bisa sedikit" untuk integrasi aplikasi simple Dapp. inilah milestone yang akan tercapai jika kalian finish phase 2 secara menyeluruh :
- Fulstack Development (Handle both front end and backend)
- Advance Hooks and NextJS
- Web3 Integration (Simple Dapp and web3 libraries)
- Fullstack work experience (WAJIB)
Jadi sebelum kalian memasuki phase 3, syarat utamanya adalah kalian harus mencari pengalaman kerja real sebagai Programmer. Dengan selesai nya phase 2, kalian harus rapihkan semua portofolio dan membuat profile (CV) untuk melamar pekerjaan di web2 company. Kalian bebas mau melamar apa saja, bisa backend developer, front end developer atau Fullstack developer.
Setelah kalian mendapatkan kerja sebagai developer di web2 company, Kalian akan tetap terus belajar web3 development dan melanjutkan perjalanan kalian ke phase 3. Ambil pengalaman sekitar 2-3 tahun Tegantung berapa lama kalian belajar web3.
jadi sambil kerja kalian sambil belajar tentang web3. Ketika phase 3 sudah selesai atau kalian merasa sudah siap menjadi web3 developer, kalian bisa melepas web2 job kalian dan mencoba melamar Web3 developer ketika serasa sudah siap dengan skillnya.
Inilah Phase yang kalian tunggu", Phase terakhir dari kuliah web3 kalian. Di phase ini kita akan belajar lebih dalam tools" web3 dan Smart Contractnya. disini juga kalian akan membuat aplikasi web3 yang complex menggunakan ERC standard dan libraries up to date.
- Data types & variables
- Functions & modifiers
- Contract inheritance
- Events & logs
- Gas optimization
Tools:
- Hardhat/Truffle
- Ganache (optional)
- OpenZeppelin
- Remix IDE (Tools Newbie Friendly) : https://remix.ethereum.org/
- Web3 libraries (Wagmi, Viem, Moralis API)
📚Resources (SmartContract Development) :
Tentu saja, mengetahui apa itu Smart Contract saja tidak cukup. Sebagai Developer Web3.0 atau Blockchain, Kalian harus tahu cara menulis Smart Contract Kalian sendiri dan menggunakannya untuk mendukung Aplikasi Terdesentralisasi Kalian sendiri. Di sinilah Solidity hadir untuk membantu.
Solidity adalah bahasa pemrograman berorientasi kontrak tingkat tinggi untuk menulis Smart Contract yang memungkinkan programmer menulis kode yang dapat dieksekusi sendiri yang mendukung DApps blockchain.
Frontend Integration:
- Web3 wallet integration
- Transaction management
- Event listening
- Error handling
- UX best practices
Backend Services:
- IPFS integration
- TheGraph
- Oracles (Chainlink)
- Subgraphs
- Off-chain data management
- ThirdWeb
Smart Contract Patterns:
- ERC standards (20, 721, 1155)
- Upgradeable contracts
- Access control
- Gas optimization patterns
- Design patterns
📚Resources (Dapp Development) :
Ini akan jadi learning curve yang panjang banget, sekali lagi gua tekenin explore dan dalemin 1 konsep terlebih dahulu baru belajar konsep yang lain. jangan belajar semua konsep berbarengan. Kalian wajib mulai menyicil untuk membuat portofolio web3, ini list ide porto yang kalian bisa buat
Basic DApp
- Simple smart contract
- Web3 wallet integration
- Basic transactions
NFT Marketplace
- ERC721/1155 implementation
- Marketplace functionality
- IPFS integration
DeFi Application
- Token swapping
- Liquidity provision
- Yield farming mechanics
DAO Platform
- Governance tokens
- Voting mechanism
- Treasury management
*SOON kita akan buat workshop dan ngoding bareng untuk membuat semua list porto ini.
Di stage ini kalian sudah bisa bekerja sebagai fullstack web3 Developer, jenjang selanjutnya adalah belajar terus menerus tanpa henti. karna kalian masih ketinggalan dengan topic" baru di web3. kalian harus mengejar technology yang hype sekarang dan advance topic baru di web3.
Layer 2 Solutions
- Rollups (Optimistic/ZK)
- State channels
- Sidechains
- Plasma
DeFi Concepts
- AMMs
- Lending protocols
- Yield farming
- Flash loans
- Governance mechanisms
Infrastructure
- Node management
- RPC providers
- ENS integration
- IPFS/Filecoin
- Multi-chain development
- L1sload Precompile
dan jangan lupa start networking dan show skill kalian ke web3 community :
- Follow Web3 blogs & newsletters
- Join Discord communities
- Participate in hackathons
- Contribute to open source
- Stay updated with EIPs