Attune

Attune is a polished mindfulness application built with React Native, featuring secure authentication, an AI-driven voice interface, seamless session persistence, and fluid, high-performance animations.

Demo

Click me 👆

Features

• Secure Authentication: Seamless sign-in/up via Clerk (Google/Apple SSO).
• AI-Powered Conversations: Interactive voice agent powered by ElevenLabs for distinct, natural dialogue.
• Immersive Visuals: Dynamic, state-driven background animations using Skia & Reanimated.
• Session Tracking: Persistent meditation history stored securely via Appwrite.

Development Highlights

• Architecture: Leveraged Expo Router for robust navigation handling public vs. protected routes.
• High-Performance UI: Implemented complex Skia shaders and Reanimated shared values for 60fps background effects.
• AI & Device Control: Integrated speech-to-intent capabilities allowing the AI agent to control device hardware (e.g., screen brightness).
• Backend Integration: Utilized Appwrite for scalable database operations and real-time data needs.

Tech Stack

• Expo / React Native
• Clerk (Auth)
• React Native Skia
• Reanimated
• ElevenLabs
• Expo Brightness
• Appwrite

Setup

Please create .env.local file at root and set relevant values before continuing

EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=value1
EXPO_PUBLIC_AGENT_ID=value2
EXPO_PUBLIC_BASE_URL=value3
ELEVENLABS_BASE_URL=value4
ELEVENLABS_API_KEY=value5
EXPO_PUBLIC_APPWRITE_APP_ID=value6
EXPO_PUBLIC_APPWRITE_ENDPOINT=value7

yarn install

# Android
npx expo prebuild --platform android --clean
cd android && ./gradlew clean && cd ..
adb uninstall com.hassanarifmahmood.attune
yarn android

# iOS
npx expo prebuild --platform ios --clean
yarn ios

Release

Server

eas login
npx expo export --platform web --no-ssg
eas deploy # copy deployed server origin and adjust it in app.json after this step

Client (Android)

cd android
./gradlew app:assembleRelease
# or
./gradlew app:bundleRelease

Credits

Initial setup inspired by Code with Beto.