A full-stack calculator application built with Laravel 12, Vue 3, and Inertia.js. Features a responsive calculator UI with expression chaining, calculation history with a ticker-tape display, and keyboard input support.
- Backend: Laravel 12, PHP 8.5
- Frontend: Vue 3 (Composition API), Inertia.js, Tailwind CSS
- Math Engine: mossadal/math-parser
- Testing: Pest PHP
- Dev Environment: Laravel Sail (Docker)
- Basic arithmetic:
+,-,*,/ - Exponentiation (
^) and square root (sqrt) - Nested parentheses
- Expression chaining from previous results
- Persistent calculation history with delete and clear all
- Keyboard input support
- Optimistic UI updates
- Docker and Docker Compose
# Clone the repo git clone <repo-url> && cd fullstack-calc # Copy environment file cp .env.example .env # Install PHP dependencies docker run --rm \ -u "$(id -u):$(id -g)" \ -v "$(pwd):/var/www/html" \ -w /var/www/html \ laravelsail/php85-composer:latest \ composer install --ignore-platform-reqs # Start the containers ./vendor/bin/sail up -d # Generate app key ./vendor/bin/sail artisan key:generate # Run database migrations ./vendor/bin/sail artisan migrate # Install frontend dependencies and build ./vendor/bin/sail npm install ./vendor/bin/sail npm run buildThe app will be available at http://localhost.
For development with hot-reload:
./vendor/bin/sail npm run devRequires PHP 8.5, Composer, Node 22+, and SQLite.
composer install cp .env.example .env php artisan key:generateUpdate .env for SQLite:
DB_CONNECTION=sqlite touch database/database.sqlite php artisan migrate npm install npm run dev php artisan serveThe app will be available at http://localhost:8000.
# With Sail ./vendor/bin/sail artisan test # Without Sail (uses SQLite in-memory via phpunit.xml) php artisan test| Key | Action |
|---|---|
0-9, . | Input digits |
+, -, *, /, ^ | Operators |
(, ) | Parentheses |
Enter or = | Evaluate |
Backspace | Delete last character |
Escape or C | Clear |
app/ Actions/ # Business logic (EvaluateExpression, GetCalculationHistory, etc.) Http/Controllers/ # CalculatorController (thin, delegates to Actions) Models/ # Calculation model resources/js/ Components/Calculator/ # CalculatorShell, Display, Keypad, Button, TickerTape Composables/ # useCalculator, useHistory Pages/Calculator/ # Index.vue (main page) tests/ Unit/ # Action tests (14 tests) Feature/ # Controller endpoint tests (7 tests) MIT