DEV Community: Daniel Zaharia

A no-login time tracker that calculates earnings live (browser-only)

Daniel Zaharia — Sun, 21 Sep 2025 12:02:59 +0000

Use it here: https://www.konverter-online.com/time-tracker

A tiny, no-login time tracker that runs entirely in your browser. Add your Hourly Rate + Currency, hit Start, and see Total Time and Total Earnings update live.

What it is (and isn’t)

This is a frictionless time tracker for quick sessions:

No accounts, no sync, no team features.
No data leaves your browser (local persistence).
Built to answer one question fast: “If my rate is X, how much am I earning right now?”

If you need clients, invoices, or collaboration, this isn’t that.

If you want a fast, private, single-player timer with live earnings, this is it.

Try it in 10 seconds

Open https://www.konverter-online.com/time-tracker
(Optional) Fill Project Name and Category
Set Hourly Rate and Currency
Press Start → watch time and earnings tick in real-time
Stop when you’re done

Features (today)

No login. Everything runs client-side.
Live earnings. earnings = (elapsed_minutes / 60) × hourly_rate
Project & Category (optional) to label your session
Local persistence so a refresh doesn’t nuke the session
Currency formatting via Intl.NumberFormat

Coming next (short roadmap)

CSV export (start/end, duration, rate, earnings, currency, note)
Idle auto-pause after Xs of inactivity
PWA (install to Home Screen; offline)
Keyboard shortcuts (Start/Stop/Reset)
Notes per session and a weekly overview

If any of these matter to you, say which one and why—will prioritize.

Looking for Freelancer Testers for Flowlancer.app

Daniel Zaharia — Thu, 31 Jul 2025 06:17:06 +0000

Hi, I’m Daniel and I built Flowlancer.app to simplify the day-to-day work of freelancers. Instead of hopping between half a dozen different sites, everything lives here:

Proposal Generator: draft polished, client-ready proposals in seconds
Hourly Rate Calculator: work out exactly what to charge based on income goals, hours and expenses
Portfolio Builder: assemble a clean, responsive portfolio with pre-made themes
Profile Audit: get instant feedback on clarity, structure and messaging
Time & Expense Tracker: start/stop a timer for every task and log expenses on the go
Invoice Generator: turn tracked hours or flat fees into downloadable PDF invoices
Daily Stand-Up / To-Do List: plan three key tasks each morning and check them off before you log off

I’m looking for a handful of real freelancers who send proposals, invoices and track time every week. You’ll get 35 free credits to explore every tool, and you can grab them by entering FREELANCER10 and PROSIM on your profile page. Honest feedback via the built-in Dashboard is all I ask in return.

If you’re interested, drop me a message here or on dev.to and I’ll send your more credits right away. Thanks for helping shape Flowlancer into the best toolkit for independent pros!

How I Built 3 Professional Calculators in One Weekend with Next.js 14

Daniel Zaharia — Thu, 17 Jul 2025 17:40:57 +0000

Ever found yourself switching between different calculator websites for percentage calculations, financial planning, and real estate analysis? I did too. So I decided to build a comprehensive solution that combines all three into one sleek, modern platform.

The Problem

As a developer, I often need quick calculations for:

Percentage changes and markups for pricing
Compound interest and ROI for investment decisions
Real estate commissions and rental yields

But existing solutions were either too basic, had annoying ads, or required multiple tabs. I wanted something fast, accurate, and beautiful.

The Solution: Advanced Percentage Calculator

I built a complete calculator suite with three specialized tools:

🧮 Percentage Calculator

Basic percentage calculations (what is X% of Y?)
Reverse percentage finding
Percentage change analysis
Markup and discount calculations
Compound interest over time

💰 Finance Calculator

Compound interest with different compounding periods
Loan payment calculations
ROI and APR analysis
Investment return projections
Tax calculations

🏠 Real Estate Calculator

Commission calculations
Rental yield analysis
Property appreciation tracking
Mortgage payment breakdowns
Property tax estimations

Tech Stack & Architecture

Frontend:

Next.js 14 with App Router for optimal performance
TypeScript for type safety and better DX
Tailwind CSS for rapid, responsive styling
ShadCN UI for beautiful, accessible components
Lucide React for consistent iconography

Key Features:

