Sofer

Inspiration

I wanted to make beginner Arabic a little less intimidating. Seeing a translation is useful, but it doesn't tell you why a particular word means what it does or how a sentence fits together. I had explored language-learning ideas before, and for this hackathon I decided to build a smaller Arabic-first app focused on that one problem.

What it does

Sofer teaches Modern Standard Arabic through three beginner lessons: greetings, numbers, and directions. There are seven curated sentences in this demo.

You can tap individual Arabic words to see their meanings and grammar notes, reveal transliteration, and answer a short comprehension question with feedback.

The app also includes a 28-letter alphabet guide, saved tricky words, and progress stored in the same browser. Pronunciation is available if the browser has an Arabic voice.

An optional AI tutor can provide additional explanations when configured, but the lessons work without it.

How I built it

I used the Devpost Learn Skill Pack to define the scope, write a product requirements document and technical specification, and break the development into testable steps.

I developed the frontend with React, TypeScript, and Vite, and built a small Express API for optional AI requests. I used Hermes to support implementation and debugging, with Zod validation, Vitest tests, and Playwright browser checks.

Challenges I ran into

One of the biggest challenges was handling Arabic text correctly alongside an English interface, particularly right-to-left rendering, vowel marks, and word-level interactions.

Another challenge was getting progress tracking right. I needed the app to recognize when a complete lesson was finished rather than marking it complete after a single question.

I also wanted the learning experience to remain functional without relying entirely on an external AI service.

Accomplishments that we're proud of

I'm proud that I turned the initial idea into a working application rather than leaving it as another unfinished concept.

The feature I'm most satisfied with is the interactive word explanation system. A learner can tap an Arabic word and immediately understand its meaning and grammatical role within the sentence.

I'm also proud of building a complete learning flow, from choosing a lesson and answering questions to saving progress and revisiting difficult words.

Getting the core functionality working with automated tests and a clean, responsive interface was an important milestone for me.

What we learned

This project taught me that building a useful learning application isn't about adding as many features as possible.

I learned more about handling multilingual interfaces, designing accessible interactions, structuring frontend and backend logic, and testing actual user journeys.

Working with the Devpost Learn Skill Pack also helped me approach development more systematically, from defining requirements to validating the finished features.

Most importantly, I learned the value of keeping the scope realistic and making sure the core experience works properly before expanding it.

What's next

I want to expand the Arabic curriculum, introduce dictionary search and better vocabulary revision, and collect feedback from Arabic speakers and beginner learners.

Eventually, I'd like to add optional accounts and cross-device progress synchronization.

For now, Sofer is a focused proof of concept that demonstrates a simpler, more interactive approach to learning Arabic.

Built With

• devpost
• express.js
• hermes-agent
• learn
• nebius-token-factory
• node.js
• playwright
• react
• typescript
• vite
• vitest
• zod