Omaship
Documentation Menu ▼

Tutorial: Build Your First Feature

Let's build a customer feedback widget — complete with database, UI, and admin view — in under 10 minutes using Claude Code.

What you'll build: A feedback widget where visitors submit ratings and comments, stored in your database, viewable in your admin dashboard. Deployed automatically when you push.

Prerequisites

Step 1: Describe What You Want

Open your terminal in the project root and start Claude Code: 

$ claude

Give it a clear, specific prompt. Reference existing patterns in the codebase: 

Build a customer feedback feature:

1. Model: Feedback with name (string), email (string), rating (integer 1-5),
   comment (text), and timestamps
2. Public page at /feedback with a clean form using Tailwind CSS matching
   the existing site design
3. Controller that creates feedback and shows a thank-you message
4. Admin view at /admin/feedback listing all submissions, newest first
5. Add validations: name and rating required, email format, rating 1-5
6. Write model tests for the validations

Follow the patterns in app/views/pages/ for the public form and
app/views/admin/ for the admin view. Use Tailwind classes from the
existing templates.

Claude Code reads your CLAUDE.md, understands the project structure, and generates everything.

Step 2: Review What It Built

In about 60 seconds, Claude Code generates: 

# New files created:
app/models/feedback.rb                          # Model with validations
app/controllers/feedbacks_controller.rb         # Public create action
app/controllers/admin/feedbacks_controller.rb   # Admin index
app/views/feedbacks/new.html.erb                # Public form
app/views/feedbacks/create.html.erb             # Thank-you page
app/views/admin/feedbacks/index.html.erb        # Admin list view
db/migrate/XXXXXX_create_feedbacks.rb           # Database migration
test/models/feedback_test.rb                    # Model tests

# Modified files:
config/routes.rb                                # Added routes

Because Omaship follows Rails conventions, Claude Code knows exactly where to put each file. No guessing, no misconfiguration.

Step 3: Run the Migration

$ bin/rails db:migrate

That's it — your database schema is updated. SQLite handles it instantly.

Step 4: Verify Locally

With bin/dev running, visit:

  • http://localhost:3000/feedback — Your feedback form
  • Submit a test entry
  • http://localhost:3000/admin/feedback — See it in the admin

Step 5: Run the Tests

$ bin/rails test test/models/feedback_test.rb
Running 5 tests...

5 tests, 8 assertions, 0 failures, 0 errors
All green. ✓

Step 6: Deploy

Commit and push. Omaship's CI/CD handles the rest:

$ git add -A
$ git commit -m "feat: add customer feedback widget"
$ git push

GitHub Actions runs your test suite, security scanning (Brakeman), and if everything passes, deploys automatically via Kamal. Zero-downtime. SSL included.

What just happened: You described a feature in plain English, Claude Code built it following Rails conventions, tests passed, and it's live in production. Total time: under 10 minutes.

What Makes This Different

With a typical setup, building this feature means:

  • Setting up a database (and managing migrations)
  • Configuring a deployment pipeline
  • Setting up test infrastructure
  • Configuring security scanning
  • Managing SSL certificates
  • Hoping AI tools understand your non-standard structure

With Omaship, all of that is already done. You focus entirely on the feature — the thing your customers actually pay for.

Going Further

Now that you've built your first feature, try asking Claude Code to:

  • Add email notifications — "Send me an email when new feedback is submitted"
  • Add charts — "Show a bar chart of ratings in the admin dashboard using Chart.js"
  • Add export — "Add a CSV export button to the admin feedback page"
  • Add real-time updates — "Use Turbo Streams to show new feedback in the admin without page refresh"

Each of these takes minutes, not hours. Rails conventions + AI tools + Omaship infrastructure = shipping speed.

Next Steps