Transform start page into vibe coding trainee onboarding with live API integration #5

Copilot · 2025-11-27T23:33:26Z

Replaces the EDR collection viewer with comprehensive onboarding instructions for trainees learning to build a weather app through issue-driven development, featuring live weather data from the FMI Open Data API.

Changes

Onboarding workflow: 5-step guide from issue creation to PR submission with GitHub Copilot integration
Feature inspiration: 7 concrete weather app ideas (current weather, forecasts, charts, maps, alerts, location search, favorites)
API documentation: FMI Open Data EDR 1.1 integration examples with Oslo coordinates, available parameters list, and query syntax
Live API integration: Real-time weather data fetched from FMI EDR API and displayed in a table format
Developer resources: React, Material UI, TypeScript, and Vite documentation links
Actionable CTAs: Direct buttons to create issues, view PRs, and view repository issues

Technical Implementation

Live Weather Data Display

Integrated with existing edrApi.ts service using the getPositionData function
Fetches real weather data from FMI EDR API for Oslo, Norway (Nov 28, 2025)
Displays response as a Material UI table showing parameter names, values, and units
Includes loading states, error handling, and refresh functionality
Type-safe implementation with TypeScript interfaces

API Example

The page demonstrates real-world API usage with live data:

https://opendata.fmi.fi/edr/collections/pal_skandinavia/position?
  f=CoverageJSON&
  parameter-name=Temperature,WindSpeedMS,TotalCloudCover&
  datetime=2025-11-28T12:00:00Z&
  coords=POINT(10.752 59.913)

Weather parameters are displayed in an easy-to-read table format with columns for Parameter, Value (formatted to 1 decimal place), and Unit.

Updates Based on Feedback

Workflow clarification: Updated step 3 to clarify that the coding agent creates pull requests, and step 4 to "Review and Preview" with Firebase Hosting deployment info
PR navigation: Added "View Pull Requests" button for easy access to PRs
Model name correction: Fixed "PAL-AROME model" to "MEPS" (correct model name)
Live data integration: Replaced hardcoded JSON example with real API call displaying results in a table
Type safety: Added proper type checking for numeric values to prevent runtime errors

Screenshots

Before: Technical collection viewer

After: Trainee-focused onboarding with live API data

Fixes Change start page of the application #4

Original prompt

This section details on the original issue you should resolve

<issue_title>Change start page of the application</issue_title>
<issue_description>This repository is starting point for vibe coding trainees to start creating issues to implement nice weather app. App will get its data from the EDR service as there is already starting point for that. Data is available from EDR API like this https://opendata.fmi.fi/edr/collections/pal_skandinavia/position?f=CoverageJSON&parameter-name=TotalCloudCover%2CWindSpeedMS%2CWindDirection%2CTemperature%2CPrecipitation1h%2CPoP%2CHumidity%2CHourlyMaximumGust%2CDewPoint&datetime=2025-11-22T22%3A00%3A00Z%2F2025-12-07T12%3A00%3A00Z&coords=POINT%289.886+62.025%29

Create instructions for the trainees (displayed in the staring page) how to start vibe coding by creating issues and so on.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Change start page of the application #4

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Co-authored-by: mrauhala <[email protected]>

github-actions · 2025-11-27T23:42:07Z

Visit the preview URL for this PR (updated for commit 39ba48c):

https://vibe-fmi--pr5-copilot-change-start-q81mvndo.web.app

