Skip to content
BranchesTags

Repository files navigation

🧮 OmniCalc

Your all-in-one calculator dashboard with 9+ specialized tools

A modern, responsive calculator application built with React, TypeScript, and Tailwind CSS. Features a unified design system, dark mode support, and a comprehensive collection of calculators and productivity tools.

Version React TypeScript Tailwind

✨ Features

🎨 Modern UI/UX

  • Unified Design System - Consistent components across all tools
  • Dark Mode - Full dark mode support with smooth transitions
  • Responsive Layout - Works seamlessly from mobile (320px) to 4K displays
  • Glass Morphism - Modern backdrop blur effects and shadows
  • Smooth Animations - Polished transitions and interactions

🧰 Calculator Tools

📐 Math & Conversion

  • Scientific Calculator - Advanced mathematical operations (sin, cos, tan, log, power, etc.)
  • Standard Calculator - Basic arithmetic operations
  • Unit Converter - Convert between length, weight, temperature, and volume units

💰 Finance

  • Tip Calculator - Calculate tips and split bills among multiple people
  • Loan Calculator - Calculate loan payments with amortization
  • Mortgage Calculator - Estimate monthly mortgage payments and total interest

🏃 Health & Fitness

  • BMI Calculator - Calculate Body Mass Index with metric/imperial support

⏱️ Productivity

  • Pomodoro Timer - Work/break timer with session tracking
  • Stopwatch - High-precision stopwatch with lap recording

🛠️ Technical Features

  • TypeScript - Full type safety throughout the application
  • Component Library - Reusable CommonComponents system
  • React Router - Client-side routing with URL persistence
  • Context API - Theme and settings management
  • Optimized Build - Production-ready Vite build pipeline
  • Accessibility - Keyboard navigation and ARIA labels

🚀 Quick Start

Prerequisites

  • Node.js 16+ and npm/yarn/pnpm

Installation

# Clone the repository
git clone <repository-url>
cd omni-clac-app

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:5173

Build for Production

# Create optimized production build
npm run build

# Preview production build locally
npm run preview

Other Commands

# Run TypeScript type checking
npx tsc --noEmit

# Run ESLint
npm run lint

📁 Project Structure

omni-clac-app/
├── src/
│   ├── components/
│   │   ├── common/           # Shared components
│   │   │   ├── CommonComponents.tsx  # Design system components
│   │   │   ├── ThemeToggle.tsx
│   │   │   └── ...
│   │   ├── Layout/           # Layout components
│   │   │   ├── Header.tsx
│   │   │   ├── Sidebar.tsx
│   │   │   └── Layout.tsx
│   │   ├── tools/            # Calculator tools
│   │   │   ├── BMICalculator.tsx
│   │   │   ├── LoanCalculator.tsx
│   │   │   ├── MortgageCalculator.tsx
│   │   │   ├── PomodoroTimer.tsx
│   │   │   ├── ScientificCalculator.tsx
│   │   │   ├── StandardCalculator.tsx
│   │   │   ├── Stopwatch.tsx
│   │   │   ├── Tip-Calculator.tsx
│   │   │   └── Unit-Convertor.tsx
│   │   └── ui/               # UI primitives
│   ├── context/              # React Context providers
│   │   ├── ThemeContext.tsx
│   │   └── SettingsContext.tsx
│   ├── styles/               # Global styles
│   │   └── globals.css
│   ├── lib/                  # Utilities
│   ├── App.tsx               # Main app component
│   └── main.tsx              # Entry point
├── public/                   # Static assets
├── docs/                     # Documentation
│   ├── DESIGN_SYSTEM_IMPLEMENTATION.md
│   ├── COMPONENT_USAGE_GUIDE.md
│   ├── TESTING_CHECKLIST.md
│   └── LAYOUT_BUG_FIX.md
├── tailwind.config.js        # Tailwind configuration
├── tsconfig.json             # TypeScript configuration
├── vite.config.ts            # Vite configuration
└── package.json

🎨 Design System

CommonComponents

The app uses a unified design system with 8 reusable components:

import { 
  Card,           // Container with title/description
  Input,          // Text/number input with icons
  Select,         // Dropdown selector
  Button,         // Multi-variant button
  RangeSlider,    // Range input with value display
  ResultDisplay,  // Formatted result card
  ToggleGroup,    // Button group for categories
  CardGrid        // Responsive grid layout
} from '@/components/common/CommonComponents';

Component Variants

Button Variants:

  • primary - Blue action button
  • secondary - Gray secondary button
  • outline - Bordered button
  • danger - Red destructive button
  • ghost - Transparent button

Button Sizes:

  • sm - Small (compact)
  • md - Medium (default)
  • lg - Large (prominent)

