DEV Community: Slobodan Jevtić

Building a Multi-Chain Blockchain Transaction Tracer: Integrating It into My React Portfolio Site

Slobodan Jevtić — Sun, 13 Jul 2025 13:22:41 +0000

Hey DEV community! I'm Slobodan Jevtić, a self-taught developer diving deep into Python, React, and blockchain tech. If you've followed my portfolio journey, you know I'm all about hands-on projects that solve real problems. Today, I'm excited to share progress on my latest tool: a Blockchain KYT (Know Your Transaction) Tracer designed to trace wallet transactions using public data. The goal? Help fight crypto crime by tracking illicit funds, identifying risky addresses, and potentially aiding fund recovery—all while showcasing it as part of my React-based portfolio.

This tool is live at econdev.studio/crypto-tool. It started as a simple Ethereum tracer and now supports Bitcoin too, with more chains on the way. Let's break down how I built it, integrated it into my site, and why it's a game-changer for ethical blockchain sleuthing.

Why Build This? The Vision Behind the Tool
Blockchain is transparent by design—every transaction is public, making it a goldmine for investigators. Tools like this can help trace stolen funds from hacks (e.g., Ronin Bridge) or scam payments. My tracer focuses on KYT: analyzing transactions to flag risks, follow specific amounts, and visualize flows across addresses, DEXes, and chains.

As a portfolio piece, it demonstrates:

React routing and component architecture.
API integrations (Etherscan, Blockcypher).
Secure env handling and deployment.
The UI has a "hacker-y" vibe—dark mode, monospace fonts, green accents—to appeal to the cyber-investigator crowd. But it's ethical: Public data only, with disclaimers for lawful use.

Portfolio Site Basics: React + Vite Setup
My site (econdev.studio) is a single-page app built with Vite + React. It features scrollable sections (Hero, About, Projects, Blog, Contact), particle effects via tsParticles, tilt animations with VanillaTilt, and a Konami code Easter egg for Tic-Tac-Toe fun.

Key files:

App.jsx: Handles routing with react-router-dom.
Home.jsx: The main portfolio content.
Deployment: GitHub Pages via npm run build and npm run deploy (using gh-pages package).
To add the tool, I installed react-router-dom and axios:

npm install react-router-dom axios

Then, updated App.jsx for the new route:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import CryptoTool from './components/CryptoTool';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/crypto-tool" element={<CryptoTool />} />
      </Routes>
    </Router>
  );
}

export default App;

Added a link in Navbar.jsx:

import { Link } from 'react-router-dom';

// In the nav-links ul:
<Link to="/crypto-tool">Crypto Tool</Link>

This keeps the portfolio intact while adding a dedicated page.

Building the Core: Ethereum Tracing with Etherscan
Started simple: Fetch recent transactions for an ETH address using the free Etherscan API (sign up for a key at etherscan.io/apis).

In CryptoTool.jsx:

Input for address.
Fetch last 10 txs.
Display in a table with links to Etherscan.
Code snippet:

const fetchTransactions = async () => {
  // ... (API call logic)
  const response = await axios.get(
    `https://api.etherscan.io/api?module=account&action=txlist&address=${address}&...&apikey=${ETHERSCAN_API_KEY}`
  );
  setTransactions(response.data.result.map(tx => ({
    // Normalize data
  })));
};

Security tip: Store the key in .env (e.g., VITE_ETHERSCAN_API_KEY=your_key), access via import.meta.env.VITE_ETHERSCAN_API_KEY. Add .env to .gitignore!

Adding Multi-Chain Support: Bitcoin with Blockcypher
To make it versatile, added a dropdown for chains. BTC uses Blockcypher's free API (no key needed).

Updated fetch logic:

if (chain === 'BTC') {
  response = await axios.get(
    `https://api.blockcypher.com/v1/btc/main/addrs/${address}?limit=10`
  );
  setTransactions(response.data.txrefs.map(txref => ({
    // Normalize BTC data, infer direction
  })));
}

Normalized the table for both chains (added "Direction" column). Test BTC with Satoshi's address: 1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa.