Client-side calculations - No server requests, instant results
Local storage - Save calculation history
Dark mode - Built with next-themes
Mobile-first - Responsive design with touch-friendly interface
Keyboard shortcuts - Power user features
Export functionality - Download calculation history

Implementation Highlights

1. Reusable Header Component

// Modern responsive navigation with mobile menu
<Header />

2. Real-time Calculations

// Instant updates as user types
const calculate = useCallback(() => {
  // Complex calculation logic
  setResult(calcResult);
}, [input1, input2, type]);

3. Local Storage Integration

// Persistent calculation history
useEffect(() => {
  const saved = localStorage.getItem('calc-history');
  if (saved) setHistory(JSON.parse(saved));
}, []);

Design Decisions

Why Next.js 14?

App Router for better routing and layouts
Server Components for improved performance
Built-in optimizations for images and fonts
Easy deployment to Vercel

Why Client-side Only?

Privacy - No data sent to servers
Speed - Instant calculations
Offline capability - Works without internet
Cost-effective - No server costs

Why ShadCN UI?

Accessible - Built with ARIA standards
Customizable - Easy to theme
Modern - Beautiful default design
Type-safe - Full TypeScript support

Performance & SEO

Lighthouse Score: 95+ across all metrics
Core Web Vitals: Excellent
SEO Optimized: Meta tags, structured data, sitemap
PWA Ready: Manifest and service worker ready

Challenges & Solutions

1. Mobile Navigation

Challenge: Creating a smooth mobile menu experience
Solution: Used ShadCN Sheet component with Radix UI primitives

2. Calculation Precision

Challenge: Handling floating-point arithmetic errors
Solution: Implemented custom precision controls and proper rounding

3. State Management

Challenge: Managing complex form states across multiple calculators
Solution: Used React hooks with proper dependency arrays and useCallback

Results

3 calculators in one platform
100% client-side - No server costs
Mobile responsive - Works on all devices
Fast loading - Under 2 seconds
SEO optimized - Ready for search engines

Live Demo

Check out the live application: Advanced Percentage Calculator

Key Takeaways

Next.js 14 is powerful - The App Router and server components make development much faster
Client-side can be robust - With proper state management, you can build complex applications without a backend
Design matters - Good UX can make technical tools accessible to everyone
Performance is crucial - Users expect instant results from calculators

What's Next?

I'm planning to add:

More specialized calculators (scientific, statistical)
API endpoints for programmatic access
Advanced visualization features
Multi-language support

Get Involved

This project is open source! Feel free to:

🌟 Star the repository
🐛 Report bugs
💡 Suggest features
🔧 Contribute code

GitHub: coronasco/percentual-calculator

What tools have you built to solve your daily problems? I'd love to hear about your projects in the comments!

8 Developer Tools I Built That I Actually Use Every Day

Daniel Zaharia — Tue, 15 Jul 2025 16:34:04 +0000

Hey fellow developers!

I'm Daniel, and I want to share something I've been working on that's actually made my daily coding life much easier. You know how it is, you're in the middle of coding, you need to format some JSON, generate a password, or create a QR code, and you end up opening 8 different tabs to find the right tools?

Well, I got tired of that. So I built my own collection of tools that I actually use every single day. And the best part? They're all 100% free, no registration required, and privacy-focused.

Let me show you what I've built:

The Problem I Solved

As a developer, I found myself constantly switching between different online tools for basic tasks:

Need to format JSON? → Google search → Find a tool → Hope it's not sketchy
Want to generate a secure password? → Another search → Another tool
Need to convert SVG to React component? → Yet another search...

This was getting ridiculous. So I decided to build my own toolkit that I could trust and actually enjoy using.

My Solution: Konverter Online

I created Konverter Online - a collection of 8 essential developer tools that I use daily. Here's what I built:

1. SVG Converter

Link: https://www.konverter-online.com

This is my baby - the tool that started it all. I was tired of manually converting SVGs to CSS backgrounds and React components. Now I just drag & drop an SVG and get:

CSS with URL-encoded SVG
CSS with Base64
Functional React/JSX component
Optimized SVG (smaller file size)

2. JSON Formatter

Link: https://www.konverter-online.com/json-formatter

Every developer needs this. I built it with syntax highlighting and real-time error detection. It's saved me countless hours debugging malformed JSON.

Pro tip: The error highlighting shows you exactly where the syntax error is - no more guessing!

3. CSS Minifier