ResultDisplay Variants:

  • default - Neutral gray
  • success - Green (positive results)
  • warning - Orange (caution)
  • danger - Red (errors/alerts)

Color Palette

/* Light Mode */
--bg-primary: slate-50 to slate-100
--bg-card: white
--text-primary: slate-900
--text-secondary: slate-600
--border: slate-200

/* Dark Mode */
--bg-primary: slate-950 to slate-900
--bg-card: slate-900
--text-primary: slate-100
--text-secondary: slate-400
--border: slate-700

🧩 Component Usage Examples

Basic Calculator Tool

import { Card, Input, Button, ResultDisplay } from '@/components/common/CommonComponents';

export const MyCalculator: React.FC = () => {
  const [value, setValue] = useState('');
  const [result, setResult] = useState(0);

  return (
    <div className="max-w-xl mx-auto">
      <Card 
        title="My Calculator" 
        description="Calculate something useful"
      >
        <div className="space-y-6">
          <Input
            label="Enter Value"
            type="number"
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />

          <Button 
            variant="primary" 
            size="lg" 
            fullWidth
            onClick={() => setResult(parseFloat(value) * 2)}
          >
            Calculate
          </Button>

          {result > 0 && (
            <ResultDisplay 
              label="Result" 
              value={result.toFixed(2)}
              variant="success"
            />
          )}
        </div>
      </Card>
    </div>
  );
};

🌙 Dark Mode

Dark mode is implemented using Tailwind's dark: variant and React Context:

// Toggle dark mode
import { useTheme } from '@/context/ThemeContext';

const { theme, toggleTheme } = useTheme();

All components automatically support dark mode with proper contrast ratios.

📱 Responsive Design

Breakpoints

sm:  640px   /* Small tablets */
md:  768px   /* Tablets */
lg:  1024px  /* Laptops */
xl:  1280px  /* Desktops */
2xl: 1536px  /* Large displays */

Layout Behavior

  • Mobile (< 1024px): Sidebar hidden, accessible via menu button
  • Desktop (≥ 1024px): Sidebar always visible, content area adjusted

🧪 Testing

Manual Testing Checklist

See docs/TESTING_CHECKLIST.md for comprehensive testing guide.

Quick Test:

  1. Start dev server: npm run dev
  2. Open http://localhost:5173
  3. Test each calculator from sidebar
  4. Toggle dark mode
  5. Resize browser window
  6. Verify calculations are correct

Browser Support

  • ✅ Chrome/Edge (Chromium) 90+
  • ✅ Firefox 88+
  • ✅ Safari 14+
  • ✅ Mobile Safari (iOS 14+)
  • ✅ Chrome Mobile (Android)

🔧 Configuration

Tailwind Config

Customize colors, spacing, and breakpoints in tailwind.config.js:

export default {
  darkMode: 'class',
  theme: {
    extend: {
      colors: { /* custom colors */ },
      animation: { /* custom animations */ }
    }
  }
}

TypeScript Config

Strict mode enabled with path aliases:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

📚 Documentation

🎯 Roadmap

Planned Features

  • Calculator history/memory
  • Export results to PDF/CSV
  • Custom themes
  • More calculator tools (Age, Date, Currency, etc.)
  • Keyboard shortcuts
  • PWA support (offline mode)
  • Unit tests with Vitest
  • E2E tests with Playwright

Potential Enhancements

  • Toast notifications
  • Modal dialogs
  • Tooltips for help text
  • Form validation library
  • Animation library integration
  • Internationalization (i18n)

🤝 Contributing

Contributions are welcome! To add a new calculator:

  1. Create a new component in src/components/tools/
  2. Use CommonComponents for consistency
  3. Add route in App.tsx
  4. Add tool entry in Sidebar.tsx TOOLS array
  5. Test thoroughly (light/dark mode, responsive)
  6. Update documentation

Code Style

  • Use TypeScript for all new files
  • Follow existing component patterns
  • Use CommonComponents instead of custom styling
  • Add proper TypeScript types
  • Include accessibility attributes

📄 License

This project is private and proprietary.

🙏 Acknowledgments

Technologies

Design Inspiration

  • Modern calculator apps
  • Material Design principles
  • Apple's design language

📞 Support

For issues, questions, or feature requests:

  • Check existing documentation in /docs
  • Review component usage examples
  • Test with the provided checklist

📊 Project Stats

  • Components: 30+
  • Calculator Tools: 9
  • Lines of Code: ~5,000+
  • Bundle Size: ~250KB (gzipped: ~80KB)
  • Build Time: ~5-8 seconds
  • Lighthouse Score: 95+ (Performance, Accessibility, Best Practices)

Built with ❤️ using React + TypeScript + Tailwind CSS

Last Updated: February 9, 2026

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

2 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages