web-app/docs/00-overview/index.md

📖 Overview

Welcome to the Ario Web Application - A modular Vue 3 + TypeScript application with Nostr protocol integration and Lightning Network payments.

Table of Contents

• #What is Ario?
• #Key Features
• #Technology Stack
• #Quick Start
• #Documentation Navigation

What is Ario?

Ario is a decentralized social and marketplace application built on the Nostr protocol with Lightning Network integration. It provides users with:

• Decentralized Social Networking - Connect through the Nostr protocol
• Lightning Payments - Instant, low-fee Bitcoin payments
• Event Ticketing - Create and manage events with Lightning payments
• Encrypted Messaging - Private, secure communications
• Marketplace Functionality - Buy and sell goods using Lightning Network

Key Features

🔒 Privacy-First Architecture

• No central servers storing user data
• Nostr protocol ensures user sovereignty
• Client-side key management with secure encryption

⚡ Lightning Network Integration

• Instant Bitcoin payments for events and marketplace
• Low transaction fees
• Invoice generation and payment tracking

🏗️ Modular Architecture

• Plugin-based module system
• Dependency injection for service management
• Clean separation of concerns
• Easy to extend and maintain

📱 Multi-Platform Support

• Progressive Web App (PWA) capabilities
• Electron desktop application
• Responsive design for mobile and desktop

🌍 Internationalization

• Multi-language support with Vue-i18n
• Theme switching (light/dark modes)
• Accessibility-focused design

Technology Stack

Frontend Core

• Vue 3 with Composition API and <script setup>
• TypeScript throughout for type safety
• Vite for fast development and optimized builds
• TailwindCSS v4 with Shadcn/ui components

State Management & Routing

• Pinia for reactive state management
• Vue Router for navigation
• Vue-i18n for internationalization

Nostr & Lightning

• Nostr-tools for protocol implementation
• WebLN for Lightning Network browser integration
• QR Code generation for Lightning invoices

Desktop & PWA

• Electron for desktop application packaging
• Vite PWA Plugin for Progressive Web App features
• Service Worker for offline capabilities

Quick Start

Prerequisites

• Node.js 18+ and npm
• Basic knowledge of Vue 3 and TypeScript

Development Setup

# Navigate to the web app directory
cd web-app/

# Install dependencies
npm install

# Start development server
npm run dev

# For Electron development
npm run electron:dev

Environment Configuration

# Copy environment template
cp .env.example .env

# Configure Nostr relays
VITE_NOSTR_RELAYS='["wss://relay1.example.com","wss://relay2.example.com"]'

# Configure admin pubkeys for announcements
VITE_ADMIN_PUBKEYS='["hexadecimal_pubkey_1","hexadecimal_pubkey_2"]'

Documentation Navigation

Essential Reading (Start Here)

1. getting-started - Detailed setup instructions
2. project-goals - Vision and objectives
3. tech-stack - Detailed technology overview

Architecture & Development

• ../01-architecture/index - System design patterns
• ../04-development/index - Coding standards and workflows

Feature Modules

• ../02-modules/index - Feature module documentation
• ../03-core-services/index - Shared infrastructure services

Integration & Deployment

• ../05-api-reference/index - External integrations
• ../06-deployment/index - Production deployment guide

See Also

• ../01-architecture/modular-design - Understanding the plugin system
• ../04-development/coding-standards - Code quality guidelines
• ../02-modules/base-module/index - Core infrastructure documentation

---

Tags: #overview #introduction #getting-started
Last Updated: 2025-09-06
Author: Development Team