A modern, premium note-taking application built with React Native and Expo, featuring a sleek dark theme with glassmorphism effects.
Try the app on your Android device!
Note: This is a universal apk binary, the size will be huge. Approx: 100 megabytes. Download APK
- 📱 Cross-Platform: Runs on iOS and Android
- 🎨 Premium UI: Dark theme with glassmorphism effects
- ⚡ Fast & Smooth: 60fps animations with Reanimated
- 🔒 Secure: Password hashing with SHA-256
- 💾 Local-First: MMKV storage for instant access
- 📸 Image Support: Add images from camera or gallery
- 🔍 Search & Sort: Filter notes by text and sort by date/title
- ✏️ Rich Editing: Create, edit, and delete notes
- 🎭 Animations: Smooth transitions and micro-interactions
Note: For some reason the demo seems to indicate that the application gets stuck on sign-in/sign-up screen, this however only impacts the recording. In the actual testing and usage there is no such issue.
Screenrecording_20251123_121540_480.mov
- Node.js 18+ and pnpm
- iOS: Xcode 15+ and CocoaPods
- Android: Android Studio and JDK 17+
- Expo CLI
-
Clone the repository
git clone https://github.com/maranix/aarnote.git cd aarnote -
Install dependencies
pnpm install
-
iOS Setup (Mac only)
cd ios pod install cd ..
-
Start the development server
pnpm start
-
Run on your device
# iOS pnpm ios # Android pnpm android
Comprehensive documentation is available in the /docs directory:
- Architecture - System design and patterns
- Data Flow - Sequence diagrams and data flow
- Components - UI component library
- Dependencies - Third-party packages
- State Management - Zustand stores
- Authentication - Auth flow and security
- Development Guide - Development workflow
aarnote/
├── app/ # Expo Router app directory
│ ├── (app)/ # Authenticated routes
│ │ ├── index.tsx # Home screen
│ │ ├── create-note.tsx
│ │ └── note/[id].tsx
│ ├── (auth)/ # Auth routes
│ │ ├── sign-in.tsx
│ │ └── sign-up.tsx
│ └── _layout.tsx # Root layout
├── src/
│ ├── components/ # Reusable components
│ ├── constants/ # Colors, Layout
│ ├── store/ # Zustand stores
│ └── types/ # TypeScript types
├── assets/ # Images and fonts
└── docs/ # Documentation
- Framework: React Native 0.81.5
- Platform: Expo ~54.0
- Language: TypeScript 5.9.2
- Navigation: Expo Router 6.0
- State: Zustand 5.0.8
- Storage: react-native-mmkv 4.0.1
- Animations: react-native-reanimated 4.1.1
- UI Effects: expo-blur 15.0.7
See Dependencies for full list and rationale.
- User registration with unique usernames
- Secure password hashing (SHA-256)
- Persistent sessions
- Auto-login on app restart
- Create notes with title, content, and optional image
- Edit existing notes
- Delete notes with confirmation
- Search notes by title or content
- Sort by last update or title (ascending/descending)
- Image compression for optimal storage
- Premium dark theme (OLED-friendly)
- Glassmorphism effects
- Smooth animations (60fps)
- Safe area handling
- Responsive design
# Start development server
pnpm start
# Run on iOS simulator
pnpm ios
# Run on Android emulator
pnpm android
# Run linting
pnpm lint
# Type checking
pnpm tsc --noEmit- ESLint: Code linting with Expo config
- Prettier: Code formatting
- TypeScript: Type safety
- Husky: Pre-commit hooks
- lint-staged: Lint only changed files
# Make changes
git add .
# Commit (runs linting automatically)
git commit -m "feat: add new feature"
# Push
git push- Background:
#000000(Pure black for OLED) - Surface:
#1C1C1E,#2C2C2E - Primary:
#0A84FF(iOS blue) - Text:
#ECEDEE
- xs: 4px, sm: 8px, md: 12px, lg: 16px, xl: 24px, xxl: 32px
- Large Title: 34px bold
- Title: 28px bold
- Subtitle: 20px semibold
- Body: 16px regular
- Caption: 12px regular
See Components for full design system.
- Passwords hashed with SHA-256
- MMKV encrypted storage on iOS
- No plain text password storage
- Session management with secure storage
- Storage: MMKV (10-30x faster than AsyncStorage)
- Animations: Reanimated (UI thread, 60fps)
- Bundle Size: Optimized with Expo
- Startup Time: < 2 seconds
Contributions are welcome! Please read the Development Guide first.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Maranix
- GitHub: @maranix
- Expo team for the amazing framework
- React Native community
- All open-source contributors
For issues and questions:
- Open an issue on GitHub
- Check the Documentation
Made with ❤️ using React Native and Expo