EvolvedNotes

• 

  login

• 

  landing page

• 

  inside notes

• 

  form

Inspiration

Most of us use applications like Google Keep to quickly jot down thoughts, passwords, or sensitive personal data. However, the question remains: how secure is this data from the service providers themselves? While mainstream apps encrypt data in transit and at rest, they manage the encryption keys. This inspired me to create EvolvedNotes—a simple, clean, and highly secure alternative where the absolute priority is privacy, offline-first reliability, and strict client-side End-to-End Encryption (E2EE). The resulting project is live at: https://app-b2jynljp37y9.appmedo.com.

How I built your project

EvolvedNotes is architected as a modern, high-performance single-page web application using a robust, enterprise-grade tech stack:

• Frontend Architecture: Built with React 18 and TypeScript, bundled using Vite (rolldown-vite). I chose Tailwind CSS combined with shadcn/ui (built on Radix UI primitives) to create a beautiful, responsive, and minimalist user interface inspired by Google Keep. It includes advanced features like light/dark mode (next-themes), interactive drag-and-drop mechanics (@dnd-kit), fluid animations (motion), dynamic data visualization (recharts), and multi-language support covering 5 languages via i18next.
• Backend & Cloud: Powered by Supabase. I utilized PostgreSQL for secure data persistence, Supabase Auth for user management, and Supabase Edge Functions (running on the Deno runtime) to handle serverless operations like generating and updating secure shared links.
• Security & Offline-First Data: This is the core innovation. The app uses an offline-first data approach, storing encrypted JSON payloads directly in the browser's localStorage. Text encryption relies on the Advanced Encryption Standard (AES), where the user's master password derives the unique encryption key using PBKDF2 (Password-Based Key Derivation Function 2).

Mathematically, the security of the key derivation—where $DK$ is the derived key, $P$ is the password, $S$ is a cryptographically secure random salt, $c$ is the iteration count, and $hl$ is the desired key length—is defined as:

$$DK = \text{PBKDF2}(P, S, c, hl)$$

Because of this zero-knowledge architecture, the server only ever receives and stores the encrypted ciphertext. It never sees the master password or the derivation key, guaranteeing absolute privacy.

Challenges I faced

One of the primary challenges was implementing complex cryptographic operations smoothly within the browser environment without degrading the User Experience (UX). Synchronizing the encrypted JSON payloads from localStorage to the remote Supabase database via HTTP clients (axios / ky) while handling race conditions during offline-to-online transitions required careful architectural planning.

Furthermore, integrating strict form validation using react-hook-form and Zod alongside custom platform wrappers like miaoda-auth-react required meticulous type-safety configurations to ensure no unencrypted sensitive data could ever accidentally leak through state updates.

What I learned

Building EvolvedNotes significantly deepened my expertise in full-stack TypeScript development and modern cyber security paradigms. I mastered the practical implementation of zero-knowledge architectures and client-side encryption workflows. I gained hands-on experience optimizing frontend builds using Biome for lightning-fast linting and formatting, and managing monorepo-like dependencies efficiently with pnpm. Ultimately, this project proved that you don't have to sacrifice a rich, feature-packed UI (complete with charts, animations, and internationalization) to achieve uncompromising, top-tier data security.

Built With

• formulare-react-hook-form-se-zod-validaci
• postgresql
• react
• tailwind
• typescript
• vite