How I Built a Minimalist Bilingual Etymology PWA for Mindful Coding & Study published: true tags: javascript, webdev, opensource, productivity

Hey everyone! 👋

As an independent creator and developer, I’ve been working on a project that bridges two seemingly different worlds: software development and ancient classical text etymology (Greek & Hebrew), combined with the concept of personal boundaries and mindful grounding.

Today, I’m excited to share how I built and deployed a lightweight, distraction-free Progressive Web App (PWA) called Turtle English entirely for free using GitHub Pages, Vue 3, and Tailwind CSS.

💡 The Motivation: Why Build This?
Most language or scripture study tools are cluttered with ads, overly complex interfaces, or heavy corporate frameworks. I wanted something completely different:

Zero friction: Open instantly on any device, no app store downloads required.

Deep deconstruction: Instead of blind translation, look at the root morphemes (e.g., discovering that Hupotasso isn't about blind submission, but about "arranging oneself into proper order/boundaries").

Mindful focus: A clean, dark-mode interface designed to bring peace and structural clarity during quiet work or study sessions.

🛠️ The Tech Stack & Architecture
To keep it lightning-fast and entirely serverless, I chose:

HTML5 + Vue 3 (Global Build via CDN): No heavy Node.js build steps needed for the frontend prototype, making it super easy to maintain and deploy.

Tailwind CSS: For a sleek, modern, distraction-free dark UI.

TypeScript-ready Core Logic: Structured data models for words, transliterations, root morphemes, and mindset cards.

GitHub Pages: For 100% free, reliable, and instant static hosting.

Here is a snippet of how the etymology search and keyword filtering service is structured:

JavaScript
// Core search and filtering logic using Vue 3 computed properties
const filteredResults = computed(() => {
const q = query.value.trim().toLowerCase();
if (!q) return DATABASE;
return DATABASE.filter(item => {
return item.transliteration.toLowerCase().includes(q) ||
item.lemma.includes(q) ||
item.id.toLowerCase().includes(q) ||
item.keywords.some(k => k.toLowerCase().includes(q)) ||
item.mindsetCard.exposition.toLowerCase().includes(q);
});
});
🚀 How It Looks & Works
Users can type any keyword (like Hupotasso, Shalom, or psychological boundary concepts) and instantly retrieve structured breakdown cards:

Original Lemma & Transliteration (e.g., ὑποτάσσω / Hupotasso)

Literal Etymology Morphemes (Breaking down hupo + tasso)

Mindset & Boundary Application (Bridging ancient text with modern emotional/mental grounding)

Because it's a PWA, users on mobile devices (iOS/Android) can simply tap "Add to Home Screen" and use it completely offline like a native app.

🌐 Try It Out & Open Source
If you are curious about language tools, minimal PWA development, or just want to see how it works, you can check it out here:

Live PWA App: https://danielenglish19960118.github.io/turtle-app/

GitHub Repository: https://github.com/danielenglish19960118/turtle-app

I’d love to hear your thoughts, feedback, or any ideas on how to improve lightweight PWA architectures. Have you ever built a micro-tool to solve a personal workflow or study problem? Let’s chat in the comments! 👇