Link: https://www.konverter-online.com/css-minifier

I was using online CSS minifiers that felt sketchy. Now I have my own that I trust. It removes comments, compresses selectors, and shows you the exact size reduction.

Why it's better: Real-time size comparison so you can see the impact immediately.

4. Base64 Converter

Link: https://www.konverter-online.com/base64-converter

This one I use surprisingly often - for embedding images in CSS, encoding API responses, you name it. It handles text, files, and images.

Cool feature: URL-safe encoding option for when you need to use Base64 in URLs.

5. Color Generator

Link: https://www.konverter-online.com/color-generator

I'm not a designer, but I need good colors for my projects. This tool extracts beautiful color palettes from images and gives me HEX, RGB, and HSL values.

How I use it: Upload a screenshot of a design I like, extract the colors, and use them in my projects.

6. Password Generator

Link: https://www.konverter-online.com/password-generator

I built this because I was tired of weak password generators. This one includes:

Real-time strength analysis
Entropy calculation
Estimated crack time
Option to exclude similar characters (like 0 and O)

Security nerd moment: The entropy calculation is based on actual cryptographic principles, not just "strong/weak" labels.

7. QR Code Generator

Link: https://www.konverter-online.com/qr-generator

I use this for sharing links, WiFi passwords, and even contact information. The best part? You can add your logo in the center.

Pro tip: The error correction feature means your QR code still works even if part of it gets covered or damaged.

8. URL Shortener

Link: https://www.konverter-online.com/url-shortener

I built this for sharing links in presentations and social media. It includes QR code generation and click tracking.

Why I love it: No ads, no tracking, just clean short URLs.

Tech Stack (Because You Asked)

I built everything with:

