Attachly | Attachment Style Journal With AI Coach, Mood Charts and Guided Journaling - React

Attachly | AI Relationship Coach and Journal – React App

Attachly is a complete, production-ready relationship wellness app template built with React, Vite, Tailwind CSS and Supabase, wrapped as a native iOS app with Capacitor. Users discover their attachment style, journal their relationship moments, track mood and growth trends with charts, and get AI-powered coaching, daily suggestions and message analysis.

Demo Instructions

Attachly is a connected template: it uses Supabase for authentication, database storage and AI features. There is no hosted demo account and no login credentials included, because every buyer connects the template to their own free Supabase project (a 5-minute setup, guided step by step in the included documentation).

After following the documentation setup you create your own account directly in the app’s Sign Up screen (email + password, no email verification needed). No API keys are hardcoded in the source: the Supabase URL and anon key live in a single .env file with clearly marked placeholders. AI features run through Supabase Edge Functions (source included) and require a free Lovable AI Gateway key or a small one-line change to use any OpenAI-compatible provider.

Important Notice: External AI Services and Costs

Warning: The AI-powered features of this template (AI coach chat, daily suggestions, message analysis and attachment insights) rely on external, third-party AI services such as the Lovable AI Gateway or your own provider (e.g. OpenAI). These services are not operated by the author and are not included in the purchase price – their usage costs are charged separately by the respective provider. If you choose to connect your own AI provider API, you are solely responsible for all usage fees, quota limits and billing associated with that account. The app remains fully functional for journaling, charts, profiles and settings without any AI key.

Everything the App Does

• Email + password authentication – Sign up and sign in screens with Zod form validation and friendly error handling
• Two-step onboarding – Users select their own attachment style, then their partner’s (Anxious, Dismissive Avoidant, Disorganized, Secure, Unknown)
• Attachment style education – Inline help panels with “not sure?” guidance for each style
• Dashboard – Welcome screen with journal stats (entries this month, total entries, current streak), quick actions, daily suggestions, growth trends, AI insights and recent entries
• Guided journaling – Structured entries: What Happened, How I Felt, What I Learned, plus a 5-option emotion picker and 4 growth-quality toggles (Vulnerability, Intimacy, Peacefulness, Honesty)
• Growth trends charts – Mood line chart (1-5 score over time) and stacked bar chart of growth qualities, powered by Recharts, with automatic improving / stable / declining trend detection
• AI daily connection suggestions – Personalized to the partner’s attachment style, cached per day in local storage with a refresh button
• AI attachment insights – One-tap personalized summary with positive patterns and focus areas generated from the user’s recent journal entries
• AI message guide – Users paste their partner’s message and their draft reply; the AI detects unhelpful patterns, offers growth suggestions and rewrites an improved response
• AI coach chat – Full chat interface with an attachment-aware coach, message history persisted per user in the database
• Settings – Change both attachment styles anytime, links to Privacy Policy and Terms of Use, and full account deletion (a secure Edge Function using the Supabase service role key removes all user data and the auth record) for App Store compliance
• Privacy Policy and Terms of Use pages – Built-in, with placeholder publisher identity ready for buyers to customize
• Row Level Security – Every database table is locked to its owner, with full SELECT / INSERT / UPDATE / DELETE policies; complete SQL migrations included
• PWA ready – Manifest, icons and service worker generation via vite-plugin-pwa, plus a native iOS shell via Capacitor
• Polished mobile-first UI – Soft gradient theme, safe-area aware sticky header, loading spinners, empty states, toast notifications and fade-in animations
• Dark mode support – Full dark palette that follows the system setting

Technology

• React 18 + TypeScript + Vite 5
• Tailwind CSS + shadcn/ui (Radix primitives)
• Supabase: Auth, Postgres database, Row Level Security, 5 Edge Functions (4 AI + secure account deletion)
• Recharts for data visualization
• React Router 6, React Query, React Hook Form + Zod
• Capacitor 7 for the native iOS app
• vite-plugin-pwa for installable web app support
• No jQuery, no Bootstrap, no build-breaking dependencies

What the Buyer Gets

• Full source code of the complete app (React + TypeScript)
• iOS Capacitor project, configured and buildable in Xcode
• All Supabase Edge Functions source code (coach-chat, analyze-message, daily-suggestions, journal-insights, delete-account)
• SQL migrations for every table, trigger and RLS policy (including the DELETE policies used by account deletion)
• Step-by-step documentation.html with screenshots: backend setup, configuration, re-theming, renaming, App Store checklist
• All item preview screenshots as JPEG files

Development Disclosure

Portions of this template’s source code were developed with AI-assisted tools. All code has been reviewed, tested and verified by the publisher. The template does not include any third-party licensed assets.

Please note: this is a source code template, not a finished hosted product. You will need Xcode and basic familiarity with React and Supabase to build and publish your own version. The included documentation covers the entire process.