Kanso | Visual Journal and Portfolio Maker With Block Editor, QR Sharing and PDF Export - React

Kanso – Visual Journal and Portfolio Maker for iOS

Kanso is a beautifully minimal iOS app template for creating visual journals, portfolios and stories made of text and image blocks – then sharing them with the world through QR codes, public links and PDF exports. It ships as complete, ready-to-build source code for React, Vite, Tailwind CSS and Capacitor (iOS).

Demo Instructions

• There is no locked demo account and no demo password. The app has its own registration flow: install, tap Enter, enter any email and a password (min. 6 characters) and a new account is created automatically. If the email already exists you will be asked for the correct password.
• IMPORTANT: Kanso uses Firebase (Authentication + Firestore) for accounts and cloud sync. Before the app can run, you must create your own free Firebase project and insert your credentials in one file (src/firebase.js). A step-by-step Configuration guide with screenshots is included in documentation.html. The template ships with PLACEHOLDER values so no private keys are included.
• WARNING – EXTERNAL SERVICE AND COSTS: Firebase is a third-party external service provided by Google, not part of this template. Using it requires your own Firebase/Google account, and you agree to Firebase’s terms. While Firebase offers a free tier, usage beyond the free quotas (or Firebase’s pricing changes) can result in costs billed directly to you by Google. These costs are separate from and in addition to the purchase price of this item. Please review https://firebase.google.com/pricing before purchasing.
• Public share links point to a Firebase Hosting URL that you deploy yourself with the included firebase.json configuration (one command: firebase deploy).

Everything the App Does

• Welcome screen with minimal serif branding
• Email and password authentication – auto-registers new users, logs in existing ones (Firebase Auth SDK)
• Home screen with two tabs: My Studios (your creations) and Visited (saved from other creators)
• Tiles and List view modes with animated expandable list rows
• Sorting by creation date, name and last updated
• Block-based editor: unlimited text blocks and image blocks
• Drag handles to resize image height and text font size live
• Insert blocks between existing blocks with animated insert zones
• Organize mode: drag and drop reordering, move to top/bottom, convert block to spacer, delete block
• Invisible spacer blocks for artistic layout control
• Revert action with full Undo Revert (redo) support
• Preview mode (read-only render of the story)
• Mark Complete mode to freeze a project as finished
• Optional metadata: creator name, date or date range, subtitle (long-press the title)
• Automatic autosave with debounced cloud sync to Firestore
• Cover images: pick from photo library (native Capacitor Camera), covers fall back to the first image block
• Long-press context menus with haptic feedback (share, PDF export, edit cover, remove)
• Share screen: scannable QR code (tap to save to photo library or share), copy link, native share sheet
• Allow Resharing privacy toggle per project
• PDF export: pixel-perfect A4 rendering of the whole story, multi-page, shared natively or downloaded
• Public read-only web view of every shared project (Firebase Hosting + /p/ rewrite)
• Save to Collection from the public view (requires login, deep-links back into the app)
• Temporary 24h links with expiry badge and automatic cleanup
• Smart app banner on the web view guiding visitors to open the project in the app
• Profile bottom sheet with avatar upload, alias editing and account menu
• 6 hand-tuned neumorphic themes: Stone, Mono, Midnight, Snow, Sand and Blush – one-file change to re-skin
• Account settings: change alias, change password, change email (Firebase Auth SDK)
• Recently Deleted / Recently Removed trash with 48h countdown, recover and permanent delete
• Full account deletion flow with identity verification step
• Toast notifications, empty states and subtle animations throughout
• Status bar and body background adapt to the active theme

Technology

• React 18 – UI framework
• Vite 5 – build tooling
• Tailwind CSS 3 – styling, custom neumorphic design system
• Capacitor 6 – native iOS shell and Camera plugin
• Firebase Auth SDK – email and password authentication (every request authenticated with the user’s ID token)
• Cloud Firestore SDK – projects, visited collections and profiles, protected by strict owner-scoped security rules (firestore.rules included)
• Firebase Hosting – public share links and Apple App Site Association
• html2canvas + jsPDF – PDF export
• qrcode.react – QR code generation
• lucide-react – icon set
• Minimum iOS deployment target: 17.0

What the Buyer Gets

• Full source code of the web app (React / Vite / Tailwind)
• Ready-to-build Capacitor iOS project (Xcode workspace with CocoaPods)
• App icon and splash assets
• documentation.html – step-by-step setup guide with screenshots: install, Firebase configuration, run in simulator, change bundle ID and app name, re-skin the theme, customize, submit to the App Store
• Screenshots folder and preview archive

Development Disclosure

Portions of this template’s source code were developed with AI-assisted tools. All code has been reviewed, tested and documented by the author.

A Note Before You Buy

This is a source code template, not a compiled app. You will need Xcode, Node.js and basic command line knowledge to build and customize it. Please read the documentation before purchasing and ask any questions via the item comments.