Next.js 14 with App Router (for that sweet performance)
TypeScript (because I'm not a monster)
Tailwind CSS (for rapid development)
shadcn/ui (for beautiful components)

Why I Built These Tools

I actually use them - These aren't just portfolio projects, I use them daily
Privacy-focused - No data collection, no tracking, no ads
100% free - No hidden costs, no premium features
Mobile responsive - Because I'm often on my phone
Fast - Built with modern web technologies for optimal performance

Try Them Out

All tools are live at https://www.konverter-online.com

I'd love to hear what you think! Which tool would be most useful for your daily workflow? Any features you'd like to see added?

Open Source

The entire project is open source on GitHub: https://github.com/coronasco/konverter

Contributions are welcome! I'm always looking to improve these tools based on real developer needs.

Final Thoughts

Building tools that you actually use is incredibly rewarding. It's not just about the code - it's about solving real problems that make your daily development workflow smoother.

If you're thinking about building your own tools, my advice is: start with something you actually need. Don't build for the sake of building. Build to solve a real problem you face every day.

What tools do you wish existed? What's your daily workflow pain point? I'd love to hear about it in the comments!

Happy coding!

P.S. If you found any of these tools useful, consider giving the GitHub repo a star. It really helps with motivation! ⭐

Building Konverter: A Complete Web Developer Toolkit

Daniel Zaharia — Thu, 10 Jul 2025 11:52:33 +0000

Hey dev community! 👋

I've been working on something I'm really excited to share with you all. Over the past few months, I've built Konverter - a comprehensive web developer toolkit that I wish I had when I was starting out.

What is Konverter?

Konverter is a collection of 8 essential web development tools, all built with Next.js, TypeScript, ShadCN and Tailwind CSS. Everything runs 100% client-side, so your data never leaves your browser.

The Tools

🎨 SVG to React/JSX Converter

This was actually the tool that started it all. I was tired of manually converting SVG files to React components, so I built an automated solution that:

Optimizes SVGs using custom algorithms
Generates TypeScript React components with configurable props
Extracts colors and makes them customizable via props
Shows before/after preview with size statistics
Exports as PNG, JPG, WebP, or complete icon sets

🔐 Password Generator

A secure password generator that creates strong, memorable passwords with:

Customizable length and character sets
Strength indicator
Copy to clipboard functionality
No server-side storage (everything stays local)

🔗 URL Shortener

Simple but effective URL shortening tool that:

Generates short, shareable links
Works entirely in the browser
Perfect for quick sharing

📄 Base64 Encoder/Decoder

Essential for web development, this tool:

Converts text and files to Base64
Supports file uploads (images, documents, etc.)
Instantly decodes Base64 back to original format
Perfect for embedding data in HTML/CSS

🎨 Color Generator

Extract beautiful color palettes from images:

Upload images or provide URLs
Automatically extracts dominant colors
Generates CSS custom properties
Shows color percentages and RGB values

📊 JSON Formatter

Clean up and validate JSON data:

Beautify and minify JSON
Validate JSON syntax
Convert to YAML format
Syntax highlighting

🎯 CSS Minifier

Optimize your CSS files:

Minify CSS with size reduction stats
Auto-prefixer for cross-browser compatibility
Before/after preview
Download optimized files

📱 QR Code Generator

Create custom QR codes for various purposes:

URLs, text, email, phone numbers, WiFi networks
Customizable colors and sizes
Instant download as PNG
Copy to clipboard functionality

Why I Built This

As a developer, I found myself constantly switching between different online tools for these common tasks. Some were slow, others had ads, and most required registration. I wanted something that was:

Fast - Everything runs client-side
Private - No data leaves your browser
Free - No registration, no ads, no limits
Modern - Built with the latest web technologies

Tech Stack

Next.js 14 with App Router
TypeScript for type safety
Tailwind CSS for styling
shadcn/ui for beautiful components
React Dropzone for file uploads
QRCode.js for QR generation
react-syntax-highlighter for code formatting

What I Learned

Building this project taught me so much about:

Performance optimization - Making everything run smoothly client-side
User experience - Creating intuitive interfaces for complex tools
SEO - Making each tool discoverable and well-documented
Accessibility - Ensuring the tools work for everyone

Try It Out!

You can check out all the tools at konverter-online.com

I'd love to hear your feedback! What tools do you find most useful? Are there any features you'd like to see added?

What's Next?

I'm planning to add:

More export formats for SVGs
Additional color palette tools
API endpoints for programmatic access
Browser extensions

Let me know what you think! 🚀

P.S. If you find any of these tools useful, feel free to share them with your team or on social media. It really helps motivate me to keep building!

webdev #nextjs #react #typescript #tools #sideproject #opensource

When I got tired of searching for tools, I started building my own

Daniel Zaharia — Thu, 03 Jul 2025 11:59:36 +0000

I’m a frontend developer, like many of you here. Over the years I’ve freelanced, worked in teams, built side projects, and started way too many things I didn’t finish.

At some point, I realized I was spending more time looking for the right tools than actually writing code. Switching tabs, trying weird online converters, installing random packages just to do basic things like optimizing an SVG or converting it to JSX. It started to feel… ridiculous.

So I decided to stop hunting and start building. Not because I wanted to launch a startup or go viral — but because I just wanted to move faster, with less friction

That’s how Konverter Online came to life. It’s a small, browser-only tool I made to quickly convert SVGs to React JSX, Base64, or URL-encoded CSS. You can also change colors, add simple animations, make them mobile-friendly, and copy clean, optimized output. I didn’t plan on sharing it at first — it just made my own work easier. But now that it’s solid, maybe it’ll help other devs too.

Around the same time, I was working on something bigger — a platform called Flowlancer. It’s my take on what freelancing should feel like: smooth, focused, and respectful of your time. Less chasing projects, more staying in flow. Still early, but it’s something I believe in deeply.

None of this came from a “startup idea.” It all came from friction I felt while coding. And every tool I’ve built lately started with the same question:

“Why am I wasting time doing this manually?”

If you’re a dev tired of context-switching between tools, maybe it’s time to build your own. Or maybe one of mine can save you a few tabs.

Let me know what you think. I’m always open to feedback or just chatting about side projects.

— Daniel

I built a small tool to convert SVGs to JSX, CSS, and Base64

Daniel Zaharia — Wed, 02 Jul 2025 21:40:37 +0000

Hey devs! 👋

I recently built a tiny tool to help with SVG conversions, especially for frontend devs who work with React, CSS, and inline SVGs.

Convert SVG to:
• React JSX
• Base64
• URL-encoded CSS

You can also:
• Change colors (fill/stroke)
• Make it mobile-friendly
• Add simple animations
• Optimize with SVGO
• Drag & drop + 1-click copy

Everything works in the browser, no account, no upload, totally free.

Here it is 👉 https://www.konverter-online.com

Would love any feedback, bugs or feature ideas. Hope it saves you time like it did for me 😄

Daniel