Nutrepedia: ClojureとHTMXで構築された多言語栄養リファレンス

Nutrepediaは無料の多言語栄養リファレンスレイヤーを提供します

Nutrepediaは、高速で手間がかからず、美しいリファレンスツールとして設計された栄養情報プラットフォームです。ユーザーアカウントやカロリー追跡を優先する多くの栄養ツールとは異なり、Nutrepediaは、29の地域ロケールにわたる食品データのための、無料でアクセス可能なリファレンスレイヤーを提供することに焦点を当てています。これには、1,635種類の食品が47,415のローカライズされたページとしてレンダリングされています。

技術スタックとアーキテクチャ

Nutrepediaは、パフォーマンスとシンプルさに焦点を当てた、モダンで軽量なスタックを使用して構築されています。コアとなる技術の選択肢には以下が含まれます：

Backend: Clojure, HTTP-Kit, Compojure, および Hiccup。
Frontend: ページ全体をリロードすることなく動的な更新を行うための HTMX。
Database: 食品データ、ローカライズされたコンテンツ、管理ワークフロー、タスクキュー、検索、および評価レコードを管理する Postgres。

高度な多言語検索の実装

グローバルなユーザーベースに対応するため、NutrepediaはPostgresにおいて、さまざまなスクリプトと言語をサポートするための特化した検索アーキテクチャを実装しています：

Latin-script fuzzy search: pg_trgm と unaccent を利用して柔軟なマッチングを行います。
CJK and non-Latin scripts: 中国語、日本語、および韓国語の文字を効率的にインデックス化および検索するために PGroonga を使用します。
Romanized aliases: これらは個別にインデックス化されており、ユーザーが食品の名前のローマ字表記を使用して検索することを可能にします（例：ヒンディー語の名前「रसभरी」を見つけるために「rasbhari」と検索する）。

ユーザーエクスペリエンスとコミュニティのフィードバック

プロジェクトは、そのシンプルさと視覚的な魅力で称賛されていますが、Hacker Newsの初期ユーザーは、技術的およびUXの改善が必要ないくつかの領域を特定しました：

検索とナビゲーション

ユーザーは、検索結果が現在ハイパーリンクになっていないため、ミドルクリックで結果を新しいタブで開くことができないことを指摘しました。さらに、一部のユーザーは、「salmon」の検索で「almonds」が表示されるといった、予期しない検索結果を報告しました。

モバイルでのアクセシビリティと入力

いくつかの報告では、モバイルデバイスにおける数量入力ボックスの問題が強調されました。あるユーザーは、テキストフィールドをクリアするとキーボードが自動的に閉じてしまうため、小数点の入力が困難であることを指摘しました。別のユーザーは、Firefox mobileにおいて、入力中にボックスがデフォルトの数値にジャンプしてしまうという、不安定な動作を報告しました。

アクセシビリティとUIのコントラスト

コミュニティのフィードバックでは、アクセシビリティ監査のために Chrome の Lighthouse を使用することが提案されました。具体的には、ユーザーは、検索バーにおけるピンクの背景に黄色のテキストカラーといった、可読性を妨げる可能性のある色のコントラストの問題を指摘しました。

単位の好み

ユーザーは、デフォルトの単位を設定できる機能への要望を表明しており、特に、地域やランダムな単位ではなく、デフォルトで100gあたりの栄養情報を表示するオプションを求めています。