CeloHT 公開ウェブサイト

Web

概要

CeloHT の公開ウェブサイト用リポジトリは、ハイチコミュニティ向けにブロックチェーンを活用した金融包摂と教育、寄付の透明化を目指す Web3 NGO のフロントエンド実装です。Next.js 14 の App Router を採用し、TypeScript と Tailwind CSS によるモダンな開発体験を提供します。Markdown ベースの CMS によるコンテンツ管理や、Celo ブロックチェーン/Valora ウォレットとの連携、Hardhat を用いたスマートコントラクト開発のワークフローを想定しており、寄付額・インパクトを可視化するチャートコンポーネント(DonationsChart.tsx、ImpactChart.tsx)など、透明性と報告性を重視した構成になっています。

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 30
  • ファイル数: 15
  • メインの言語: TypeScript

主な特徴

  • Next.js 14(App Router)と TypeScript によるモダンなフロントエンド構成
  • Celo ブロックチェーンと Valora ウォレットを想定した Web3 連携
  • Markdown ベースの CMS によるコンテンツ運用と公開レポート管理
  • 寄付/インパクトを可視化するチャートコンポーネントを含む UX

技術的なポイント

このリポジトリは、フロントエンド中心の実装を素早く展開できる構成になっています。Next.js 14 の App Router を採用しているため、ルーティングはファイルベースかつサーバーコンポーネント/クライアントコンポーネントの組み合わせで最適化可能です。TypeScript により型安全な開発を実現し、Tailwind CSS でユーティリティ指向のスタイリングが行われています。コンテンツ管理は Markdown ベースの CMS を用いることで非エンジニアでも記事やレポートを編集でき、静的サイト生成(SSG)や増分静的再生成(ISR)を活用した公開が想定されます。

ブロックチェーン面では Celo と cUSD を利用した寄付受け皿を想定し、フロントエンドは Valora や WalletConnect 経由でウォレット接続を行い、寄付トランザクションやオンチェーン記録へのリンクをユーザーに提示する設計が考えられます。Hardhat がスタックに含まれているため、スマートコントラクトのローカルテスト・デプロイフローも整備可能です。チャート表示用の DonationsChart.tsx / ImpactChart.tsx は、オンチェーンデータまたは CMS 由来の統計データを受け取って可視化するコンポーネントであり、Chart.js や Recharts、D3 などの図表ライブラリを容易に組み合わせられる作りが想定されます。

運用面では .env.local に API エンドポイントやブロックチェーン RPC、コントラクトアドレスなどの機密設定を置き、CI/CD を通じて公開環境へデプロイします。透明性を重視する NGO サイトとして、トランザクションハッシュやブロックチェーンでの検証リンクを公開ページに埋め込むといったパターンが有効です。設計上の注意点としては、ユーザーのウォレット操作やトランザクション手数料、データの更新頻度(オンチェーン照会コスト)を考慮した UX とキャッシュ戦略が重要になります。

プロジェクトの構成

主要なファイルとディレクトリ:

  • .env.local: file
  • .gitignore: file
  • DonationsChart.tsx: file
  • ImpactChart.tsx: file
  • LICENSE: file

…他 10 ファイル

(上記ファイル群はフロントエンド中心の典型構成を示しており、チャートコンポーネントや環境変数ファイル、ライセンス情報などを含みます。)

まとめ

ブロックチェーンを活用した寄付の透明化に焦点を当てた実用的で拡張性の高いフロントエンド実装です。

リポジトリ情報:

READMEの抜粋: Image.

CeloHT Website 🌍💚

Official website for CeloHT, a Web3 NGO empowering the Haitian community through digital finance, blockchain education, and social impact.

🌱 Mission

Enable financial inclusion and digital education using blockchain (Celo, cUSD).

🚀 Stack

  • Next.js 14 (App Router)
  • TypeScript
  • Tailwind CSS
  • Markdown CMS
  • Celo Blockchain
  • Valora Wallet
  • Hardhat (Smart Contracts)