Modernize the API and web app

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @lifeiscontent

.github/dependabot.yml

@@ -1,21 +1,44 @@
 version: 2
 updates:
   - package-ecosystem: bundler
-    directory: "/api"
+    directory: /api
     schedule:
       interval: daily
+    groups:
+      rails:
+        patterns:
+          - "rails"
+          - "action*"
+          - "active*"
+          - "railties"
     open-pull-requests-limit: 10
-    reviewers:
-      - lifeiscontent
   - package-ecosystem: npm
-    directory: "/web"
+    directory: /web
     schedule:
       interval: daily
     groups:
       storybook:
-        applies-to: version-updates
         patterns:
-        - "@storybook*"
+          - "storybook"
+          - "@storybook/*"
+          - "eslint-plugin-storybook"
+      graphql-codegen:
+        patterns:
+          - "@graphql-codegen/*"
+      vitest:
+        patterns:
+          - "vitest"
+          - "@vitest/*"
+      playwright:
+        patterns:
+          - "playwright"
+          - "@playwright/*"
+      oxc:
+        patterns:
+          - "oxlint"
+          - "oxfmt"
     open-pull-requests-limit: 10
-    reviewers:
-      - lifeiscontent
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: weekly

.github/workflows/api.yml

@@ -1,41 +1,39 @@
 name: Api
 
-on: [push]
+on:
+  push:
+    branches: [main]
+    paths: ['api/**', '.github/workflows/api.yml']
+  pull_request:
+    paths: ['api/**', '.github/workflows/api.yml']
 
 jobs:
   build:
     runs-on: ubuntu-latest
     services:
       postgres:
-        image: postgres:12
+        image: postgres:18
         ports:
           - 5432:5432
         env:
           POSTGRES_USER: postgres
           POSTGRES_PASSWORD: postgres
         options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
+    env:
+      RAILS_ENV: test
+      DATABASE_URL: postgres://postgres:postgres@localhost:5432/realworld_test
+    defaults:
+      run:
+        working-directory: ./api
     steps:
-      - uses: actions/checkout@v4
-      - name: Install dependent libraries
-        run: sudo apt-get install libpq-dev
-      - uses: ruby/setup-ruby@v1
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: ruby/setup-ruby@14594264cd68ce8a2345dd349bc3d138a4ef85c8 # v1.327.0
         with:
           working-directory: ./api
           bundler-cache: true
-      - name: Setup Database
+      - name: Run setup, RuboCop, and RSpec
+        run: bin/ci
+      - name: Check that schema.graphql is current
         run: |
-          cp config/database.yml.github-actions config/database.yml
-          bin/rails db:create
-          bin/rails db:schema:load
-        working-directory: ./api
-        env:
-          RAILS_ENV: test
-          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: postgres
-      - name: Run RSpec
-        run: bundle exec rspec
-        working-directory: ./api
-        env:
-          RAILS_ENV: test
-          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: postgres
+          bin/rails graphql:schema:idl
+          git diff --exit-code schema.graphql

.github/workflows/web.yml

@@ -1,37 +1,81 @@
 name: Web
 
-on: [push]
+on:
+  push:
+    branches: [main]
+    paths: ['web/**', 'api/**', '.github/workflows/web.yml']
+  pull_request:
+    paths: ['web/**', 'api/**', '.github/workflows/web.yml']
+
+defaults:
+  run:
+    working-directory: ./web
 
 jobs:
-  build:
+  check:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: jdx/mise-action@2d8d4cafcbd33be2ea37d2b6f5ad595363d1f1ca # v5.1.1
         with:
-          cache-dependency-path: web/package-lock.json
-          cache: "npm"
-          node-version: "18.x"
-      - run: npm install
-        working-directory: ./web
-      - run: npm run lint
-        working-directory: ./web
-      - run: npm run build
-        working-directory: ./web
-      - run: npx playwright install --with-deps
-        working-directory: ./web
-      - run: npm run build-storybook -- --quiet
-        working-directory: ./web
-      - run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 6006 --silent" \
-            "npx wait-on http://127.0.0.1:6006 && npm run test-storybook"
-        working-directory: ./web
+          working_directory: web
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm format:check
+      - run: pnpm lint
+      - run: pnpm typecheck
+      - run: pnpm exec playwright install --with-deps chromium
+      - name: Run the stories as tests
+        run: pnpm test
+      - run: pnpm build
       - name: Publish Storybook and run visual tests
-        if: github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]'
-        run: npm run chromatic -- --exit-once-uploaded
+        if: github.actor != 'dependabot[bot]'
+        run: pnpm chromatic --exit-once-uploaded
         env:
           CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-        working-directory: ./web
