Egg or Chicken
App | TypeScript
OpenWeatherの機能を利用した状態変化アプリを作成しました。天候の予報に応じて様々なアイテムを取得して集めて別のアイテムへ変化させ、最終的にレアアイテムをGETするゲーム感覚のアプリです。現在場所に応じた天気予報も見ることができます。
https://egg-or-chicken.vercel.app使用技術詳細：
GitHubDesign
Figma
APIを利用したアプリを制作したいと考え、今回の内容を思いつき制作しました。 このアプリはモバイル主体のデザインで制作しました。空の色を連想させる淡いブルーを主体とし、極力文字数を少なくして画面をスッキリ爽やかに見えるようにしました。文字関連は説明書ページを作りまとめました。ナビゲーションなどのアイコン、天気のアイコン、生き物のイラストなどはイラストレーターで自作しています。カラーはTailwind CSSのカラーパレットから選んでいます。
Coding
Styling | Tailwind CSS、Headless UI、React Icons
styled-componentsがメンテナンスモードとなったため、Tailwind CSSを取り入れました。どこにどのようなスタイルが当たっているのかが分かりやすく書き方も簡略化できるため、今後も利用していきたいと考えています。ダイアログはHeadless UIを利用しました。今回はmapの中の画像に使用するやり方を学ぶことができました。React Iconsは検索アイコンに利用しています
Backend Service | Supabase
認証、データベース管理にSupabaseを利用しています。ソーシャルログインも取り入れました。
データ取得・管理 | Axios & React Query
OpenWeatherの取得、管理に使用しています。クライアント内のグローバルステート管理にはJotaiライブラリを使用しています。ローディング中はスケルトンコンポーネントを制作し表示するようにしています。