📁 Read and Tip System - Architecture

The read and tips project is a complete Web3 Dapp consisting of two main components:

• Backend: Smart Contract trên Stacks Blockchain (Clarity)
• Frontend: React App với Tailwind CSS

---

Architecture

┌─────────────────────────────────────────────────────────┐
│                    Frontend (React + Tailwind)           │
│  (tip-system-frontend/)                                 │
│  - Connect Wallet (Hiro)                                │
│  - Display Articles                                     │
│  - Send Tips via Smart Contract                         │
│  - Query Blockchain via Hiro API                        │
└──────────────┬──────────────────────────────────────────┘
               │
               │ HTTPS + Hiro API Calls
               │ JSON-RPC Calls
               │
┌──────────────▼──────────────────────────────────────────┐
│              Hiro API (Indexer)                          │
│  https://api.testnet.hiro.so                            │
│  - Call read-only functions                             │
│  - Broadcast transactions                               │
│  - Query blockchain state                               │
└──────────────┬──────────────────────────────────────────┘
               │
               │ Blockchain RPC Calls
               │
┌──────────────▼──────────────────────────────────────────┐
│         Stacks Blockchain (Testnet)                      │
│                                                          │
│  ┌──────────────────────────────────┐                   │
│  │  Smart Contract: tip-system      │                   │
│  │  (contracts/tip-system.clar)     │                   │
│  │                                  │                   │
│  │  Maps:                           │                   │
│  │  - tips-per-article              │                   │
│  │  - tip-history                   │                   │
│  │                                  │                   │
│  │  Functions:                      │                   │
│  │  - tip-article (public)          │                   │
│  │  - get-article-tips (read-only)  │                   │
│  │  - get-tipper-amount (read-only) │                   │
│  └──────────────────────────────────┘                   │
└─────────────────────────────────────────────────────────┘