_{(expires Sun, 28 Dec 2025 00:31:21 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: fdcba6c351e50e7333c95efd1d7e1954c7a17328}

mrauhala · 2025-11-27T23:48:59Z

src/App.tsx

+                <ListItem>
+                  <ListItemText
+                    primary="4. Submit a Pull Request"
+                    secondary="Once your feature is ready, create a pull request for review"


Coding agent does that for the users. Maybe say something like that coding agent creates pull request and plan and result can be viewed from there and create additional button to pr page of the repo. Also this repo has GitHub action that deploys pr to firebase hosting for previewing, but that requires allowing the workflow to run when agent is done.

Updated in commit 82457c7. Step 3 now clarifies that the coding agent creates the pull request, and step 4 is renamed to "Review and Preview" with information about the automatic Firebase Hosting deployment.

Added a "View Pull Requests" button to navigate to the PRs page.

mrauhala · 2025-11-27T23:49:31Z

src/App.tsx

-                <strong>API Endpoint:</strong> https://opendata.fmi.fi/edr
+
+              <Typography variant="body2" paragraph>
+                <strong>Default Collection:</strong> pal_skandinavia (PAL-AROME model for Scandinavia)


Model is called MEPS even though id is pal_skandinavia

Fixed in commit 82457c7. Changed from "PAL-AROME model" to "MEPS".

mrauhala

@copilot give maybe example result from the Oslo request that you put on . Date has to be from fri 28.11.2025.

…name, add example response Co-authored-by: mrauhala <[email protected]>

Copilot · 2025-11-27T23:55:47Z

@copilot give maybe example result from the Oslo request that you put on . Date has to be from fri 28.11.2025.

Added in commit 82457c7. Updated the API example to use Friday, Nov 28, 2025 and added an "Example Response" section showing the CoverageJSON format with sample weather data (Temperature: 2.3°C, Wind: 4.5 m/s, Cloud Cover: 65%).

mrauhala · 2025-11-27T23:59:01Z

src/App.tsx

-                The OGC Environmental Data Retrieval (EDR) API provides a standard way to query
-                and retrieve environmental data. This application uses the FMI Open Data EDR
-                endpoint.
+                The API returns data in CoverageJSON format. Here's a sample of what you might receive:


@copilot I don't want hardcoded sample, but actual response from the above request. And not the coverage json, but maybe just table of parameters and their values. There is already beginning of the edrapi implementation.

Implemented in commit 55a78fd. Removed the hardcoded JSON sample and replaced it with a real API call using the existing getPositionData function from edrApi.ts. The response is now displayed as a clean table showing parameter names, values, and units.

The implementation includes:

Live API data fetching on page load

Material UI table with Parameter, Value, and Unit columns

Loading spinner while fetching

Error handling with informative messages

Refresh button to reload data

When the API is accessible (e.g., on Firebase Hosting), the table will display real weather data from the FMI EDR API for Oslo on Nov 28, 2025.

Co-authored-by: mrauhala <[email protected]>

Copilot · 2025-11-28T00:09:05Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

opendata.fmi.fi
- Triggering command: /usr/bin/curl curl -s REDACTED,WindSpeedMS,TotalCloudCover&datetime=2025-11-28T12:00:00Z&coords=POINT(10.752%2059.913) (dns block)
- Triggering command: /usr/bin/curl curl -s REDACTED (dns block)
- Triggering command: /usr/bin/curl curl -s REDACTED,WindSpeedMS,TotalCloudCover&datetime=2025-11-28T00:00:00Z&coords=POINT(10.752%2059.913) (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

…-hour time range - Update interface to match actual API response structure - Handle symbol as object with {type, value} properties - Display weather data for multiple time steps in table - Add Time column to show hourly forecasts - Update API query to fetch 3-hour range (12:00-15:00 UTC) - Add proper error handling and logging - Format parameter names for better readability

Initial plan

44d5998

Copilot AI assigned Copilot and mrauhala Nov 27, 2025

Copilot started work on behalf of mrauhala November 27, 2025 23:33 View session

Update start page with vibe coding trainee instructions

eea2cd2

Co-authored-by: mrauhala <[email protected]>

Copilot AI changed the title ~~[WIP] Update start page with trainee instructions~~ Transform start page into vibe coding trainee onboarding Nov 27, 2025

Copilot AI requested a review from mrauhala November 27, 2025 23:42

Copilot finished work on behalf of mrauhala November 27, 2025 23:42

mrauhala reviewed Nov 27, 2025

View reviewed changes

mrauhala requested changes Nov 27, 2025

View reviewed changes

Copilot started work on behalf of mrauhala November 27, 2025 23:51 View session

Address PR feedback: update workflow steps, add PR button, fix model …

82457c7

…name, add example response Co-authored-by: mrauhala <[email protected]>

Copilot finished work on behalf of mrauhala November 27, 2025 23:57

Copilot AI requested a review from mrauhala November 27, 2025 23:57

mrauhala requested changes Nov 27, 2025

View reviewed changes

Copilot started work on behalf of mrauhala November 27, 2025 23:59 View session

Copilot AI and others added 2 commits November 28, 2025 00:05

Replace hardcoded sample with real API call and table display

55a78fd

Co-authored-by: mrauhala <[email protected]>

Fix value type checking in table display

045c6a1

Co-authored-by: mrauhala <[email protected]>

Copilot AI changed the title ~~Transform start page into vibe coding trainee onboarding~~ Transform start page into vibe coding trainee onboarding with live API integration Nov 28, 2025

Copilot finished work on behalf of mrauhala November 28, 2025 00:09

Copilot AI requested a review from mrauhala November 28, 2025 00:09

mrauhala approved these changes Nov 28, 2025

View reviewed changes

mrauhala marked this pull request as ready for review November 28, 2025 00:33

mrauhala merged commit 31d5304 into main Nov 28, 2025
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Transform start page into vibe coding trainee onboarding with live API integration #5

Transform start page into vibe coding trainee onboarding with live API integration #5

Copilot AI commented Nov 27, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 27, 2025 •

edited

Loading

Uh oh!

mrauhala Nov 27, 2025

Uh oh!

Copilot AI Nov 27, 2025

Uh oh!

mrauhala Nov 27, 2025

Uh oh!

Copilot AI Nov 27, 2025

Uh oh!

mrauhala left a comment

Uh oh!

Copilot AI commented Nov 27, 2025

Uh oh!

mrauhala Nov 27, 2025

Uh oh!

Copilot AI Nov 28, 2025

Uh oh!

Copilot AI commented Nov 28, 2025

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Transform start page into vibe coding trainee onboarding with live API integration #5

Transform start page into vibe coding trainee onboarding with live API integration #5

Conversation

Copilot AI commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Technical Implementation

Live Weather Data Display

API Example

Updates Based on Feedback

Screenshots

Comments on the Issue (you are @copilot in this section)

Uh oh!

github-actions bot commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrauhala Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

mrauhala Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

mrauhala left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Nov 27, 2025

Uh oh!

mrauhala Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Nov 28, 2025

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Nov 27, 2025 •

edited

Loading

github-actions bot commented Nov 27, 2025 •

edited

Loading