https://leaf-record.vercel.app
メモ帳感覚で記録をとりGitHubへコミットできる草生やしアプリです。
アプリの仕様上、基本機能はすべてログインしなければ使えません。
今回は前回作成したアプリの反省としてレスポンシブ対応をしています。
PWA対応しているので、ネイティブアプリっぽくも使えます。
| トップ画面PC | トップ画面SP |
|---|---|
 |
 |
| アプリ説明と仕様上の注意を記載しました。 | メニューボタンは指の届きやすい下側に配置しました |
| リポジトリ一覧画面PC | リポジトリ一覧画面SP |
|---|---|
 |
 |
| すべてのリポジトリではなく、アプリを通じて作成したリポジトリのみ表示しています。 | SP用にレイアウト調整をしました。 |
| 記録画面PC | 記録画面SP |
|---|---|
 |
 |
| 左カラムでファイル作成・選択ができます。記録を上から下に取るので、視線誘導的にファイル削除・ファイル名変更・コミットを下部に配置しています。 | ファイル操作やコミットをすべて下部のボタンから操作できるようにしました。 |
| カテゴリ | 技術 |
|---|---|
| フロントエンド | Next.js 15(App Router), TypeScript, Tailwind CSS v4, shadcn/ui |
| バックエンド | Rails 7.1.3, Ruby 3.3.0 |
| データベース | PostgreSQL |
| 開発環境 | Docker |
| インフラ | Vercel, Render.com |
| テスト（フロントエンド） | Vitest, Playwright |
| その他（バックエンド） | Octokit, DeviseTokenAuth, OmniAuth |
Qiitaに記事を書きました。
【個人開発】メモ帳感覚で使えるGitHub草生やしアプリ「Leaf Record ～大草原不可避～」を作りました【Next.js×Rails】