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.
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.
- 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
- Basic Calculator: Standard arithmetic operations (+, -, ×, ÷, %)
- Scientific Calculator: Advanced operations (√, x², xʸ, sin, cos, tan, π, e)
- Memory Functions: Complete memory management (MC, MR, MS, M+)
- 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
- 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
Make sure you have the following installed:
- Node.js (version 18 or higher)
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd oop-calculator
-
Install dependencies
npm install # or yarn install -
Start the development server
npm run dev # or yarn dev -
Open your browser Navigate to http://localhost:3000 to see the application.
# Build the application
npm run build
# Start the production server
npm startNavigate 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)
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
- 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
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
Creates calculator instances based on type (Basic, Scientific)
Different calculation algorithms for various operation types
Encapsulates operations for undo/redo functionality
Manages state changes and UI updates across components
History manager maintains global calculation history
Constructs complex calculation chains and UI configurations
- 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
- 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
- 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
- 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
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
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