Yotes is a privacy-first notes application with real-time sync powered by Convex and authentication via Better Auth. Built with a sleek, dark-themed interface using React and Tailwind CSS, Yotes keeps your notes, tags, and AI settings in your own Convex database with per-user access control. Check out the live site at yotes.vercel.app.
Yotes prioritizes user privacy and control by keeping data in a secure, real-time Convex database per user. Beyond note-taking, it aims to provide fast search, organized tagging, and AI-powered insights while remaining lightweight and user-controlled.
- Privacy-Focused Notes: Create, edit, and delete notes stored securely in Convex with per-user access control.
- End-to-End Encryption (E2EE): Note fields are encrypted client-side (AES-GCM) with keys derived from a user passphrase (PBKDF2). Server only stores ciphertext and wrapping metadata.
- Secure Passphrase UI: Beautiful modal for setting up and unlocking encryption with clear security information.
- Manual Lock/Unlock: Lock button in navbar to clear encryption keys from memory for enhanced security.
- Real-time Sync: Notes and tags update instantly across sessions via Convex live queries.
- Tagging System: Categorize notes with customizable tags.
- Search & Filter: Quickly find notes by content or tags.
- Activity Heatmap: Visualize note creation over the past year in the Settings page.
- Responsive Design: Works seamlessly on desktop and mobile.
- Google OAuth: Secure sign-in via Better Auth (Convex component).
- Dark Theme: Default dark mode with JetBrains Mono font for a developer-friendly experience.
- Toast Notifications: Real-time feedback for actions like saving or errors.
- Offline Access: Work with notes offline; changes sync upon reconnection.
- Installable PWA: Add Yotes to your home screen for a native app-like experience.
- AI-Powered Search Summaries: Get intelligent summaries of search results, highlighting themes and takeaways (powered by Google Gemini).
Yotes interface on a desktop device
Yotes interface on a mobile device
From Yashraj’s rough TODO list, here’s what’s in the pipeline:
- Export/import functionality.
- PDF viewer and download capabilities.
- Rich previews for links (e.g., website showcases, YouTube embeds).
- AI-powered note assistance (e.g., description generation, in-note Q&A)
- Markdown support for notes.
- Dedicated support for dropping files (images, videos, links) with specialized views.
- Frontend: React, React Router, Vite
- Styling: Tailwind CSS, shadcn/ui, Lucide icons
- Backend: Convex (database, server functions, actions)
- Auth: Better Auth + Convex component (Google OAuth)
- Offline & PWA: IndexedDB (local cache for session/migration), Workbox (PWA/service worker)
- AI: Google Gemini API (proxied via Convex actions)
- State Management: React Contexts (NotesContext, ToastContext, ThemeContext)
- Build Tools: Vite, ESLint, PostCSS
- Dependencies: See
package.json
- Node.js (v18+ recommended)
- Google account for OAuth
- Google OAuth credentials configured for Better Auth
- Convex deployment with Better Auth env variables
Set these via npx convex env set or the Convex dashboard. For production:
| Variable | Purpose | Example (production) |
|---|---|---|
BETTER_AUTH_URL |
OAuth redirect base (must be Convex site URL) | prod convex link |
SITE_URL |
Frontend URL for crossDomain redirect | prod link |
CORS_ALLOWED_ORIGINS |
Allowed origins for CORS (comma-separated) | prod website link ,http://localhost:4000 |
BETTER_AUTH_SECRET |
Auth signing secret | (from openssl rand -base64 32) |
GOOGLE_CLIENT_ID |
Google OAuth client ID | From Google Cloud Console |
GOOGLE_CLIENT_SECRET |
Google OAuth client secret | From Google Cloud Console |
-
Clone the Repository
git clone https://github.com/rajofearth/yotes.git cd yotes -
Install Dependencies
npm install
-
Set Up Environment Variables Create a
.envfile in the root:VITE_CONVEX_URL=your-convex-url VITE_CONVEX_SITE_URL=your-convex-site-url- Get these from your Convex dashboard and deployment settings.
-
Run Locally
npm run dev
Visit
http://localhost:3000in your browser.
- Sign In: Log in with Google.
- Encryption Passphrase: On first run, you'll be prompted to set a passphrase. Keep it safe; it's required to decrypt your notes client-side.
- Create Notes: Use the "+" button in the navbar to add notes.
- Lock Notes: Use the lock button (🔒) in the navbar to manually lock your notes and clear encryption keys from memory.
- Organize: Add tags or (soon) import files like PDFs.
- Search & Filter: Use the search bar or tag filters on the homepage.
- Track Activity: Check your note heatmap in Settings.
- Manage Account: Log out or delete your account from Settings.
- Lint:
npm run lintfor ESLint checks. - Build:
npm run buildfor production assets indist/. - Preview:
npm run previewto test the build locally.
Configured for Vercel with SPA routing via vercel.json. Add .env variables to Vercel’s settings. The live site is available at yotes.vercel.app.
Contributions are welcome! To contribute:
- Fork the repo:
https://github.com/rajofearth/yotes. - Create a branch:
git checkout -b feature/your-feature. - Commit changes:
git commit -m "Add your feature". - Push:
git push origin feature/your-feature. - Submit a pull request.
Currently unlicensed; a license will be added as the project evolves.
- Created by Yashraj Maher (GitHub: rajofearth).
- Thanks to the React, Tailwind, Supabase, Convex, and OSS communities.