🏗️ Project Architecture – Hermes GUI

This document outlines the folder structure and key components of the Hermes GUI project.

---

📁 Directory Structure

gui/
├── src/
│   ├── components/   # Reusable UI components (buttons, inputs, cards)
│   ├── pages/        # Top-level application views/pages
│   ├── assets/       # Static resources (images, icons, etc.)
│   ├── App.tsx       # Root application component
│   └── main.tsx      # Entry point for React + Ionic app
├── public/           # Public files served directly
├── index.html        # HTML template
├── vite.config.ts    # Vite configuration
├── tailwind.config.js# Tailwind CSS setup
└── package.json      # Project dependencies and scripts

---

🧩 Technologies Used

• Ionic Framework – UI components and mobile support
• React – Component-based frontend library
• TypeScript – Typed superset of JavaScript
• Tailwind CSS – Utility-first styling
• Vite – Lightning-fast build tool

---

🛠️ Main Scripts

• npm run dev – Start development server
• npm run build – Create optimized production build
• npm run preview – Preview the production build locally