Tea's Database

• トップページ(またはHomeボタン)からお茶の種類(日本茶や紅茶など)
  Caffeineボタンから含有カフェインの量から検索できます。

• お茶の名前が既に分かっているなら全てのお茶の名前を載せてある目次(All Teasボタン)から飛べます。

• 説明のページでは、以下の情報が表示されます。
• お茶の種類
• お茶の名前
• お茶の説明
  

動機

個人的に飲み物ではお茶を好んで飲むことが多いので、せっかくだからその情報をまとめたものを作ってみようと思いついたのがきっかけでした。

時々カフェインが多く入っているものを飲み過ぎて気分が悪くなってしまうことが多かったので、飲む前にどのくらいの量が入っているのかを検索せずに手軽に確認したかったからという理由もあります。

使用した技術

React.js

Netlifyにデプロイしてフロントエンドで使いました。

Express.js

バックエンドとして使うためにRenderへデプロイしました

Renderに置いたExpress.jsのJSONデータをNetlifyのReact.jsに読み取らせて表示させるという構成です。

ただロード長い時は30秒くらいかかります(画像は7倍速)。

これはRenderの仕様(非アクティブ状態が一定時間続くと停止状態になる)を把握して無かったためでした。

なお、現在はバックエンドを廃止してフロントだけで完結するように修正したので過去の仕様になります。

まとめ

以上が初めて世に出したReact.jsで作ったWebアプリの概要です。

これをリメイクして、ユーザーが様々なお茶の効能やその追記・修正などをできるようにしても面白いかもしれませんね。