A beautiful, modern note-taking and finance tracking application built with Tauri, React, and TypeScript. Layered is a simplified Notion/Obsidian clone with essential features, combining markdown note-taking with basic financial management in a sleek, customizable interface.
Note: This is my first Tauri application and my first time working with Rust! It's a learning project that focuses on core functionality rather than feature completeness.
- Markdown Support: Full GitHub Flavored Markdown with live preview
- Tag System: Organize notes with customizable tags
- Real-time Search: Quickly find notes with instant search
- Auto-save: Never lose your work with automatic saving
- File-based Storage: All notes stored as JSON files for portability
- Multi-currency Support: Built with Euro (€) support
- Category Management: Income, Expenses, Investments, and Savings
- Visual Statistics: Beautiful overview cards with totals and net worth
- CSV Export: Export your financial data to Excel/CSV
- Transaction Notes: Add detailed notes to each financial entry
- 5 Accent Colors: Choose from Salad Green, Ocean Blue, Royal Purple, Rose Pink, or Sunset Orange
- Dark/Light Mode: Seamless theme switching
- Custom Storage: Choose where your data is stored
- Responsive Design: Beautiful on all screen sizes
- Native Performance: Built with Tauri for optimal speed
- Cross-platform: Works on macOS, Windows, and Linux
- Type-safe: Full TypeScript implementation
- Modern UI: Tailwind CSS with glass morphism effects
- Secure: No external dependencies for data storage
-
Clone the repository
git clone https://github.com/smailiukas/layered.git cd layered -
Install dependencies
npm install
-
Run in development mode
npm run tauri dev
-
Build for production
npm run tauri build
layered/
├── src/ # React frontend
│ ├── components/ # React components
│ ├── contexts/ # React contexts (Theme)
│ ├── types.ts # TypeScript type definitions
│ └── styles.css # Global styles
├── src-tauri/ # Rust backend
│ ├── src/ # Rust source code
│ ├── icons/ # App icons
│ └── tauri.conf.json # Tauri configuration
└── package.json # Node.js dependencies
- Click the "New Note" button in the sidebar
- Add a title and start writing in Markdown
- Use tags to organize your notes
- Toggle between edit and preview modes
- Switch to the Finance tab
- Click "Add Entry" to create transactions
- Categorize as Income, Expense, Investment, or Savings
- View your financial overview in the statistics cards
- Export data using the "Export CSV" button
- Click the settings icon in the header
- Choose your preferred accent color
- Set custom storage locations for notes and finance data
- Settings are automatically saved
- Frontend: React 18, TypeScript, Tailwind CSS
- Backend: Rust, Tauri
- Build Tool: Vite
- Styling: Tailwind CSS with custom color system
- Icons: Lucide React
@tauri-apps/api- Tauri JavaScript APIreact-markdown- Markdown renderingdate-fns- Date formattinglucide-react- Beautiful icons
npm run dev- Start Vite development servernpm run build- Build frontend for productionnpm run tauri dev- Run Tauri in development modenpm run tauri build- Build Tauri app for production
npm run tauri devnpm run tauri buildThe built application will be available in src-tauri/target/release/bundle/.
Layered supports 5 beautiful accent colors:
- Salad Green (default) -
#22c55e - Ocean Blue -
#3b82f6 - Royal Purple -
#a855f7 - Rose Pink -
#ec4899 - Sunset Orange -
#f97316
Colors are managed through React Context and applied dynamically throughout the application.
- macOS:
~/Library/Application Support/com.layered.app/ - Windows:
%APPDATA%\com.layered.app\ - Linux:
~/.local/share/com.layered.app/
Users can choose custom storage locations through the settings panel. Data is stored as:
- Notes: Individual JSON files in
notes/directory - Finance: Individual JSON files in
finance/directory - Settings:
settings.jsonfile
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project was created as a learning experience to:
- Explore Tauri as a modern alternative to Electron
- Learn Rust fundamentals through practical application
- Build a simplified productivity app with essential features
- Practice React + TypeScript with modern tooling
What Layered is:
- A lightweight note-taking app with markdown support
- A basic finance tracker for personal use
- A clean, customizable interface
- A learning project showcasing Tauri capabilities
What Layered is NOT:
- A full-featured Notion replacement
- An advanced knowledge management system
- A comprehensive financial management tool
- Production-ready enterprise software
- Tauri - For the amazing Rust-based app framework that made this possible
- Tailwind CSS - For the utility-first CSS framework
- Lucide - For the beautiful icon set
- React Markdown - For markdown rendering
- The Rust and Tauri communities for excellent documentation and support
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue with detailed information
- Remember this is a learning project - contributions and suggestions are welcome!
Made with ❤️, lots of ☕, and a healthy dose of Rust learning curve please help me, I'm mentally insane now
Layered - A first step into Tauri development