🧮 OOP Calculator - Advanced TypeScript Calculator with Design Patterns

A sophisticated calculator application built with Next.js 14, TypeScript, and Object-Oriented Programming principles. This project demonstrates the implementation of multiple Design Patterns and SOLID Principles in a real-world React application.

🎯 Project Concept

This calculator application showcases advanced software engineering concepts through a practical, interactive calculator interface. The project implements six major design patterns and follows SOLID principles to create a maintainable, extensible, and type-safe codebase.

🏗️ Architecture Highlights

• Design Patterns: Factory, Strategy, Command, Observer, Singleton, and Builder patterns
• SOLID Principles: Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, and Dependency Inversion
• Type Safety: Strict TypeScript configuration with comprehensive type definitions
• Modern React: Hooks-based state management with custom hooks
• Responsive Design: Beautiful, modern UI that works on all devices

✨ Features

📊 Calculator Types

• Basic Calculator: Standard arithmetic operations (+, -, ×, ÷, %)
• Scientific Calculator: Advanced operations (√, x², xʸ, sin, cos, tan, π, e)
• Memory Functions: Complete memory management (MC, MR, MS, M+)

🔧 Technical Features

• Operation Chaining: Traditional calculator behavior with proper operation precedence
• Error Handling: Division by zero protection and input validation
• History Management: Undo/Redo functionality with persistent history
• State Management: Comprehensive state management with React hooks
• Design Patterns: Real-world implementation of multiple design patterns

🛠️ Technology Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript (strict mode)
• Styling: Tailwind CSS
• State Management: React Hooks + Custom Hooks
• Design Patterns: Factory, Strategy, Command, Observer, Singleton, Builder
• Architecture: SOLID Principles, Clean Code

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js (version 18 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone <repository-url>
   cd oop-calculator

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:3000 to see the application.

Build for Production

# Build the application
npm run build

# Start the production server
npm start

📱 Usage

Basic Calculator

Navigate to /calculators/basic for standard arithmetic operations:

• Number Input: Click digits (0-9) or use keyboard
• Operations: +, -, ×, ÷ with operation chaining
• Special Functions: %, +/-, decimal point
• Memory: MC (clear), MR (recall), MS (store), M+ (add)

Scientific Calculator

Navigate to /calculators/scientific for advanced operations:

• All Basic Functions: Includes all basic calculator features
• Scientific Functions: √x, x², xʸ, sin, cos, tan
• Constants: π (pi), e (Euler's number)
• Advanced Operations: Logarithms, trigonometric functions

Calculator Behavior

• Operation Chaining: Enter number → operation → number → equals
• Continuous Operations: 5 + 3 × 2 = calculates step by step
• Memory Independence: Memory operations work alongside arithmetic
• Error Handling: Displays "Error" for invalid operations

🏗️ Project Structure

src/
├── app/                     # Next.js App Router
│   ├── page.tsx            # Homepage
│   └── calculators/
│       ├── basic/          # Basic calculator page
│       └── scientific/     # Scientific calculator page
│
├── components/             # React Components
│   ├── ui/                # Base UI components
│   │   ├── Button.tsx     # Calculator button component
│   │   ├── Display.tsx    # Calculator display
│   │   └── Layout.tsx     # Calculator layout
│   └── calculators/       # Calculator-specific components
│       ├── BasicCalculator.tsx
│       └── ScientificCalculator.tsx
│
├── core/                  # Core Business Logic
│   ├── interfaces/        # TypeScript interfaces
│   ├── patterns/          # Design pattern implementations
│   │   ├── factories/     # Factory patterns
│   │   ├── strategies/    # Strategy pattern
│   │   ├── commands/      # Command pattern
│   │   ├── observers/     # Observer pattern
│   │   └── singletons/    # Singleton pattern
│   └── models/           # Data models
│
├── calculators/          # Calculator implementations
│   ├── BasicCalculator.ts
│   └── ScientificCalculator.ts
│
├── hooks/               # Custom React hooks
│   └── useCalculator.ts # Main calculator hook
│
└── types/              # TypeScript type definitions
    └── calculator.types.ts

🎨 Design Patterns Implemented

1. Factory Pattern

Creates calculator instances based on type (Basic, Scientific)

2. Strategy Pattern

Different calculation algorithms for various operation types

3. Command Pattern

Encapsulates operations for undo/redo functionality

4. Observer Pattern

Manages state changes and UI updates across components

5. Singleton Pattern

History manager maintains global calculation history

6. Builder Pattern

Constructs complex calculation chains and UI configurations

🔧 SOLID Principles

• Single Responsibility: Each class/component has one clear purpose
• Open/Closed: Easy to extend with new calculator types without modifying existing code
• Liskov Substitution: All calculators implement the same interface contract
• Interface Segregation: Separate interfaces for different calculator capabilities
• Dependency Inversion: Components depend on abstractions, not concrete implementations

🧪 Development Features

Code Quality

• TypeScript Strict Mode: Full type safety with strict compiler options
• ESLint Configuration: Comprehensive linting rules for code quality
• Component Architecture: Reusable, composable React components
• Custom Hooks: Clean separation of business logic and UI

State Management

• React Hooks: Modern state management with useState and useCallback
• Custom Hooks: Encapsulated calculator logic in useCalculator hook
• Immutable State: Proper state updates following React best practices

📈 Future Enhancements (Phase 4 & 5)

• Currency Calculator: Real-time currency conversion with live rates
• Unit Converter: Length, weight, temperature conversions
• Programmer Calculator: Binary, hexadecimal, octal operations
• Statistics Calculator: Mean, median, standard deviation
• Comprehensive Testing: Unit, integration, and E2E tests
• Performance Optimization: Advanced memoization and lazy loading

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

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

🎓 Educational Value

This project serves as an excellent example of:

• Modern React Development with Next.js and TypeScript
• Object-Oriented Programming principles in JavaScript/TypeScript
• Design Pattern Implementation in real-world applications
• Clean Code Architecture following SOLID principles
• State Management in complex React applications
• Component-Driven Development with reusable UI components

Perfect for developers looking to understand advanced TypeScript patterns, React architecture, and software engineering best practices.

---

Built with ❤️ using Next.js, TypeScript, and Modern React Patterns