0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【更新】お茶の情報をまとめたTea's Database【供養】

Last updated at Posted at 2024-04-28

はじめに

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

動機

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

使い方

お茶の種類(日本茶や紅茶など)や
スクリーンショット (379).png
含有カフェインの量から
スクリーンショット (380).png
検索できます。

お茶の名前が既に分かっているなら
スクリーンショット (381).png
全部のお茶の名前を載せてある目次(All Teas)から飛べます。

使用した技術

React.js

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

Express.js

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

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

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

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

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

まとめ

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?