Country Details Page:

Displays all country-related information including code, ISO code, phone code, and currency using joined relational data.

Integrated a dynamic list of states belonging to each country.

Utilized JSON aggregation to efficiently represent nested state data within the country context.

State Details Page:

Upon selecting a specific state, displays related cities under that state dynamically.

Ensured foreign key relationships between country → states → cities are properly used to retrieve and display human-readable data instead of raw IDs.

Dynamic Dropdowns:

Implemented cascading dropdowns: when a country is selected, its respective states load dynamically using Angular’s ngOnInit() and reactive forms.

Maintained data integrity and user experience by preventing selection of invalid or unrelated states/cities.