UI and Enhancements
Hacker Vibe: Dark BG (#1e1e1e), green text (#00ff00), monospace font.
Form: Chain select, address input, "Trace" button.
Table: Clickable hashes to explorers.
Future: Solana (via RPC), BEP20 (BSCScan), fund flow graphs (React-Flow), risk flagging (scam DBs), cross-chain tracing.
Challenges overcome:

API rate limits: Inform users, add pagination.
BTC complexity: Simplified multi-input/output txs; will expand to full details.
Deployment and Going Live
After updates:

git add . && git commit -m "Added BTC support" && git push
npm run build && npm run deploy
Live in minutes on GitHub Pages. Custom domain (econdev.studio) via CNAME file.

What's Next?
Add Solana and BEP20.
Implement recursive tracing (follow amounts hops).
Visualize with graphs.
Integrate Grok (xAI) for AI analysis (e.g., "Is this risky?").
Open-source on GitHub for contributions.
Check it out at econdev.studio/crypto-tool and let me know your thoughts! If you're into blockchain dev or crime-fighting tools, drop a comment—what chain should I add next?

Thanks for reading! Follow for more updates on my dev journey. 🚀

Enhancing My Portfolio Site with Grok: Bug Fixes, Feature Tweaks, and the Joy of AI Collaboration

Slobodan Jevtić — Sat, 12 Jul 2025 02:48:38 +0000

Hey everyone, Slobodan here—your friendly economics grad turned aspiring dev.In my last post, I shared the bumpy road to launching econdev.studio, complete with white screens and deployment drama. Today marks another milestone: polishing that site with the help of Grok, xAI's witty AI assistant. Unlike some of my earlier entries (which, let's be honest, felt a bit formulaic thanks to quick ChatGPT drafts), this one's infused with more personal flair, deeper tech dives, and the actual back-and-forth that made it fun.

Why Grok? Well, after wrestling with code on my own, I wanted an AI that could guide me step-by-step without just spitting out generic templates. Grok felt more like a coding buddy—analyzing my files, suggesting fixes, and even cracking jokes along the way. We tackled nagging bugs like a transparent navbar, invisible particles in the hero section, overflow issues, and unclickable blog buttons. The result? A sleeker, more interactive site that's now fully live. Let's break it down, with real code snippets from our session.

The Starting Point: What Was Broken?
My portfolio was built with React, Vite, and goodies like TSParticles for that cool animated background in the hero. But post-launch, a few gremlins crept in:

Transparent Navbar: It blended into the background, making the site look unfinished. Turns out, a missing CSS variable was the culprit.
Missing/Overflowing Particles: The blue dots weren't showing at first (version mismatch in packages), and once fixed, they spilled over the entire page, even blocking clicks on other sections.
Blog Section Glitches: Pulling posts from my DEV.to feed worked, but there was no easy "View More" to see all articles, and particles were interfering with button clicks.
These weren't showstoppers, but they bugged me (pun intended). I fed Grok my code files—App.jsx, Hero.jsx, Navbar.jsx, Blog.jsx, and CSS—and we iterated in real-time.

Lessons Learned: Why This Felt Different
Collaborating with Grok was a game-changer compared to solo debugging or generic AI prompts. It analyzed my exact code, suggested precise edits, and explained why (e.g., "This is a version mismatch—here's the refactor"). No copy-paste walls of code; just iterative guidance.

Personal reflection: As an econ guy, I love efficiency, but coding's taught me patience. Today's wins? A professional site that showcases my projects, blog, and contact form. Failures? Forgetting to clear caches—classic newbie move. But that's the journey: from frustration to "aha!" moments.

If you're building your own site, try AI as a co-pilot. Tools like Grok (built by xAI) bring reasoning and humor—way beyond basic chatbots.

What's Next?
Integrate more animations with Framer Motion.
Add a crypto project showcase.
Maybe a fun Tic-Tac-Toe Easter egg (already hidden via Konami code!).
Check out the live site at econdev.studio and let me know what you think in the comments. Code's on GitHub. If you're pivoting careers too, share your story—let's connect!

Thanks for reading. Onward to Day Whatever-This-Is! 🚀

How I Built and Deployed My Portfolio Site From Scratch (With Failures, Fixes, and a Domain)

Slobodan Jevtić — Thu, 10 Jul 2025 19:46:45 +0000

I recently launched my personal portfolio at econdev.studio, and while it’s live now, the road was anything but smooth. Between white screens, GitHub config issues, deployment quirks, and a few facepalms along the way — I learned a lot.

This post isn’t a perfect tutorial — it’s a real story, with real fixes. If you’re trying to build and deploy your own portfolio, maybe this saves you a few headaches.

🔧 Stack & Goals
Built with: React + Vite

Hosted on: GitHub Pages

