DEV Community

Daniel Zaharia
Daniel Zaharia

Posted on

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

#nextjs #typescript #webdev #javascript

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 />
Enter fullscreen mode Exit fullscreen mode

2. Real-time Calculations 

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

3. Local Storage Integration 

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

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

  1. Next.js 14 is powerful - The App Router and server components make development much faster
  2. Client-side can be robust - With proper state management, you can build complex applications without a backend
  3. Design matters - Good UX can make technical tools accessible to everyone
  4. 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!

Top comments (0)