Miaoda Application Link URL URL:https://medo.dev/projects/app-801hz9600npd

StampForm is a comprehensive web-based document writing application designed specifically for users in Pakistan. It provides a powerful rich text editor, extensive template library in both Urdu and English, secure private vault storage, and PDF export functionality with proper e-Stamp formatting.

• Modern Tiptap-powered editor with full formatting capabilities
• Support for bold, italic, underline, lists, and text alignment
• Right-to-Left (RTL) text direction for Urdu
• Urdu-friendly fonts (Noto Nastaliq Urdu)
• Undo/Redo functionality
• Auto-save feature

• 9+ pre-built application templates (expandable)
• Categories include:
  • Education (Leave applications, Fee concession)
  • Government (CNIC applications)
  • HR/Job (Job applications, Resignation letters)
  • Legal (Affidavits)
  • Banking (Account opening)
  • Certificates/NOC
  • Personal (Character certificates)
• Keyword-based search in both Urdu and English
• Category filtering system
• Template preview before editing

• Secure document storage with PIN protection
• AES encryption for sensitive documents
• Document management: Add, Edit, Delete, Rename
• Offline storage using localStorage
• No cloud sync required (data stays local)

• HTML to PDF conversion with Urdu font support
• Adjustable top margin for e-Stamp placement
• Landscape/Portrait mode options
• Direct printing from application
• Download PDF functionality
• Clean layout formatting

• Dark/Light mode toggle
• Urdu/English language selection
• Font size adjustments
• Backup/Restore functionality
• User interface customization

• Frontend Framework: React 18 + TypeScript
• Build Tool: Vite
• UI Components: shadcn/ui + Radix UI
• Styling: Tailwind CSS
• Rich Text Editor: Tiptap
• PDF Generation: jsPDF + html2canvas
• Encryption: Web Crypto API
• State Management: React Context + Hooks
• Routing: React Router v7
• Icons: Lucide React
• Notifications: Sonner

├── src/
│   ├── components/
│   │   ├── editor/
│   │   │   └── RichTextEditor.tsx    # Tiptap editor component
│   │   └── ui/                        # shadcn/ui components
│   ├── contexts/
│   │   └── AppContext.tsx             # Global app state
│   ├── pages/
│   │   ├── Home.tsx                   # Dashboard with categories
│   │   ├── Templates.tsx              # Template library
│   │   ├── Editor.tsx                 # Document editor
│   │   ├── Vault.tsx                  # Secure vault
│   │   └── Settings.tsx               # App settings
│   ├── services/
│   │   ├── storage.service.ts         # localStorage management
│   │   ├── encryption.service.ts      # AES encryption
│   │   ├── templates.service.ts       # Template data
│   │   └── pdf.service.ts             # PDF generation
│   ├── types/
│   │   └── index.ts                   # TypeScript interfaces
│   ├── App.tsx                        # Main app component
│   ├── routes.tsx                     # Route configuration
│   └── index.css                      # Global styles + design system

• Node.js ≥ 20
• npm ≥ 10 or pnpm

1. Clone or download the project
2. Navigate to the project directory
3. Install dependencies:

npm install
# or
pnpm install

Start the development server:

npm run dev -- --host 127.0.0.1
# or
npx vite --host 127.0.0.1

The application will be available at http://127.0.0.1:5173

Build for production:

npm run build

Check code quality:

npm run lint

1. From Template:

   • Navigate to the home page
   • Select a category or browse all templates
   • Click on a template to open it in the editor
   • Customize the content as needed

2. From Scratch:

   • Click "Create New Document" on the home page
   • Start typing in the editor
   • Use the toolbar for formatting

• Auto-save: Documents are automatically saved every 30 seconds
• Save to Vault: Click the "Save to Vault" button to store securely
• Export as PDF: Click the "PDF" button to download

1. Set up a PIN on first access (minimum 4 digits)
2. Enter PIN to unlock vault
3. View, edit, rename, or delete stored documents
4. Lock vault when done

• Go to Settings
• Select your preferred language (English/Urdu)
• The entire interface will switch languages

1. Go to Settings
2. Click "Export Data" to download a backup JSON file
3. Click "Import Data" to restore from a backup file

The application uses a Pakistan-themed color palette:

• Primary: Green (#01411C) - representing Pakistan's flag
• Background: White/Dark gray (theme-dependent)
• Accents: Complementary greens and blues

• English: System fonts (Arial, sans-serif)
• Urdu: Noto Nastaliq Urdu (loaded from Google Fonts)

• Mobile-first approach
• Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
• Fully responsive on all screen sizes

• PIN Protection: SHA-256 hashed PINs
• Document Encryption: AES-256-GCM encryption
• Local Storage: All data stored locally (no server transmission)
• No Tracking: Completely offline-capable

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)

• More templates (target: 200+)
• Cloud sync option
• Template marketplace
• Custom template creation
• Multi-language support (beyond Urdu/English)
• Mobile app version

This project is proprietary software.

For issues or questions, please contact the development team.

Made with ❤️ for Pakistan