はじめに

自分が作って公開した最古のWebアプリ「Tea's Database」を供養の意味も込めて晒したいと思います。
初めてフロントとバックエンドを分けて作ったアプリで、YEN$CONVERSIONのプロトタイプともいえる物です。
あまり書くことが無いかも…

動機

個人的に飲み物ではお茶を好んで飲むことが多いので、せっかくだからその情報をまとめたものを作ってみようと思いついたのがきっかけでした。
時々カフェインが多く入っているものを飲み過ぎて気分が悪くなってしまうことが多かったので、飲む前にどのくらいの量が入っているのかを検索せずに手軽に確認したかったからという理由もあります。

使い方

お茶の種類(日本茶や紅茶など)や

含有カフェインの量から

検索できます。

お茶の名前が既に分かっているなら

全部のお茶の名前を載せてある目次(All Teas)から飛べます。

使用した技術

React.js

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

Express.js

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

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

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

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

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

まとめ

なぜ今更昔作ったwebアプリを記事にまとめたかというと、現在制作している今まで制作したWebアプリをまとめたサイトを開発したので、せっかくだからこのサイトもそこに載せてみようと思ったからです。
~~さすがにロードが30秒と長すぎるので、フロントとバックを分けるのをやめるなど改善をしていきたいと思います。~~
[追記]修正しました。