+
+  e2e:
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:18
+        ports:
+          - 5432:5432
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: postgres
+        options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
+    env:
+      RAILS_ENV: test
+      DATABASE_URL: postgres://postgres:postgres@localhost:5432/realworld_test
+      TEST_MODE: fullstack
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: ruby/setup-ruby@14594264cd68ce8a2345dd349bc3d138a4ef85c8 # v1.327.0
+        with:
+          working-directory: ./api
+          bundler-cache: true
+      - name: Start the API on port 4000
+        working-directory: ./api
+        run: |
+          bin/rails db:create db:schema:load
+          bin/rails server -p 4000 > log/server.log 2>&1 &
+          for _ in $(seq 1 30); do
+            curl --silent --fail http://localhost:4000/up > /dev/null && exit 0
+            sleep 1
+          done
+          cat log/server.log
+          exit 1
+      - uses: jdx/mise-action@2d8d4cafcbd33be2ea37d2b6f5ad595363d1f1ca # v5.1.1
+        with:
+          working_directory: web
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm exec playwright install --with-deps chromium
+      - name: Run the RealWorld e2e suite
+        run: pnpm exec playwright test
+      - uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: failure()
+        with:
+          name: playwright-results
+          path: web/test-results

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["oxc.oxc-vscode", "Shopify.ruby-lsp", "GraphQL.vscode-graphql"]
+}

README.md

@@ -1,63 +1,71 @@
 # realworld
 
-![Web](https://github.com/lifeiscontent/realworld/workflows/Web/badge.svg?branch=master)
-![Api](https://github.com/lifeiscontent/realworld/workflows/Api/badge.svg?branch=master)
-[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://master--5fcdd27b2771900021fc381e.chromatic.com)
+![Web](https://github.com/lifeiscontent/realworld/actions/workflows/web.yml/badge.svg?branch=main)
+![Api](https://github.com/lifeiscontent/realworld/actions/workflows/api.yml/badge.svg?branch=main)
+[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://main--5fcdd27b2771900021fc381e.chromatic.com)
 
-This repo implements opinionated best practices for Apollo Client, React, Next.js and Storybook.
+A [RealWorld](https://docs.realworld.show) app with a GraphQL API. The
+GraphQL schema maps one to one to the RealWorld REST API.
 
-1 caveat is it does not try to implement a best practice on UI Components as the styles are reused from the [realworld.io](https://github.com/gothinkster/realworld) project.
+| Project | Stack |
+| --- | --- |
+| [`api`](api) | Ruby 4, Rails 8.1, graphql-ruby, action_policy, Postgres 18 |
+| [`web`](web) | TypeScript, Vite, React 19, React Router 8 (SPA mode), Apollo Client 4, Storybook 10 |
+
+The two projects deploy independently. Each project has its own
+`mise.toml`, so [mise](https://mise.jdx.dev) installs the correct tool
+versions in each folder.
 
 ## Setup
 
 ### Api
 
+The API needs Postgres. Set `DATABASE_URL` if Postgres is not on
+`localhost:5432`.
+
 ```sh
 cd api
-bundle
-bin/rails db:migrate
-bin/rails db:seed
-bin/rails s
+mise install
+bin/setup
 ```
 
+`bin/setup` installs the gems, prepares the database, and starts the API on
+port 4000.
+
 ### Web
 
 ```sh
 cd web
-npm install
-npm run dev
+mise install
+pnpm install
+pnpm dev
 ```
 
-## Testing
+The app opens on <http://localhost:5173> and uses the API on port 4000.
+
+## Tests
 
 ### Api
 
 ```sh
 cd api
-bin/rails spec
+bundle exec rspec
 ```
 
 ### Web
 
 ```sh
 cd web
-npm test
+pnpm test
 ```
 
-## Tooling
-
-### Api
-
-#### Generate ERD
+`pnpm test` runs the Storybook stories as browser tests. To run the
+RealWorld e2e suite, start the API, then run:
 
 ```sh
-bin/rails erd
+cd web
+TEST_MODE=fullstack pnpm exec playwright test
 ```
 
-### Web
-
-#### Storybook
-
-```sh
-npm run storybook
-```
+See [web/docs/feature-development.md](web/docs/feature-development.md) for
+the structure of the web app.

api/.gitignore

@@ -18,11 +18,5 @@
 !/tmp/pids/
 !/tmp/pids/.keep
 
-# Ignore uploaded files in development.
-/storage/*
-!/storage/.keep
-.byebug_history
-
 # Ignore master key for decrypting credentials and more.
 /config/master.key
-/erd.pdf