Back

Siyaq

Year

2026

Tech & Technique

Astro, React, Vite, React Router, CSS Modules, vite-plugin-pwa, OpenRouter, Web Push, Web Speech API, Supabase, Google Tag Manager

Description

An Arabic-first English vocabulary product for working professionals. Translating a word is the easy part β€” remembering it is not. Siyaq saves the word together with the sentence it appeared in, then uses AI to explain it in the meaning it carries in your own profession and to write fresh examples in that same context β€” and brings it all back before you forget it.

Key Features:
  • 🎯 Personal Word List: Teaches only the words you ran into yourself, each stored with its own sentence β€” not a ready-made list you never needed
  • πŸ€– AI-Written Examples in Your Context: Beyond the sentence you captured, Siyaq generates new example sentences for the word inside your own professional context, so you meet it the way you will actually use it
  • πŸ’‘ Field-Aware Meaning: Pick your profession and the AI explains every word in the sense it carries there β€” leverage means one thing to a marketer and another to an accountant
  • πŸ”„ Smart Review: A daily review queue that brings each saved word back before you forget it, not after
  • πŸ“š Searchable Library: Every word with its IPA pronunciation, its source sentence and a learning-status pill, filterable by status (new / learning / mastered) and by where it came from (manual, browser extension, YouTube, import)
  • 🧩 One-Click Capture Extension: A Chrome extension turns capture into a single press, coming soon to the Chrome Web Store
  • πŸ“Ί YouTube Subtitle Capture: With subtitles on, the extension pauses the video, shows the last two lines and saves the word with its sentence plus a link back to that exact moment
  • πŸ–±οΈ Highlight From Any Page: Select a word in an email, a report or any page and the extension stores it with the sentence around it
  • ✍️ Manual Word Entry: Add a word by hand with the sentence you met it in β€” the sentence is optional, and it is what the AI reads to pin down your context
  • πŸ“₯ One-Time Bulk Import: Paste a list you already keep in a notes app β€” one word per line or comma separated, tolerating numbering and translations written beside them β€” up to 100 words, one free import per account on any plan
  • πŸ”Š Listening Questions: Some review questions play the word instead of showing it, and the word is pronounced automatically when the answer appears
  • πŸŽ™οΈ Pronunciation Practice: Say the word out loud once per session β€” encouragement only, it never affects your review schedule, and the audio is handled by the browser's own recognition service rather than being sent to or stored by Siyaq
  • ⏰ Reminders You Control: Separate, individually scheduled reminders for the daily review, a streak at risk, a capture drought and milestone achievements β€” all in your own timezone
  • πŸ” Passwordless Sign-In: One email field and a one-time login code, with no password to set
  • πŸ“± Installable PWA: Installs to the home screen and runs standalone as an app, notifications included
  • 🌐 Arabic-First Interface: Arabic copy and right-to-left layout across both the landing page and the application
  • πŸ†“ Free Tier: Five words a day with Arabic meanings and the full daily review, no card
  • πŸ’³ Pro Plan: Unlimited capture and the professional example from your field, at 25 SAR monthly or 250 SAR yearly

Technical Highlights:
  • Built the marketing landing in Astro, shipping no client framework runtime to the page
  • Limited the landing's JavaScript to small inline vanilla snippets for lazy video, URL parameters and scroll reveals
  • Built the application as a Vite-bundled React SPA with React Router client-side navigation
  • Routed the SPA across /add, /import, /quiz, /practice, /words, /word/:id, /upgrade, /settings and /admin
  • Styled the application with CSS Modules for per-component, hash-scoped class names
  • Made the app installable with vite-plugin-pwa, registering a service worker and a web manifest
  • Declared the manifest standalone with lang ar, dir rtl, a #0F4C5C theme color and 192/512 maskable icons
  • Added app shortcuts opening the daily quiz and the add-word screen, and a /?source=pwa start URL
  • Ran the SPA against a separate API host exposing /api/v1, with Supabase as the datastore
  • Ran generation server-side through OpenRouter, feeding it the captured sentence and the user’s declared field so the meaning and the examples come back in that context
  • Implemented passwordless sign-in as a single email field that sends a one-time login code
  • Built per-device push notifications with per-reminder scheduling resolved against the user's own timezone
  • Kept pronunciation practice on-device by running it through the browser's speech recognition rather than uploading audio
  • Added landing SEO with meta description, canonical link, Open Graph, Twitter cards and og:locale ar_SA
  • Published a schema.org SoftwareApplication JSON-LD graph, a 1200x630 share image and Search Console verification
  • Wired analytics through Google Tag Manager with GA4 behind it

My Role

Full-Stack Developer & Product Designer (Own Product)
Built and shipped Siyaq end to end as a personal product:
  • πŸ”§ System Architecture: Structured the product as an Astro landing, a React SPA and a separate API service
  • βš›οΈ Application Development: Built the Vite and React single-page app, its routing and all of its screens
  • πŸš€ Marketing Site: Built the Arabic Astro landing page with small inline scripts and no framework runtime
  • ✍️ Product Copy: Wrote the Arabic hero, feature, pricing and FAQ copy for the landing, and every string in the app
  • 🎨 UI/UX & RTL Design: Designed the Arabic right-to-left interface and the product's visual identity
  • πŸ“± PWA Engineering: Configured vite-plugin-pwa, the Arabic RTL manifest, the icon set and the app shortcuts
  • πŸ”’ Authentication: Implemented the passwordless email one-time-code sign-in flow and its screen
  • πŸ—„οΈ Backend & Data: Built the API service on its own subdomain and set up Supabase as the datastore
  • πŸ€– AI Layer: Built the OpenRouter-backed generation flow that turns a captured word and its sentence into a field-specific meaning and fresh examples in the user’s own context
  • πŸ” Review Engine: Built the daily review queue, the learning-status model and the library search and filters
  • πŸ”” Notifications: Built the per-type reminder system with independent schedules resolved in the user's timezone
  • πŸŽ™οΈ Audio Features: Added listening questions and browser-side pronunciation practice with no audio leaving the device
  • 🧩 Capture Flows: Designed manual capture, bulk import and the one-click Chrome extension still to ship
  • πŸ’³ Plans & Pricing: Defined the free five-words-a-day tier and the Pro plan above it
  • πŸ” SEO & Analytics: Added the metadata, JSON-LD and Search Console verification, and installed GTM with GA4

AHMED

ALSALEH