本記事では、React で個人開発をする際に使用した技術を紹介いたします。
開発アプリ概要
読書・映画鑑賞の管理、記録をすることができるウェブアプリです。
アピールポイント
- タイトル、著者名の他にもメモの内容からでも検索可能
- データのエクスポート
- 読んだ本、見た映画の本数が分かるグラフ機能付き。年・月ごとのデータを確認することができます。例えば劇場で見た映画・旧作別の年間本数が一目で分かります。
- 懐かしい図書貸出カード風に登録データを表示
使用技術
React ( create-react-app / Custom Hooks/ Material-UI / eslint&prettier)
Firebase ( Authenication/ Firestore / Functions/ Hosting)
各種API ( The Movie Database (TMDb) / Rakuten Books Total Search API )
機能一覧
ユーザー機能
- 新規登録、サインイン、サインアウト、テストユーザーサインイン機能
- 登録情報編集
- アカウント削除
- パスワードリセット機能（ベータ版では無し）
検索機能
- APIを使用し本、映画を検索
その他
- カテゴリーの追加、削除、編集
- タグの追加、削除、編集
- メモ機能
- グラフ機能
- 画面のスクロール位置に応じて必要な分だけ画像を表示
- お問い合わせフォーム (reCAPTCHA 導入)
- 図書貸出カード風に登録データを表示
- 物理演算ライブラリを使用して、データを表示
- csv ファイルでデータをエクスポート
- レスポンシブ対応(スマホ、PC)
推奨ブラウザは Chrome です。
技術スタック
こちらがインフラ構成です。
##Front-end
フロントエンドは React.js 。Redux は使わずに、Context と Hooks を使用しています。
主要ライブラリ
- create-react-app
- Material-UI: UI コンポーネントライブラリ
- react-photo-gallery: イメージギャラリーコンポネント
- eslint & prettier: コード整形
- EmailJs: JavaScript からメール送信
- ChartJs: グラフを表示できるライブラリ
- Matter.js: 物理演算ライブラリ
- Algolia: 全文検索サービス
Back-end
バックエンド・インフラ周りは すべてFirebaseで完結しています。デプロイもFirebase。
- Authentication: ユーザー認証
- Firestore: データ管理
- Functions: 設定したトリガーでバックエンド処理を自動的に実行
- Hosting: デプロイ
無料プランではなく、従量制の Blaze プランを使用。
API
API は書籍に関しては、Rakuten Books Total Search API、映画・テレビドラマに関してはThe Movie Database (TMDb) を使用しています。
デザイン
Material-UI というUIコンポーネントライブラリを使っています。
最後に
このアプリは完璧な趣味プロダクトです。
休日を使ってコツコツと作りました。
サイト作りに関しては以前からブクログやフィルマークスといったウェブサービスを使っていたのでこの２つのサイトを主に参考にしています。
あとYouTubeチャンネルのシネマンションの動画も参考にしてサイトにどんな機能を付けようか考えてました。