# Build a Pet Tracker
This is the first complete Amber V2 application guide. It starts from the clean
web template and builds one small feature all the way through:
- typed Crystal records and an in-memory catalog;
- routes and one controller with HTML and JSON representations;
- ECR list and detail views;
- local CSS that carries Amber's warm, faceted visual language;
- local JavaScript loaded through the generated import map;
- request specs and a native application build.
The catalog is intentionally in memory. That keeps the tutorial inside the
release-gated web core while persistence integrations remain preview surfaces.
## 1. Generate the application
**Run from: the parent directory where `pet_tracker/` should be created.**
```bash
amber new pet_tracker
cd pet_tracker
```
Keep the generated layout and import map. The steps below replace the `/` route
and add application-owned files around that working baseline.
## 2. Define the record
**File: `src/models/pet.cr` — create this complete file.**
```crystal
struct Pet
include JSON::Serializable
getter slug : String
getter name : String
getter kind : String
getter status : String
getter note : String
def initialize(@slug, @name, @kind, @status, @note)
end
end
```
`JSON::Serializable` gives the same typed record an explicit JSON
representation. The ECR views will read the getters directly.
## 3. Add a small catalog
**File: `src/models/pet_catalog.cr` — create this complete file.**
```crystal
module PetCatalog
PETS = [
Pet.new("miso", "Miso", "Cat", "Available", "Window-seat specialist"),
Pet.new("juniper", "Juniper", "Dog", "Fostered", "Trail-tested optimist"),
Pet.new("pixel", "Pixel", "Rabbit", "Available", "Quiet keyboard companion"),
]
def self.all : Array(Pet)
PETS
end
def self.find(slug : String) : Pet?
PETS.find { |pet| pet.slug == slug }
end
end
```
This is the tutorial's temporary data boundary. A future database-backed app
can replace `PetCatalog` without moving rendering or route decisions into the
model.
## 4. Negotiate HTML and JSON
**File: `src/controllers/pets_controller.cr` — create this complete file.**
```crystal
class PetsController < ApplicationController
def index
pets = PetCatalog.all
respond_with do
html { render("index.ecr") }
json { pets.to_json }
end
end
def show
pet = PetCatalog.find(params["slug"])
unless pet
return set_response(
body: "Pet not found",
status_code: 404,
content_type: "text/plain"
)
end
respond_with do
html { render("show.ecr") }
json { pet.to_json }
end
end
end
```
Each action loads its resource once. `respond_with` then states which public
representations exist. Read [Respond With](../controllers/respond-with/) for
content negotiation details.
## 5. Register the routes
**File: `config/routes.cr` — replace the generated `routes :web` block. Leave
the generated pipelines and `routes :static` block in place.**
```crystal
routes :web do
get "/", PetsController, :index
get "/pets", PetsController, :index
get "/pets/:slug", PetsController, :show
end
```
The dynamic `:slug` segment is available as `params["slug"]` inside `show`.
## 6. Create the ECR views
**File: `src/views/pets/index.ecr` — create this complete list view.**
```ecr
Pet Tracker · Amber V2
Small records. Good homes.
Meet the animals currently moving through our foster network.
<% pets.each do |pet| %>
<%= escape_html(pet.kind) %>
<%= escape_html(pet.status) %>
<% end %>
```
The template owns HTML and escapes every value at the output boundary. The
controller only coordinates data and representations.
**File: `src/views/pets/show.ecr` — create this complete detail view.**
```ecr
← All pets