01 / PROJECT

GRAMMARIO

A full-stack linguistic analysis app: you type a sentence, get a real parse and interactive graphs, then layered explanations that tie the structure to how each language actually works.

01
What it's for

Most grammar tools either feel like a black box (paste text, trust the AI) or a dry rulebook. Grammario is built around the opposite idea: grammar is something you can see—dependency arcs, morphology broken into pieces, trees you can explore. The goal is a "high-definition map" of the sentence before any hand-wavy explanation shows up.

It started from my own habit of studying languages and wanting proof of what was going on under the hood, not just a plausible English gloss.

02
In the app

The UI is intentionally simple: your sentence sits at the top. You click a word to dig into that token—lemmas, features, and how it hooks into the rest of the clause. Below that, the same analysis is drawn as interactive syntax trees and linear dependency graphs (ReactFlow + automatic layout), so you can follow subject, object, and modifier chains visually, not only as a wall of labels.

Under the hood each run does full NLP: tokenization, lemmatization, part-of-speech and morphological tagging, and dependency parsing, aligned with Universal Dependencies so relationships are consistent across the five languages.

03
Structure first, then the tutor

The analysis pipeline is structural-first: Stanza (Stanford NLP) produces a deterministic "hard truth" about lemmas and syntax. Only after that does an LLM step in as the tutor—rules, examples, and nuance, without having to invent whether something is an object or an adjunct. Providers are wired with OpenRouter as primary and OpenAI as fallback, JSON-mode responses, caching, and language-specific prompts so the teaching layer matches each language family.

04
Five languages, three strategies

Italian, Spanish, German, Russian, and Turkish are supported today. A single generic engine wouldn't respect how different they are, so processing uses a strategy pattern: Romance (clitics, multi-word units, gender/number agreement clusters), inflected languages like German and Russian (case governance—which verb "licenses" dative vs accusative, aspect and government), and Turkish as agglutinative (morpheme-by-morpheme segmentation with vowel harmony, consonant softening, and buffer consonants so long words unpack like stacked bricks).

05
Learning loop

Beyond analysis, there's a full engagement layer: streaks, XP, levels, achievements, and daily goals, plus a spaced-repetition vocabulary deck using the SM-2 algorithm so words come back on a sane schedule. Accounts and data live in Supabase (email/password and Google OAuth, RLS-isolated rows per user).

I also use Remotion to render promo clips (landscape and vertical) from React components when I want to show the product in motion.

VISIT GRAMMARIO.AI
06
Architecture Highlights
NLP Strategy PatternLanguage-family-specific processing: RomanceStrategy (clitics, multi-word token expansion), InflectionStrategy (case governance, verbal aspect), AgglutinativeStrategy (Turkish morpheme segmentation with vowel harmony and consonant softening).
LLM IntegrationDual-provider setup (OpenRouter primary, OpenAI fallback) with response caching, JSON-mode parsing, and language-specific prompt engineering for pedagogical output.
BackendFastAPI (async Python 3.11), Stanford NLP (Stanza) pipelines with LRU-based model caching (up to 5 language models in memory with eviction), Pydantic v2 schema validation.
FrontendNext.js 16 (App Router, SSR), React 19, ReactFlow for interactive node-graph visualizations, Dagre for tree layout, Zustand + TanStack Query for state, Framer Motion for animations.
Auth & dataSupabase Auth (email/password + Google OAuth, PKCE), Postgres with Row-Level Security so user data stays isolated, profile triggers and typed APIs via Pydantic.
InfrastructureDockerized multi-stage builds, Nginx reverse proxy with rate limiting, SSL via Let's Encrypt, GitHub Actions CI/CD (test → build → push to GHCR → SSH deploy to DigitalOcean), frontend on Vercel.
07
Tech Stack
Next.js 16React 19TypeScriptTailwind CSS v4ReactFlowZustandTanStack QueryFramer MotionRadix UIAxiosFastAPIPython 3.11Stanza (Stanford NLP)Pydantic v2SupabaseDockerNginxGitHub ActionsVercelDigitalOceanRemotion
08
Further Reading

Longer write-ups on the redesign live on the blog— search for "The New Grammario Method" or browse the Grammario release notes.

09
Design Concept
Grammario Design
END OF ENTRY