Add 3D globe visualization showing language origin locales with backend locale support

[agent-kal]

We want the frontend of the greetings project to be way more fun. To do this, when a greeting is shown in any language, we want to show a globe indicating where that language is primarily spoken.

Localization

The backend needs to provide the proper locale for each language. The greetings.json should include a locale field, and the APIs that return greetings should include that locale in the API responses

Display

Using a cool 3d globe, show me where the locale of the language corresponds to in the world. Make sure to use a simple solution so that its easy to maintain and ensure its accuracy.

Completed by Agent
Fixes #148

[github-actions]

Test this PR by running the following command:

dagger -m github.com/kpenfound/greetings-api@pull/153/head call check

Run this branch locally:

dagger -m github.com/kpenfound/greetings-api@pull/153/head call serve up

[agent-kal]

Pull Request Review

General Opinion

This pull request successfully implements the requested feature to make the greetings frontend more engaging by adding a 3D globe visualization that shows where each language is primarily spoken. The implementation is well-structured and addresses both the backend localization requirements and the frontend visualization needs.

What Works Well

• Backend Changes: The addition of the locale field to the Greeting struct and greetings.json is clean and maintains backward compatibility
• API Response: The FormatResponse function properly includes the locale in JSON responses
• Frontend Implementation: The 3D globe using Three.js is visually appealing and functional
• Error Handling: Added proper return statements after error responses in the HTTP handlers
• Test Coverage: Tests were updated to reflect the new locale field

Required Changes

1. Missing /random endpoint: The frontend calls http://localhost:8080/random but the backend only has / and /{language} endpoints. Either:

   • Add a dedicated /random route, or
   • Update the frontend to call / instead of /random

2. Error handling in FormatResponse: The json.Marshal call ignores errors with _. This should be handled properly:

   jsonData, err := json.Marshal(response)
   if err != nil {
       // Handle error appropriately
   }

Optional Improvements

1. Locale Selection: Some locale choices could be more representative:

   • Portuguese is mapped to "PT" (Portugal) but "BR" (Brazil) has far more Portuguese speakers
   • Arabic is mapped to "SA" (Saudi Arabia) but could represent a more central Arabic-speaking region

2. Frontend Resilience: The globe initialization could benefit from error handling if Three.js fails to load or the WebGL context isn't available

3. Country Data Validation: The addCountryMarker function silently returns if a locale isn't found. Consider logging or showing a fallback message.

4. Performance: The globe auto-rotates continuously, which may consume unnecessary CPU/GPU resources. Consider pausing rotation when not in focus.

Technical Implementation Assessment

The implementation meets the requirements:

• ✅ Backend provides locale field in API responses
• ✅ Frontend displays a 3D globe showing language regions
• ✅ Simple solution using established libraries (Three.js)
• ✅ Maintains existing functionality while adding new features
• ✅ Tests updated to reflect changes

Summary

This pull request needs minor changes before it can be merged. The primary issue is the API endpoint mismatch between frontend and backend that would cause the feature to fail in production. Once the endpoint routing is fixed and error handling is improved, this will be a solid implementation that successfully delivers the requested functionality.

The code is well-structured, follows good practices, and provides an engaging user experience as requested. The use of Three.js for the globe visualization is appropriate and maintainable.