React-Rails TODO App Development

Development guidelines for REACT-RAILS-TODO-APP-by-speckit - a full-stack TODO application built with React and Rails, featuring Google OAuth2 authentication, Japanese UI localization, and automated CI/CD with AI-powered autofix capabilities.

Project Overview

This is a full-stack TODO application with:

Project Structure

The codebase follows this structure:

```

.

├── .github/workflows/ # CI/CD configuration

├── backend/ # Rails API (Ruby 3.x, Rails 7.1)

│ ├── app/ # Application code

│ ├── spec/ # RSpec tests (74 tests)

│ └── db/ # Database files (SQLite)

├── frontend/ # React SPA (React 18.2)

│ └── src/ # Source code (Jest tests: 55 tests)

├── specs/ # Feature specifications

│ ├── 001-todo-google-oauth2/

│ ├── 002-japanese-ui/

│ └── 003-pull-request-github/

└── docker-compose.yml # Docker configuration

```

Development Commands

Testing

Run backend tests:

```bash

docker compose exec backend bundle exec rspec

```

Run frontend tests:

```bash

docker compose exec frontend npm test -- --watchAll=false

```

Linting

Backend linting (RuboCop):

```bash

docker compose exec backend bundle exec rubocop

docker compose exec backend bundle exec rubocop -a # Auto-fix

```

Frontend linting (ESLint):

```bash

docker compose exec frontend npm run lint

docker compose exec frontend npm run lint:fix # Auto-fix

```

Database Operations

```bash

docker compose exec backend rails db:create

docker compose exec backend rails db:migrate

docker compose exec backend rails db:reset

```

Code Style Guidelines

Ruby/Rails

JavaScript/React

Git Commits

CI/CD Workflow

GitHub Actions Configuration

- `backend-test`: RSpec tests

- `frontend-test`: Jest tests

- `backend-lint`: RuboCop linting

- `frontend-lint`: ESLint linting

Autofix Workflow (AI-Powered)

The repository includes an automated fix workflow that:

**When it triggers:**

**What it fixes:**

**How it works:**

**Loop prevention:**

**Partial fixes:**

**Requirements:**

**Important:**

Development Workflow

1. **Start development environment:**

```bash

docker compose up

```

2. **Make changes** following code style guidelines

3. **Run tests locally** before committing:

```bash

docker compose exec backend bundle exec rspec

docker compose exec frontend npm test -- --watchAll=false

```

4. **Run linters** to catch issues early:

```bash

docker compose exec backend bundle exec rubocop -a

docker compose exec frontend npm run lint:fix

```

5. **Commit** using Conventional Commits format

6. **Create pull request** - CI will run automatically

7. **Review autofix commits** if CI fails and autofix workflow runs

Feature History

Key Technologies