hayato0413 / readout

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Read Out

サービス概要

好きな本を共有し、新たな本を見つけることに特化したアプリです

本を読んだ記録をつけるものとしても利用もできます。

サービスの作ろうと思ったキッカケ

本屋に立ち寄った時、私はいつも最初に漫画コーナーに向かいます。
そして面白そうなものに目をつけて、次にビジネス書が集まる場所を一通り見ます。

ある日、ふと本屋でいつも同じルートを辿ってることに気づき他ジャンルの本を全然見てないことに気づきました。
その時は、まだ多くの面白い未読の本があるんだと興奮していました。
しかし、いざ見慣れないコーナーへ行くとイマイチ読みたいと思うものがなく、正直読む気が湧かなくいつも通り漫画を手に家に帰りました。

同じような経験をされている方は多いのではないでしょうか。
本を読むジャンルと言うのは、個人の趣味嗜好に合った本を買い読む人が大半であると思います。

それでも全く読んだことがないジャンルをいつか手を出したいとずっと考え、只々キッカケを待っていました。

そんな時、ある日友人が本片手にパソコンを操作しているのを見てプログラミングに興味を持ったことを思い出しました。
友人が楽しそうにやっているのを見て、話を聞いて、今まで手を出したことのないものに興味を持ちました。
これがキッカケでした。

思い出した時、本屋のコーナを眺めてチラ見して興味が湧かないけれど、人が面白いと思っているものなら興味が持てるんだと考えました。

自分が読んだ本の感想を残し他の人に勧めらる、他の人が面白いと思っている本が探せる本に特化したサービスを作ろうと思いました。


機能紹介


トップページ 新規登録
最新の投稿がトップページが表示されます。
左のサイドメニューから各種機能へアクセスすることができます。
画面右上からログイン・新規登録を行えます。
名前・メールアドレス・パスワードを登録として必要します。
ゲストログインは、登録画面下のリンクから行えます。

ログイン アカウントメニュー
ログインには、メールアドレス・パスワードを必要とします。 画面上、右のハンバーガーメニューからアカウントに関するメニューが開きます。
ログアウトもここから行います。

ランキング 本を探す
お気に件数の多い順に投稿が表示されます。 作品名や内容での検索、カテゴリー別検索を行うことができます。

投稿詳細 投稿方法
詳しく見たい投稿をクリックすることで、投稿詳細画面に遷移します。
この画面で著者・出版社が確認でき、自分の投稿の場合編集や削除リンクが表示されます。
また、投稿者のアカウントタップすると投稿者の投稿一覧画面へと遷移します。
サイバー下のリードアウトボタンをタップすることで、投稿画面が開きます。
各種情報を入力し投稿ボタンを押し完了です。
※のついた欄は、入力必須の項目です。

お気に入り方法 お気に入り一覧
投稿詳細画面の下、ハートを押すことでお気に入りすることができ、お気に入り済みをタップすると解除できる。 サイバー三番目からお気に入りした投稿一覧が表示できます。

投稿一覧 アカウント詳細
アカウントメニューの1番目から自分の投稿一覧を表示できます。 アカウントメニューからアカウント詳細を表示できます。
アカウントの詳細情報を確認でき、編集を押すと編集画面へと遷移します。

アカウント編集 投稿編集
アカウントメニュー・詳細から編集へ移動できます。
更新した情報だけ入力をし、更新前のパスワードを最後に入力し更新ボタンで編集を行えます。
投稿詳細画面から移動でき、各種情報を編集することができます。
必須項目は変わらず、各種情報を入力がスクロール下の編集ボタンから完了できます。

使用技術

フロントエンド

  • HTML
  • CSS
  • javascript

バックエンド

  • ruby 2.7.7
  • Rails 6.1.7.1
  • rspec-rails 4.0.2
  • mysql2 0.5.4
  • devise 4.8.1
  • Active Storage 6.1.7.1

ER図

インフラストラクチャー

  • Docker
  • AWS S3
  • Heroku

今後実施予定機能

  • 投稿日付の追加
  • 検索機能での検索対象に著者・出版社を追加
  • 無限スクロール
  • チャット機能

環境構築手順

$ git clone git@github.com:hayato0413/readout.git
$ docker-compose build
$ docker-compose run web db:create db:migrate
$ docker-compose up -d

http://localhost:3000/にアクセスして開発を行ってください

テスト実行

$ docker-compose exec web rspec

Rubocop実行

$ bundle exec rubocop --require rubocop-airbnb 

About


Languages

Language:Ruby 63.3%Language:HTML 21.1%Language:CSS 12.2%Language:JavaScript 2.7%Language:Dockerfile 0.5%Language:SCSS 0.1%Language:Shell 0.0%