Next.jsTypeScriptDrizzlePostgresFramer Motion

Local-first active recall app with dual-persistence (LocalStorage + Postgres) and deterministic mastery logic.

LetMeCook web app - image 1
1 / 5

Abstract

I have developed LetMeCook Web—a high-performance, privacy-focused, deterministic active memory system. By designing an advanced, two-tier data persistence architecture that combines LocalStorage with PostgreSQL, the application provides a learning environment that enforces cognitive stimulation without the reliability issues typical of platforms operating exclusively in the cloud.


Problem

Standard flashcard applications often suffer from architectural and pedagogical flaws:

  1. Algorithmic passivity: Many platforms automate mastery based on simple hit rates, allowing users to pass cards by luck rather than deep cognitive effort.
  2. The durability paradox: Modern learners demand the speed and privacy of locally running apps, yet they also need the synchronization and sharing features available in cloud-based systems.
  3. Platform Costs: Platforms like Anki are free but lack sharing and synchronization features, while platforms like Quizlet are paid and offer limited functionality.
  4. Issues with creating flashcards: Many platforms offer only basic flashcard formats, without the ability to add images, formulas, etc., which makes learning STEM subjects difficult.
  5. Lack of AI integration: There is no ability to easily create high-quality flashcards using AI based on academic materials such as PDFs, websites, etc., or this functionality is, again, paid.

Solution

I have developed a robust, secure Next.js implementation that prioritizes user sovereignty and high-retention learning. The system uses a custom abstract storage layer that seamlessly supports both strictly private guest sessions via LocalStorage and persistent, shared data via Neon PostgreSQL and Drizzle ORM.

The core philosophy is based on Deterministic Mastery—a manual, 5-level assessment system that enforces rigorous self-assessment.


Features

  • Deterministic Mastery Assessment: A manual grading system (New, Don’t Know, Somewhat, Understand, Mastered) has been implemented, which forces active brain stimulation through self-assessment, rather than passive, automatic right/wrong logic.
  • Fisher-Yates algorithm integration: A built-in engine for randomizing learning sessions using the Fisher-Yates algorithm eliminates the “position memory” effect, ensuring that users truly learn the content rather than its order.
  • Hybrid state abstraction: I created a hybrid data synchronization model that enables instant (sub-10ms) updates to the application’s state for both guests and cloud users, ensuring consistent system responsiveness.
  • Data migration engine: I designed a dedicated process that automatically validates and transfers user data from the browser’s local storage (LocalStorage) to a relational database upon account registration
  • Educational UX enhancements: Integrated LaTeX rendering for technical content, support for images in flashcards, and Text-to-Speech (TTS) support, eliminating barriers to learning and ensuring full accessibility of the application for users.

Tech Stack

CategoryTechnologies Used
FrameworkNext.js 16 (App Router), React 19
PersistenceNeon PostgreSQL, LocalStorage API
ORM & DatabaseDrizzle ORM, Server Actions
Styling & UITailwind CSS 4, Framer Motion, Radix UI
UtilitiesLaTeX (MathJax/KaTeX), Lucide React

The "Why": Overcoming Technical Challenges

Challenge: Synchronizing Ephemeral and Persistent States Managing state consistency between a synchronous local storage and an asynchronous PostgreSQL backend introduced significant race conditions and schema drift risks, especially during the "guest-to-user" transition.

Solution: I architected a debounced persistence adapter that treats LocalStorage as a high-speed write-through cache. For the migration process, I built a custom Migration Engine that:

  1. Performs a runtime validation of the guest's JSON schema using TypeScript guards.
  2. Transforms flat LocalStorage Decks into relational projects and flashcards tables.
  3. Executes a transactional batch insert to ensure data integrity, preventing partial migrations if a network error occurs.

Challenge: Server Action Resource Abuse Exposing card creation via Server Actions made the database vulnerable to automated brute-force attacks or "junk deck" generation.

Solution: I implemented an in-memory Rate Limiter on the server side. By tracking client signatures and request frequency, the system can transparently throttle abusive traffic without requiring an external Redis instance, maintaining the project's lean, high-performance architecture.


Results & Impact

  • Availability: Delivered 100% offline capability, allowing users to maintain consistency regardless of internet connectivity.
  • Scale: Successfully migrated hundreds of test cards from local environments to the cloud database with zero data loss.
  • Learning Efficiency: Integrated scientific tools (LaTeX/TTS) that significantly broadened the app's utility for STEM students.

© 2026 Konrad Kotulski