Rails API + React でマッチングアプリを試してみた

以下のコンテンツを実際に実行してみました。

Rails API + React でマッチングアプリを作ってみた
https://qiita.com/kazama1209/items/86c0adc8b6d38fceb36a

ソースコードを clone

% git clone https://github.com/kazama1209/rails-react-matching-app.git

フォルダ移動

% cd rails-react-matching-app
% cd backend

db作成

% docker-compose run api rails db:create
% docker-compose run api rails db:migrate
% docker-compose run api rails db:seed

起動

%　docker-compose up -d

Apple Silicon mac の場合

backend/docker-compose.yml を以下のようにしないと動きませんでした。

version: "3"
services:
  db:
    platform: linux/x86_64
    image: mysql:8.0

% cd rails-react-matching-app
% cd frontend

インストール

% yarn install

起動

% yarn start

とりえあず、 localhost:3000 で画面が表示されたました。

ユーザーを作成もできて、ログインもできたんですが、

なぜか user 一覧に何もでませんでした、謎。原因解明中

** 追記

原因わかりました。db:seed で追加したユーザーが全員東京となので、
自分のプロフィールも東京にしないと、マッチングしません笑

同じ都道府県の人をおすすめしてくる仕様のようです笑

元の frontend のコードは create-react-app で書かれているんですが
今流行りの React + SSR フレームワークである Next.js で書き換えてみました。

ポイントとしては
・ファイルベースのルーティングになった
・useSWRが使えてコードが見やすくなった
・getServerSidePropsが使えてサーバーサイドで処理ができるようになった

コードを以下に置いておきます。
ブランチは matching_app

大急ぎでRails+Reactのアプリケーションを作るときにやったこと前編
http://tolarian-academy.net/create-new-rails-react-app-pt1