🧮 Numix Calculator- numixpro.netlify.app

A premium Progressive Web App calculator with advanced features

✨ Features Overview

🔢 Advanced Calculator Modes

Standard Calculator - Basic arithmetic with memory functions
Scientific Calculator - Trigonometric, logarithmic, and advanced mathematical functions
Programmer Calculator - Binary, octal, decimal, and hexadecimal operations with bitwise functions
Unit Converter - Currency, length, weight, temperature, and time conversions

📱 Premium PWA Experience

Offline Capability - Full functionality without internet connection
Mobile Optimization - Native app-like experience on all devices
iPhone Notch Support - Safe area handling for modern iOS devices
Installation Prompts - Smart, non-intrusive install suggestions
Push Notifications - Background sync and updates (optional)

🎨 Modern UI/UX

Dark/Light Themes - Automatic and manual theme switching
Touch Optimized - 44px minimum touch targets for perfect mobile interaction
Haptic Feedback - Tactile responses on supported devices
Smooth Animations - 60fps transitions and micro-interactions
Responsive Design - Perfect on phones, tablets, and desktops

📊 Smart History & Data

Persistent History - Calculations saved for 30 days with automatic cleanup
Categorized Entries - Different styling for each calculator type
Metadata Tracking - Time, calculator mode, and operation type
Export/Import - Backup and restore calculation history
Search & Filter - Find specific calculations quickly

🔮 Future Enhancements

🔊 Sound Integration (Coming Soon)

Audio Feedback - Sound effects for button presses and calculations
Voice Commands - Voice-activated calculator operations
Audio Results - Text-to-speech for calculation results
Custom Sound Themes - Personalized audio experiences
Accessibility Audio - Enhanced audio cues for visually impaired users

Stay tuned for upcoming sound features that will enhance the user experience with interactive audio feedback and voice capabilities!

🚀 Quick Start

Prerequisites

Node.js 18+ and npm
Modern browser with PWA support
HTTPS for production (required for PWA features)

Installation

# Clone the repository
git clone https://github.com/yourusername/numix-calculator.git
cd numix-calculator

# Install dependencies
npm install

# Start development server
npm run dev

Production Build

# Build for production
npm run build

# Preview production build
npm run preview

# Deploy to your hosting service
npm run deploy

🏗️ Architecture & Technical Details

Technology Stack

Frontend: React 18 with Hooks and Context API
Build Tool: Vite 5 for fast development and optimized builds
PWA: Custom service worker with advanced caching strategies
Styling: CSS Modules with CSS Custom Properties
APIs: MathJS for calculations, Fixer.io for currency rates

Project Structure

src/
├── components/           # React components
│   ├── Calculator.jsx   # Main calculator container
│   ├── MusicPlayer.jsx  # Unified music player
│   └── AdditonalCalculators/ # Specialized calculators
├── utils/               # Utility functions and managers
│   ├── spotifyManager.js     # Spotify integration
│   ├── appleMusicManager.js  # Apple Music integration
│   ├── localStorageManager.js # Data persistence
│   └── pwaUtils.js          # PWA functionality
├── App.jsx             # Main app component
└── main.jsx           # Application entry point

public/
├── manifest.json       # PWA manifest
├── service-worker.js   # Custom service worker
└── icons/             # PWA icons (72x72 to 512x512)

Key Features Implementation

Progressive Web App

Manifest Configuration: Complete PWA manifest with shortcuts and categories
Service Worker: Advanced caching with stale-while-revalidate strategy
Offline Support: Full calculator functionality without internet
Installation: Smart prompts with user preference tracking

Mobile Optimization

Viewport Handling: Dynamic viewport units for mobile browsers
Safe Areas: Support for iPhone notches and dynamic islands
Touch Targets: Minimum 44px for accessibility compliance
Performance: Optimized animations and lazy loading

Data Management

Local Storage: Automatic data cleanup and migration
IndexedDB: Large data storage for offline functionality
Memory Management: Efficient state handling and cleanup
Sync: Background synchronization when online

🔧 Configuration Options

Environment Variables

# .env.local
VITE_CURRENCY_API_KEY=your_fixer_io_api_key
VITE_APP_VERSION=1.0.0

PWA Configuration

// public/manifest.json
{
  "name": "Numix Calculator",
  "short_name": "Numix",
  "theme_color": "#6366f1",
  "background_color": "#ffffff",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/"
}

Service Worker Caching

// Cache strategies
const strategies = {
  static: 'cache-first',      // HTML, CSS, JS
  api: 'network-first',       // API calls
  images: 'cache-first',      // Icons, images
  fonts: 'cache-first'        // Web fonts
};

📱 Device Support & Testing

Supported Platforms

iOS: 12+ (Safari, Chrome, Firefox)
Android: 8+ (Chrome, Firefox, Samsung Internet)
Desktop: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+

Testing Checklist

Performance Metrics

First Contentful Paint: < 1.5s
Largest Contentful Paint: < 2.5s
Cumulative Layout Shift: < 0.1
Time to Interactive: < 3.0s

🚀 Deployment

Static Hosting (Recommended)

# Netlify
npm run build && netlify deploy --prod --dir dist

# Vercel
npm run build && vercel --prod

# GitHub Pages
npm run build && npm run deploy:gh-pages

Docker Deployment

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

CDN Configuration

// Optimal caching headers
const cacheHeaders = {
  'Cache-Control': 'public, max-age=31536000', // 1 year for assets
  'Service-Worker': 'public, max-age=0',       // No cache for SW
  'HTML': 'public, max-age=3600'              // 1 hour for HTML
};

🔐 Security & Privacy

Data Protection

No Server Storage: All data stored locally
HTTPS Required: Secure connections for PWA features
CSP Headers: Content Security Policy implementation
Subresource Integrity: Script integrity verification

📈 Analytics & Monitoring

Performance Monitoring

// Web Vitals tracking
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getFCP(console.log);
getLCP(console.log);
getTTFB(console.log);

Error Tracking

// Global error handling
window.addEventListener('error', (event) => {
  // Send to monitoring service
  console.error('Global error:', event.error);
});

window.addEventListener('unhandledrejection', (event) => {
  // Handle promise rejections
  console.error('Unhandled promise rejection:', event.reason);
});

🤝 Contributing

Development Workflow

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Update documentation
Submit a pull request

Code Standards

ESLint: Airbnb configuration
Prettier: Code formatting
Husky: Pre-commit hooks
Conventional Commits: Commit message format

Testing

# Run tests
npm run test

# Run with coverage
npm run test:coverage

# E2E tests
npm run test:e2e

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links & Resources

Documentation

Tools & Services

Lighthouse - Performance auditing
Workbox - Service worker libraries
PWA Builder - PWA testing and validation

🆘 Support & FAQ

Common Issues

Q: PWA installation not showing? A: Check that you're using HTTPS and the manifest.json is properly configured.

Q: Calculator buttons not responsive on mobile? A: Verify touch targets are at least 44px and touch-action is set correctly.

Getting Help

📧 Email: support@numix-calculator.com
💬 Discord: Join our community
🐛 Issues: GitHub Issues

Made with ❤️ by Your Name | Live Demo

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
public		public
src		src
.gitignore		.gitignore
APP_REVIEW.md		APP_REVIEW.md
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

melloom/Numix

Folders and files

Latest commit

History

Repository files navigation