Deployed via: gh-pages package

Domain: Custom .studio domain (econdev.studio)

Goals: One-page, fast-loading portfolio with sections for About, Projects, Contact

🧱 Building the Site
Started with a basic App.jsx structure

Created reusable components:

Used dark mode with a toggle

Kept layout simple but professional with proper spacing, typography, and scroll sections

🚧 First Big Challenge: GitHub Pages + Vite
I pushed my files and... the site was just white.
No errors in the terminal. No crashes. Just nothing.

Turns out:

I had the wrong base path set in vite.config.js

GitHub Pages serves from /repo-name/, unless you're using a custom domain

Once I set base: '/' and added a CNAME file → 💡 it worked

📁 Deploying with gh-pages

npm install --save-dev gh-pages

Then I added this to package.json:

"homepage": "https://bobaSloba.github.io/portfolio-site", "scripts": { "deploy": "gh-pages -d dist" }

🤦 Funny Mistakes I Made
Added twice → double sections at the bottom

Broke JSON with an extra comma → EJSONPARSE errors from npm

Pushed changes and forgot to rebuild → “why is the site still old??”

Thought I needed a CSR for SSL — spoiler: you don’t with GitHub Pages

✅ Final Result
📍 Live: https://econdev.studio
💻 Code: GitHub repo

🚀 What’s Next?
Scroll reveal animations (Framer Motion or AOS)

Responsive polish

Mini game Easter egg 😏

Favicon and tab branding

Maybe a blog or writing section?

❤️ Lessons
Don’t fear the terminal — copy/paste is a weapon

Deploying to GitHub Pages with Vite takes a few extra steps, but it’s worth it

Failures are just checkpoints

If you ever see a white screen — check your vite.config.js

📣 Let’s Connect
If you’re working on your own portfolio and got stuck — feel free to drop a comment or DM. I’ll reply.
You can find me on GitHub: @bobaSloba

From Profile to Portfolio: My First Real Website — Built the Hard Way (With AI)

Slobodan Jevtić — Tue, 08 Jul 2025 02:00:21 +0000

When I set out to complete my developer profiles across platforms like GitHub and Dev.to, I realized something was missing: a website that truly represented me.

I wanted a personal site — clean, responsive, and live on a custom domain. It sounded simple at first… especially with AI tools like ChatGPT and GitHub Copilot by my side.

But here's the truth:

🚧 Building a good website, even with AI help, is not a push-button task.
💻 You still need to understand, debug, design, and deploy.

This is the story of how I did it anyway — and what I learned.

🚀 Why I Decided to Build a Personal Site
I had just finished refreshing my GitHub and Dev.to profiles

I generated a custom avatar, a bio, and started pushing projects to GitHub

I realized a site would tie it all together and give me a place I control to showcase myself

🔧 Choosing the Stack
After trying Notion + Super.so (which I liked but found too expensive), I switched to what I really wanted:

Vite + React — blazing fast setup

Tailwind CSS — for clean, responsive styles

GitHub Pages — for free hosting

Custom domain from Name.com

I installed and ran everything on my MacBook Air with Copilot and ChatGPT as co-pilots (pun intended).

🧠 AI Helps, But You Still Need to Think
Here’s where it got tricky:

Layout issues — Elements weren’t centered, pages were blank at times

Duplicate imports & export errors — App crashed silently until debugged

Deployment errors — Git wouldn’t push until I switched from HTTPS to SSH

Missing images — Logo didn’t show due to misnamed files

GitHub Pages setup — Setting DNS records and waiting for HTTPS to activate

All of these needed step-by-step troubleshooting, guidance from ChatGPT, reading docs, and trying things again and again.

🌐 Deployment and Domain Setup
I bought a domain from Name.com and pointed it to GitHub using A records and a CNAME.

GitHub Pages finally recognized it, and after some DNS waiting time, my site was live — secure and custom-branded.

🧠 What I Learned
AI can assist you — not replace you

Frontend debugging often comes down to very small things (one typo, one misalignment)

Git setup still needs SSH keys or personal access tokens

Custom domains are great for building trust — and yes, GitHub lets you host it for free

✨ What’s Next?
Now that my site is up, I can:

Showcase my projects (like my Habit Tracker App)

Add a blog or “Now” page

Link it to my resume and profiles

And this article? It’s the first in what I hope is a long chain of weekly updates.

💬 Final Thoughts
If you’re building your first site, know this:

