Myndscape is a beautiful minimalistic mobile journaling app designed to help you gain mental clarity, build self-awareness, and track your emotional well-being. Built using React Native, Expo, and Supabase, it features a calm, glassy UI with secure authentication and real-time storage.
- 🧘♀️ Daily Mood Tracking – Reflect on moods like anxious, excited, tired, and more.
- 📓 Journaling – Write daily entries to process your thoughts, feelings, and progress.
- 🧠 Wellness-Themed Colors – Soothing dark theme with emotion-based palettes.
- 🔒 Auth via Supabase – Secure email-based login and session management.
- 🖼 Avatar Uploads – Clean glass UI with avatar upload to Supabase Storage.
- 🔍 Blurred Cards & UI – Native glassmorphism using
expo-blurandreact-native. - ⚛️ Built using React Native + Expo Router
| Login |
| 
|
| Tech | Purpose |
|---|---|
| Expo | App scaffolding, build, and deployment |
| React Native | Core framework for native UI |
| Expo Router | File-based routing system |
| Supabase | Backend as a service (Auth, DB, Storage) |
| Expo Blur | Glass UI / blur effects |
| clsx | Utility for conditional styling |
git clone https://github.com/damygoes/myndscape.git
cd myndscapenpm installCreate a .env file in the root:
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-keynpx expo startThen scan the QR code using your device, or use Android/iOS simulator.
.
├── README.md
├── app.config.ts
├── app.json
├── assets
│ ├── adaptive-icon.png
│ ├── animations
│ │ ├── 404.json
│ │ ├── error.json
│ │ └── loading.json
│ ├── favicon.png
│ ├── fonts
│ │ └── SpaceMono-Regular.ttf
│ ├── icon-transparent.png
│ ├── icon.png
│ ├── images
│ │ ├── hero-1.jpg
│ │ ├── hero-2.jpg
│ │ └── hero-3.jpg
│ └── splash-icon.png
├── babel.config.js
├── eas.json
├── expo-env.d.ts
├── global.css
├── metro.config.js
├── nativewind-env.d.ts
├── package-lock.json
├── package.json
├── polyfills.ts
├── screenshots
│ ├── add-journal.png
│ ├── edit-journal.png
│ ├── history.png
│ ├── home.png
│ ├── login.png
│ └── profile.png
├── src
│ ├── app
│ │ ├── (tabs)
│ │ │ ├── _layout.tsx
│ │ │ ├── history
│ │ │ │ ├── _layout.tsx
│ │ │ │ ├── add-entry.tsx
│ │ │ │ ├── edit-entry
│ │ │ │ │ └── [id].tsx
│ │ │ │ ├── entry-details
│ │ │ │ │ └── [id].tsx
│ │ │ │ └── index.tsx
│ │ │ ├── index.tsx
│ │ │ └── profile
│ │ │ ├── _layout.tsx
│ │ │ ├── edit-profile.tsx
│ │ │ └── index.tsx
│ │ ├── +not-found.tsx
│ │ ├── _layout.tsx
│ │ └── login.tsx
│ ├── components
│ │ ├── EmptyState.tsx
│ │ ├── ErrorState.tsx
│ │ ├── HapticTab.tsx
│ │ ├── LoadingState.tsx
│ │ ├── ParallaxScrollView.tsx
│ │ ├── SplashScreen.tsx
│ │ ├── ThemedCard.tsx
│ │ ├── ThemedText.tsx
│ │ ├── ThemedView.tsx
│ │ ├── card
│ │ │ ├── Card.tsx
│ │ │ └── GlassCard.tsx
│ │ ├── floating-button
│ │ │ └── FloatingButton.tsx
│ │ ├── layouts
│ │ │ ├── RootLayoutContent.tsx
│ │ │ ├── SafeScrollView.tsx
│ │ │ └── ThemedSafeAreaView.tsx
│ │ ├── tab-bar
│ │ │ ├── HapticTab.tsx
│ │ │ ├── TabBar.tsx
│ │ │ ├── TabBarBackground.tsx
│ │ │ └── TabBarButton.tsx
│ │ └── ui
│ │ ├── IconSymbol.ios.tsx
│ │ ├── IconSymbol.tsx
│ │ ├── LottieAnimation.tsx
│ │ ├── LottieTest.tsx
│ │ └── TabBarBackground.tsx
│ ├── constants
│ │ └── colors.ts
│ ├── features
│ │ ├── auth
│ │ │ ├── components
│ │ │ │ ├── LoginForm.tsx
│ │ │ │ └── LogoutButton.tsx
│ │ │ └── hooks
│ │ │ ├── useAuthActions.ts
│ │ │ └── useDeepLinkSession.ts
│ │ ├── dashboard
│ │ │ ├── components
│ │ │ │ ├── AiInsights.tsx
│ │ │ │ ├── DashboardSection.tsx
│ │ │ │ ├── LastEntrySummary.tsx
│ │ │ │ ├── MoodPrompt.tsx
│ │ │ │ ├── QuickStats.tsx
│ │ │ │ └── TipCard.tsx
│ │ │ └── utils
│ │ │ ├── analyzeEntries.ts
│ │ │ ├── generateMoodTipMessage.ts
│ │ │ └── getTipForMood.ts
│ │ ├── journal-entries
│ │ │ ├── api
│ │ │ │ └── callAnalyzeEntryFunction.ts
│ │ │ ├── components
│ │ │ │ ├── EditJournalEntry.tsx
│ │ │ │ ├── EditJournalModal.tsx
│ │ │ │ ├── JournalEntries.tsx
│ │ │ │ └── JournalEntryList.tsx
│ │ │ ├── hooks
│ │ │ │ ├── useCreateJournalEntry.ts
│ │ │ │ ├── useCurrentUserEntries.ts
│ │ │ │ ├── useDeleteJournalEntry.ts
│ │ │ │ ├── useHandleJournalEntryCreation.ts
│ │ │ │ ├── useJournalEntries.ts
│ │ │ │ ├── useJournalEntryById.ts
│ │ │ │ └── useUpdateJournalEntry.ts
│ │ │ ├── journal-entry-item
│ │ │ │ ├── components
│ │ │ │ │ ├── JournalEntryActions.tsx
│ │ │ │ │ ├── JournalEntryAnalysisSection.tsx
│ │ │ │ │ ├── JournalEntryContent.tsx
│ │ │ │ │ ├── JournalEntryItem.tsx
│ │ │ │ │ ├── MoodBadge.tsx
│ │ │ │ │ ├── ThemeBadge.tsx
│ │ │ │ │ ├── ThemesBadges.tsx
│ │ │ │ │ └── TipSection.tsx
│ │ │ │ ├── constants.ts
│ │ │ │ └── utils.ts
│ │ │ ├── store
│ │ │ │ ├── useJournalEntriesStore.ts
│ │ │ │ └── useJournalEntryAnalysisStore.ts
│ │ │ └── types.ts
│ │ ├── profile
│ │ │ ├── components
│ │ │ │ ├── ProfileAvatar.tsx
│ │ │ │ ├── ProfileDetails.tsx
│ │ │ │ ├── ProfileDetailsWithForm.tsx
│ │ │ │ └── ProfileForm.tsx
│ │ │ ├── hooks
│ │ │ │ ├── useUpdateUserProfile.ts
│ │ │ │ └── useUserProfile.ts
│ │ │ └── utils
│ │ │ └── renderField.tsx
│ │ └── user
│ │ ├── hooks
│ │ │ └── useCurrentUserProfile.ts
│ │ ├── store
│ │ │ └── userStore.ts
│ │ └── types.ts
│ ├── hooks
│ │ ├── useColorScheme.ts
│ │ ├── useColorScheme.web.ts
│ │ ├── useDebounce.ts
│ │ └── useThemeColor.ts
│ ├── lib
│ │ └── queryKeys.ts
│ ├── scripts
│ │ └── seedDatabase.ts
│ ├── services
│ │ ├── SupabaseAuthProvider.tsx
│ │ └── supabase.ts
│ └── utils
│ ├── clsx.ts
│ └── moodUtils.ts
├── supabase
│ ├── config.toml
│ └── functions
│ └── analyzeEntry
│ ├── deno.json
│ └── index.ts
├── tailwind.config.js
└── tsconfig.json-
expo, react-native, expo-router
-
@supabase/supabase-js
-
expo-blur, expo-image-picker
-
clsx for conditional class merging
-
@expo/vector-icons for consistent icons
You can build the app with Expo:
npx expo build:android
npx expo build:iosOr use EAS Build for advanced workflows.
If you'd like to contribute:
-
Fork this repo
-
Create a new branch: git checkout -b feature/feature-name
-
Commit your changes
-
Push your branch: git push origin feature/feature-name
-
Submit a Pull Request
MIT License © 2025 Damilola Bada
-
Supabase
-
Expo
-
GitHub Primer
-
Inspiration from wellness UI kits and Apple’s glass design aesthetics