Rails/Rails決勝Bootcampプロジェクト

Flatiron学校での私の最終プロジェクトのために、私は私の大好きなテレビゲーム(Apex Legends)の1つのまわりで、ウェブアプリケーションを構築するのを選びました.これは、マッチ選手アプリケーションは、選手たちのチームに追加するチームメイトを見つけることができます.コンセプトはシンプルです.プレーヤーを作成することができます表示、ロビーに参加する要求.
ロビーは、ホストのgamertagだけでなく、gamemode、相対的な時間、プラットフォーム、要件、地域、および興味のあるプレーヤーが表示されます.現在、ロビーとリクエストだけを作成することができますが更新されないか削除されます.
私は、認証、プロファイルページ、およびリアルタイムのゲームの統計情報を含む将来のバージョンでより多くの機能を追加する計画.今のところ、選手の作成とビューに制限されます.

レールAPI

バックエンドはAPIとしてRuby on Railsを使用します.このセクションはかなり簡単にビルドできました.私は、反応フロントエンドから私のHTTP要求を取り扱うために、ラックCormsミドルウェアを必要としました、そして、私のJSONレンダリングをフィルターにかけるために、fast_jsonapi宝石.一旦私のモデルがセットアップであるならば、私はそれからリクエストのためにルートをつくりました.

初期設計

フロントエンドで何かをする前に、Figmaを使ったWebデザインを作成しました.私は方向性を必要とし、このリファレンスを持つことは、プロジェクトのReactJS部分に到達するときに大きな利益でした.私はどのように多くのコンポーネント私が必要とどのように物事をスタイルについては非常に良いアイデアを持っていた.私も私のテーマのフォントをダウンロードしました.
これが私のデザインです

リアクターズ

私のフロントエンドはreactjsフレームワークを利用しました.私はJumpStart私のプロセスに'作成反応アプリ'を使用します.特に最初のセットアップのために、このセクションのためにより多くの可動部分がありました.現在の状態には2つのコンテナと10個のコンポーネントがあります.私は様々なパッケージを使用しました.

反応する 反応する

Reduxは、お使いのアプリケーションは、ストア、またはグローバル州からデータを読み取ることができます.アクションは、データを更新するには、ストアに派遣することができます.
これは、このスケールのアプリケーションのためにreduxを構成するのは初めてでした.そこで私はかなりの数のロードブロックをヒットし、完全にセットアップを理解するための資料の参照をたくさんしていた.レビューの後、私は別々のファイルに店、アクションと減速器を分割することを決めた.それぞれのモデルは独自のリダクションとアクションファイルを持っています.これはすべてを読みやすく、後で更新しました.コンポーネントの特定のアクションを必要とするたびに、アクションファイルから関数をインポートしました.

反応ルータ 反応ルータ

私のアプリケーションでは、適切なコンポーネントを参照するルートだけでなく、個々のロビーのための動的なルートが必要でした.これは、単一のページングアプリケーション(SPA)を複数のビューを維持することができました.ページは本質的に再ロードされません.
セットアップは非常にシンプルで理解しやすいです.すべてのコンポーネント/ルートが同梱されたルータタグがあります.各ルートにはパスとコンポーネントがあります.

<Router>
        <div className='bg-wraith bg-center bg-top bg-cover bg-no-repeat bg-fixed pb-16'>
              <Nav />
              <Route exact path="/" component={Home} />
              <Route exact path='/about' component={About} />
              <Route exact path="/lobbies" component={LobbiesContainer} />
              <Route path="/lobbies/:id" component={Lobby} />
        </div>
</Router>

立木 CSS

Tailwindは楽しい部分だった、それを考え出すのプロセスでも楽しかった.私はスタイルの柔軟性のためにbootstrapのような他のフレームワークの上でTruwindを選びました.Tailwindの設定ファイルをカスタマイズするのは簡単です.これは、プレーンのCSSを書くようなものでしたが、クラスの属性で.
この単純なセットアップ.

<div className='card shadow-2xl bg-gray-500 bg-opacity-50 text-gray-200 p-10'>
            <div className="font-semibold text-xl tracking-wider uppercase"><h2><Link to={`/lobbies/${id}`}>{gamertag}</Link></h2></div>
            <div className="text-sm"><p>{gamemode} • 30 min</p></div>
            <div className="flex mt-2">{platformType()} {micRequired()}</div>
            <div className="text-sm mt-2"><p>{region} • {skillLevel}</p></div>
            <div className="text-sm mt-4 btext-white"><p>{description}</p></div>
            <div className="mt-8 inline-block float-left">
                <svg className="w-6 h-6 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>

                <span className='text-sm ml-1 mt-0.5'>7 Interested</span>  
            </div>
            <div className="mt-6 inline-block float-right">
                <Link to={`/lobbies/${id}`}>
                    <button className='flex bg-red-600 hover:bg-red-500 text-white hover:text-white py-2 px-3 text-sm uppercase'>
                    View Lobby
                    </button>
                </Link>
            </div>
</div>

これらの応答カードを作成.


スタイリングは、私がコンフィギュレーションを使用して作成した1つの模擬とほぼ同じです.これはおそらく私が以前のプロジェクトで作成した任意のモックアップに得ている最も近いです.
最後のインデックスページを見てみましょう.上記のmockupと比較してください.

したいコードに飛び込むには?チェックアウトレポ242479152.