Mushroom Sighting UI

An Angular-based web application for recording and identifying mushroom sightings. This wizard-style interface guides users through the process of documenting mushroom discoveries with photos, characteristics, and habitat information.

Features

Multi-Step Wizard Interface

Step 1: Basic Information

• Photo upload with preview and removal
• Date/time picker (pre-filled with current date/time)
• Location input
• Mushroom count field

Step 2: Mushroom Characteristics

• Toggleable Physical Features: Gills, pores, ring, volva, bruising, slimy cap, scales, hollow stem
• Cap Shape Selection: Convex, flat, conical, funnel, bell-shaped
• Color Pickers: Cap color and gill/pore color with visual swatches
• All characteristics are optional and can be toggled on/off

Step 3: Habitat & Details

• Habitat Selection: Conifer forest, hardwood forest, mixed forest, grassland, on wood, on soil
• Smell/odor description
• User's identification guess
• Confidence level selector
• Additional notes field
• Safety warning about mushroom consumption

UI/UX Features

• Progress Tracking: Visual progress bar and step indicators
• Form Validation: Required fields are marked and validated
• Responsive Design: Works on desktop, tablet, and mobile devices
• Modern Styling: Gradient backgrounds, smooth transitions, hover effects
• Image Preview: Uploaded photos display with remove option
• Visual Selection: Icon-based buttons for characteristics, shapes, and habitats
• Color Swatches: Visual color selector for mushroom colors

Installation

Prerequisites

• Node.js (v18 or higher)
• npm (comes with Node.js)

Setup

1. Navigate to the ui directory:

   cd /Users/jonaslingg/code/shroomp/ui

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open your browser and navigate to:

   http://localhost:4200
   

Docker Deployment (Production)

The application includes a production-ready Dockerfile using a multi-stage build with NGINX.

Build the Docker Image

# Build the image
docker build -t mushroom-sighting-ui:latest .

# Or with a specific tag
docker build -t mushroom-sighting-ui:1.0.0 .

Build with Custom API URL

You must specify the API URL at build time:

# Build with production backend
docker build --build-arg API_URL="https://your-backend.run.app/items" -t mushroom-sighting-ui:latest .

# Or build with local backend
docker build --build-arg API_URL="http://localhost:8080/items" -t mushroom-sighting-ui:latest .

Run the Container

# Run on port 80
docker run -d -p 80:80 --name mushroom-ui mushroom-sighting-ui:latest

# Run on a different port (e.g., 8080)
docker run -d -p 8080:80 --name mushroom-ui mushroom-sighting-ui:latest

Container Management

# View logs
docker logs mushroom-ui

# Stop the container
docker stop mushroom-ui

# Remove the container
docker rm mushroom-ui

# View container status
docker ps

Environment Variables

The application uses Angular environment files to configure the backend API URL:

• Development (environment.ts): Uses http://localhost:8080/items
• Production (environment.prod.ts): Placeholder replaced at build time

The API URL is configured at build time via the API_URL build argument in Docker. This ensures the correct backend URL is compiled into the application. To change the backend URL, rebuild the image with a new API_URL value.

Deploy to Google Cloud Run

For production deployment with automatic CI/CD:

1. Set up GitHub Actions secrets (see DEPLOYMENT.md)
2. Add BACKEND_API_URL secret with your backend URL
3. Push to main branch or trigger workflow manually
4. Service deploys automatically to Cloud Run

See DEPLOYMENT.md for complete setup instructions

Docker Image Details

• Base Image: nginx:1.25-alpine (~40MB)
• Final Size: ~20-30MB (compressed)
• Features:
  • Gzip compression enabled
  • Security headers configured
  • Static asset caching (1 year)
  • SPA routing support
  • Health check endpoint at /health

Health Check

# Check if container is healthy
docker inspect --format='{{.State.Health.Status}}' mushroom-ui

# Test health endpoint
curl http://localhost/health