It's okay if it doesn't look amazing on day one

It’s better to finish something imperfect but real than to wait forever for “perfect”

Document the process — it becomes part of your journey

Day Two – Sleep Tracker Tab Built and Working

Slobodan Jevtić — Mon, 07 Jul 2025 22:16:39 +0000

Day Two: The Sleep Tracker Tab Is Live and Functional 😴✅

Today I took my first real step into connecting code with real-life usefulness.

The Sleep Tracker section of my habit tracker app is now fully functional. It lets you:

Slide to set when you fell asleep and when you woke up
Automatically calculate your total hours slept
Handle overnight sleep (e.g. 23:30 → 06:30 works!)
Save the result to an SQLite database, locally on your machine

This marks a big shift: from just seeing screens… to making them do something.

💡 Why This Matters

I’m building this app not just to learn Python and mobile app dev — but to rebuild structure in my own life.

Tracking sleep helps me stay mindful of energy, focus, and mental health. The goal is consistency, not perfection.

Each section of this app — sleep, calories, workouts, running — is a tool for self-maintenance, built by my own hands.

🔧 Today’s Technical Wins

Used Kivy to create sliders for sleep start/end times
Calculated total sleep duration (including overnight logic)
Stored data with timestamps into a local SQLite DB
Kept UI clean and responsive using .kv structure

Repo is public here →

👉 https://github.com/bobaSloba/habit-tracker-mobile

🔜 What’s Coming Next

Visual graphs for sleep over time using Matplotlib
A monthly calendar view with colored day blocks:
- 🔴 Less than 6h
- 🔵 6–8h
- 🟢 8h+

Later, I’ll build the Calories tab, then Workouts, and finally the GPS-based Running Tracker.

🙋‍♂️ Final Thoughts

Learning to code in public is more motivating than I expected.

Every little push feels like building a new part of myself — one commit at a time.

If you’re learning Python, Kivy, or just working on your habits and mental health too — let’s connect.

See you in Day Three.

From Economics to Engineering My Future — Day Two of the Journey

Slobodan Jevtić — Mon, 07 Jul 2025 21:02:37 +0000

Day Two: Getting Set Up and Building the Foundation

Today marks the start of my public learning journey.

I’m an economics grad pivoting into the world of code, crypto, and problem-solving. I’ve decided to learn in public, build useful tools, and track my progress openly week by week.

✅ What I did today:

Set up my local dev environment on macOS
Installed Kivy to explore mobile-ready Python apps
Created a multi-screen habit tracker app using Python and Kivy
Pushed my first working version to GitHub (🎉)

Check out the repo here:

👉 https://github.com/bobaSloba/habit-tracker-mobile

💭 Why This Matters (Mental Health & Habits)

This isn’t just about building an app. It’s about building myself.

The four habits I’m tracking — sleep, food, workouts, and running — are the pillars of mental well-being. Over the past months, I’ve learned firsthand how much better I feel when I sleep enough, eat clean, move my body, and spend time outside.

Coding is my creative outlet, but these habits are my fuel.

This app is my way of staying accountable to both.

📱 What’s Next:

Build out the Sleep tab with slider input, calendar view, and graph
Continue learning Kivy layouts and SQLite integration
Post weekly progress updates and share key lessons

If you’re learning Python, working on habits, or just curious about crypto/dev/AI — follow along or say hey. Let’s build together.

From Economics to Engineering My Future — Day One of the Journey

Slobodan Jevtić — Sun, 06 Jul 2025 01:42:47 +0000

Hi, I’m Slobodan — an economics grad with a growing obsession for code, crypto, and creating. This is Day One of my public learning journey. I'm using this space to stay accountable, track progress, and share what I learn along the way.

I’ve always loved solving problems and building things, but I’ve never fully committed to learning technical skills — until now. I want to shift from theory to action, from consuming to creating.

Right now I’m focused on:

Python (as my foundation)

Crypto & blockchain dev (where econ meets tech)

AI tools (to enhance creativity and productivity)

Today’s Milestones

✅ Created this GitHub profile and wrote my first post
✅ Defined my roadmap: learning Python, building weekly projects
✅ Set up my local dev environment (VS Code, Python, Git)
✅ Picked a small first project: build a habit tracker with Tkinter

What’s Next

This week, I’ll:

Work on the frontend of my habit tracker in Python

Document key lessons here

Share code snippets and blockers I hit

Stay consistent, no matter what