ちょっとした思いつきやメモなどを 200 文字以内の日記として記録するアプリケーションです。 日記帳などの紙に書く日記との差別化として、その日 YouTube で見た動画でよかったものを記録再生可能にすることで差別化をしています。 スマホ PC タブレットからご利用可能です。
- テキストでの表示だけじゃなくアイコンも使用することで直観的に理解できるようにしました。 またメニューバーなどのアイコンや配置に関しても Twitter や YouTube などで設置されてる場所を参考に設置しました。
- ログイン後に表示されるページで基本的な動作(CRUD)を全て行えるようにしました。
- メールアドレスを利用してユーザー登録をしてからのご利用または、 「ゲストとしてログイン」のボタンからメールアドレスとパスワードを入力せずにログインできます。
- ログイン後最初に表示された画面から日記一覧の作成、表示、編集、削除、検索が行なえます。 ヘッダー右上のユーザー欄からユーザー情報の編集、ヘッダー左のメニューバーアイコンから PhotoGallery を開けます。
- React
- Node 18.16.0
- React 18.2.0
- TypeScript 5.0.4
- React Testing Library
- ESLint
- Prettier
- Rails
- Ruby 3.2.2
- Rails 7.0.4.3
- Puma
- RSpec
- Rubocop
- AWS
- VPC
- EC2(インスタンス内で Docker を実行(使用ファイル))
- Route53
- Certificate Manager
- S3
- RDS(MySQL 8.0)
- Nginx 1.23
- Docker / Docker Compose
- MySQL 8.0
- Google Analytics
- Github Actions
-
React
- デザイン
- Material UI
- Styled Components
- アニメーション
- Framer Motion
- Form
- React Hook Form
- 画像投稿機能
- Photo Gallery(日記に付随した画像一覧)
- React Image Gallery
- YouTube 動画再生
- React Youtube
- ログイン機能
- Cookie 保存
- ルーティング機能
- React Router Dom
- head 情報の変更
- React Helmet Async
- 状態管理
- Recoil
- WebGL
- React Tree Fiber
- デザイン
-
Rails
- ユーザー登録(メール認証)、ログイン機能(Devise Token Auth)
- 日記投稿機能
- 画像保存(ActiveStorage)
- 本番環境では S3 に保存
- 画像保存(ActiveStorage)
- ページネーション機能(Pagy)
- タグ機能(Acts As Taggable On)
- 検索機能(Ransack)
-
Github Actions
- Rails:
- Rails Best Practices,
- Brakeman,
- Bundle Audit,
- Rubocop,
- RSpec
- React:
- JSLint,
- Testing Library/Jest
- Rails:
-
React
- React Testing Library
-
Rails
- RSpec
- モデルテスト(models)
- コントローラーテスト(requests)
- RSpec
### Docker を利用して構築。wsl2 を使用した Ubuntu 環境では動作確認済み
リポジトリを手元にクローンしてください。
git clone https://github.com/NakaiKazuki/Short-Diary.git
次にクローンしたリポジトリのディレクトリへ移動します。
cd Short-Diary
下記のコマンドでイメージを作成します。 また、ここから docker-compose が v1 の場合はコマンドの docker compose の記述を docker-compose に変更してください。 ※ 以下の例のように「docker-compose」が v1 の場合はコマンドの「docker compose」を「docker-compose」に変更。
v2: docker compose build
↓
v1: docker-compose build
下記のコマンドでイメージを作成します。
docker compose build
dockerimage 作成後コンテナを起動します。
docker compose up -d
下記のコマンドで Rails のコンテナへ入ります。
docker compose exec api zsh
コンテナ内で下記のコマンドを実行しデータベースを作成します。
rails db:create db:migrate db:seed && rails db:migrate RAILS_ENV=test
データベースの作成が完了したら下記コマンドでコンテナ内から出ます。
exit
node_modules のインストール完了後、React 側のコンテナへ入ります。
docker compose exec front zsh
最後にコンテナ内にて、下記コマンドで React を実行します。
yarn start
以下リンクでブラウザに表示
- 中井 一樹
- Twitter : https://twitter.com/k_kyube
Short Diary はMIT ライセンスのもとで公開されています。詳細は LICENSE.md をご覧ください。