Interactive Web Terminal

A retro-styled terminal emulator built with Vanilla JavaScript, engineered to demonstrate Object-Oriented Programming and Clean Architecture principles.

About The Project

This project simulates a Linux-like terminal environment in the browser. Originally conceived as a simple script, it has been completely refactored into a robust, extensible application.

The primary goal of this refactor was to eliminate "spaghetti code" (specifically, a monolithic switch-case statement) and replace it with a modular architecture that adheres to SOLID principles, making it easy to add new commands without modifying existing core logic.

Key Features

• Command-Line Interface: Fully functional CLI with a blinking cursor and typing effects.
• Command History: Navigate through previous commands using Up and Down arrow keys.
• Secret Modes: Hidden commands and password-protected features.
• Responsive Design: Optimized for both desktop and mobile devices.
• Extensible Architecture: New commands can be added by simply creating a new class file.

---

Architecture & Design Decisions

This project implements a simplified version of Clean Architecture to separate concerns between the UI, business logic, and data entities.

1. The Command Pattern (Open/Closed Principle)

Instead of a giant if/else or switch block to handle inputs, I implemented the Command Design Pattern.

• Problem: Adding a new command required modifying the main logic file, violating the Open/Closed Principle.
• Solution: Each command is now a standalone class that extends a base Command class. The Shell simply looks up the command in a registry and executes it.

2. Dependency Injection

The core logic (Shell) and the commands do not depend directly on the global DOM. The UI dependencies are injected, making the system more testable and decoupled.

3. Folder Structure

The codebase is organized by technical responsibility:

src/
├── domain/       # Core business rules (Contracts & Base Classes)
│   └── Command.js
├── core/         # Application Logic (Invoker)
│   └── Shell.js
├── ui/           # Interface Adapter (DOM Manipulation)
│   └── TerminalUI.js
├── commands/     # Concrete Implementations (Use Cases)
│   ├── HelpCommand.js
│   ├── SocialCommand.js
│   └── ...
└── main.js       # Composition Root (Wiring everything together)

4. Vanilla JavaScript (ES Modules)

No frameworks were used. The project leverages native ES6 Modules (import/export) to manage dependencies natively in the browser.

---

How to Run Locally

Since this project uses ES Modules, you cannot simply open the index.html file due to CORS policies. You need a local server.

Prerequisites

• Node.js (optional, for serving) OR Python

Installation

1. Clone the repository

git clone [https://github.com/MateusPersonalProjects/terminal-portfolio.git](https://github.com/MateusPersonalProjects/terminal-portfolio.git)
cd terminal-portfolio

2. Run with Python (simplest method)

# Python 3
python -m http.server 8000

3. Run with Node.js (using http-server or live-server)

npx http-server .

4. Access http://127.0.0.1:8000 in your browser.

---