Usage

Recording a Sighting

1. Upload Photo: Click the upload area to select a mushroom photo
2. Enter Basic Info: Set date/time (defaults to now), location, and count
3. Click Next: Proceed to characteristics
4. Select Features: Toggle physical features, select cap shape and colors
5. Click Next: Proceed to habitat details
6. Add Details: Select habitat, add smell, your identification guess, and notes
7. Submit: Click "Record Sighting" to save

Navigation

• Use Next and Previous buttons to move between steps
• Form validates required fields before allowing progression
• All data is preserved when navigating back and forth

Data Output

When you submit a sighting, the data is logged to the browser console in the following format:

{
  "image": "data:image/jpeg;base64,...",
  "dateTime": "2025-11-09T14:30:00.000Z",
  "location": "Pacific Northwest forest",
  "count": 5,
  "characteristics": ["Has Gills", "Has Ring", "Color Changes When Bruised"],
  "capShape": "convex",
  "capColor": "brown",
  "gillColor": "white",
  "habitat": "conifer",
  "smell": "sweet, fruity",
  "userIdentification": "Boletus edulis",
  "notes": "Found growing under pine trees",
  "confidence": "medium"
}

Project Structure

ui/
├── src/
│   ├── app/
│   │   ├── mushroom-sighting-wizard/
│   │   │   ├── mushroom-sighting-wizard.component.ts    # Component logic
│   │   │   ├── mushroom-sighting-wizard.component.html  # Template
│   │   │   └── mushroom-sighting-wizard.component.scss  # Styles
│   │   ├── app.component.ts                             # Root component
│   │   └── app.module.ts                                # App module
│   ├── index.html                                        # HTML entry point
│   ├── main.ts                                           # TypeScript entry point
│   └── styles.scss                                       # Global styles
├── angular.json                                          # Angular configuration
├── package.json                                          # Dependencies
├── tsconfig.json                                         # TypeScript config
└── README.md                                             # This file

Available Scripts

• npm start - Start development server (localhost:4200)
• npm run build - Build for production
• npm run watch - Build and watch for changes
• npm test - Run unit tests

Component Details

MushroomSightingWizardComponent

The main wizard component manages:

• Form State: Reactive forms with validation
• Step Navigation: Multi-step wizard flow
• Image Handling: File upload and preview
• Data Collection: All mushroom characteristics
• Form Submission: Data preparation and output

Form Fields

Required Fields:

• Photo
• Date/Time
• Location
• Count (minimum 1)

Optional Fields:

• All characteristics (toggleable)
• Cap shape
• Colors
• Habitat
• Smell
• User identification
• Confidence level
• Notes

Customization

Adding Characteristics

Edit characteristics array in mushroom-sighting-wizard.component.ts:

characteristics: MushroomCharacteristic[] = [
  { id: 'new-char', label: 'New Characteristic', icon: '🆕' },
  // ... existing characteristics
];

Adding Colors

Edit colors array:

colors = [
  { id: 'new-color', label: 'New Color', hex: '#HEXCODE' },
  // ... existing colors
];

Modifying Styles

Edit mushroom-sighting-wizard.component.scss to change:

• Color scheme
• Button styles
• Layout and spacing
• Responsive breakpoints

Integration

To integrate with a backend service:

1. Create a service to handle API calls:

   ng generate service services/mushroom-sighting

2. Update onSubmit() in the component to call the service:

   onSubmit(): void {
     if (this.sightingForm.valid) {
       const data = this.prepareSightingData();
       this.mushroomService.createSighting(data).subscribe(
         response => console.log('Saved:', response),
         error => console.error('Error:', error)
       );
     }
   }

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Safety Notice

This application includes a safety warning reminding users never to consume mushrooms based solely on visual identification. Always consult with experienced mycologists and use multiple reliable sources before considering any mushroom for consumption.

License

This project is part of the Shroomp mushroom identification system.