Attachly | AI Relationship Coach and Journal – React App
Attachly is an entire, production-ready relationship wellness app template constructed with React, Vite, Tailwind CSS and Supabase, wrapped as a local iOS app with Capacitor. Customers uncover their attachment model, journal their relationship moments, observe temper and development tendencies with charts, and get AI-powered teaching, day by day recommendations and message evaluation.
Demo Directions
Attachly is a related template: it makes use of Supabase for authentication, database storage and AI options. There isn’t any hosted demo account and no login credentials included, as a result of each purchaser connects the template to their very own free Supabase venture (a 5-minute setup, guided step-by-step within the included documentation).
After following the documentation setup you create your individual account immediately within the app’s Signal Up display (e mail + password, no e mail verification wanted). No API keys are hardcoded within the supply: the Supabase URL and anon key stay in a single .env file with clearly marked placeholders. AI options run via Supabase Edge Capabilities (supply included) and require a free Lovable AI Gateway key or a small one-line change to make use of any OpenAI-compatible supplier.
Necessary Discover: Exterior AI Providers and Prices
Warning: The AI-powered options of this template (AI coach chat, day by day recommendations, message evaluation and attachment insights) depend on exterior, third-party AI companies such because the Lovable AI Gateway or your individual supplier (e.g. OpenAI). These companies should not operated by the creator and are not included within the buy value – their utilization prices are charged individually by the respective supplier. Should you select to attach your individual AI supplier API, you might be solely liable for all utilization charges, quota limits and billing related to that account. The app stays totally purposeful for journaling, charts, profiles and settings with none AI key.
Every part the App Does
- Electronic mail + password authentication – Enroll and check in screens with Zod type validation and pleasant error dealing with
- Two-step onboarding – Customers choose their very own attachment model, then their accomplice’s (Anxious, Dismissive Avoidant, Disorganized, Safe, Unknown)
- Attachment model schooling – Inline assist panels with “unsure?” steering for every model
- Dashboard – Welcome display with journal stats (entries this month, whole entries, present streak), fast actions, day by day recommendations, development tendencies, AI insights and up to date entries
- Guided journaling – Structured entries: What Occurred, How I Felt, What I Realized, plus a 5-option emotion picker and 4 growth-quality toggles (Vulnerability, Intimacy, Peacefulness, Honesty)
- Development tendencies charts – Temper line chart (1-5 rating over time) and stacked bar chart of development qualities, powered by Recharts, with computerized bettering / steady / declining pattern detection
- AI day by day connection recommendations – Personalised to the accomplice’s attachment model, cached per day in native storage with a refresh button
- AI attachment insights – One-tap customized abstract with constructive patterns and focus areas generated from the consumer’s current journal entries
- AI message information – Customers paste their accomplice’s message and their draft reply; the AI detects unhelpful patterns, affords development recommendations and rewrites an improved response
- AI coach chat – Full chat interface with an attachment-aware coach, message historical past persevered per consumer within the database
- Settings – Change each attachment types anytime, hyperlinks to Privateness Coverage and Phrases of Use, and full account deletion (a safe Edge Operate utilizing the Supabase service position key removes all consumer information and the auth document) for App Retailer compliance
- Privateness Coverage and Phrases of Use pages – Constructed-in, with placeholder writer identification prepared for patrons to customise
- Row Stage Safety – Each database desk is locked to its proprietor, with full SELECT / INSERT / UPDATE / DELETE insurance policies; full SQL migrations included
- PWA prepared – Manifest, icons and repair employee technology by way of vite-plugin-pwa, plus a local iOS shell by way of Capacitor
- Polished mobile-first UI – Comfortable gradient theme, safe-area conscious sticky header, loading spinners, empty states, toast notifications and fade-in animations
- Darkish mode assist – Full darkish palette that follows the system setting
Expertise
- React 18 + TypeScript + Vite 5
- Tailwind CSS + shadcn/ui (Radix primitives)
- Supabase: Auth, Postgres database, Row Stage Safety, 5 Edge Capabilities (4 AI + safe account deletion)
- Recharts for information visualization
- React Router 6, React Question, React Hook Type + Zod
- Capacitor 7 for the native iOS app
- vite-plugin-pwa for installable net app assist
- No jQuery, no Bootstrap, no build-breaking dependencies
What the Purchaser Will get
- Full supply code of the whole app (React + TypeScript)
- iOS Capacitor venture, configured and buildable in Xcode
- All Supabase Edge Capabilities supply code (coach-chat, analyze-message, daily-suggestions, journal-insights, delete-account)
- SQL migrations for each desk, set off and RLS coverage (together with the DELETE insurance policies utilized by account deletion)
- Step-by-step documentation.html with screenshots: backend setup, configuration, re-theming, renaming, App Retailer guidelines
- All merchandise preview screenshots as JPEG information
Improvement Disclosure
Parts of this template’s supply code have been developed with AI-assisted instruments. All code has been reviewed, examined and verified by the writer. The template doesn’t embrace any third-party licensed belongings.
Please observe: it is a supply code template, not a completed hosted product. You have to Xcode and primary familiarity with React and Supabase to construct and publish your individual model. The included documentation covers your complete course of.
