One moment…
Building the next page.
One moment…
Building the next page.
Country → State → City Selector
A React and TypeScript location selector that dynamically loads Country, State and City data through cascading dropdowns, custom hooks and an external API.
SelectConnectExploreLearn!
Idea to ImpactOne Sprint at a Time
XState is a React and TypeScript application that allows users to select a location through a cascading Country → State → City interface.
The project was built to practice several important frontend concepts, particularly custom React hooks, reusable components, dependent dropdowns, API integration and asynchronous state handling.
Instead of loading all location data at once, each selection determines what data should be requested next.
The main goal was to build a simple but reusable location-selection flow where each dropdown depends on the selection made in the previous one.
The application follows this flow:
Country → State → City
For example:
India → Karnataka → Bangalore
This creates a practical example of managing dependent application state and asynchronous API requests in React.
The application contains three connected dropdowns:
The data for each level is loaded dynamically.
When a user selects a country, the application fetches the available states for that country.
When a state is selected, the application then fetches the available cities for that state.
This avoids loading unnecessary location data before it is required.
Location data is retrieved dynamically from an external API.
The application uses the browser's Fetch API to communicate with the backend service.
The API configuration is kept separate from the components through a dedicated configuration file.
One of the main goals of the project was practicing custom React hooks.
The application separates location-specific API logic into dedicated hooks:
useCountriesuseStatesuseCitiesEach hook is responsible for retrieving its corresponding location data.
This keeps API logic separate from the UI and makes the components easier to understand.
The dropdown interface is implemented through a reusable Select component.
Instead of creating three separate dropdown implementations, the same component can be configured for different location levels.
This demonstrates how reusable components can reduce duplication while keeping the UI consistent.
The application demonstrates a simple but important frontend pattern:
Each selection determines the next API request.
Because the location data comes from an external API, requests can take time or fail.
The application therefore handles:
This provides users with feedback while dependent location data is being retrieved.
The API base URL is configured through a Vite environment variable:
VITE_API_BASE_URL
Keeping the API configuration outside the component code makes it easier to configure the application across different environments.
The project follows a simple structure separating reusable components, hooks and configuration.
The main structure includes:
src/
├── components/
│ └── Select.tsx
├── hooks/
│ ├── useCountries.ts
│ ├── useStates.ts
│ └── useCities.ts
├── config/
│ └── api.ts
├── App.tsx
└── main.tsx
This keeps responsibilities clearly separated.
The project is built with:
React handles the UI and application state, TypeScript provides type safety, Fetch API handles network communication, and custom hooks encapsulate the location API logic.
This project demonstrates how a relatively small UI can involve several important frontend concepts.
The core flow can be summarized as:
User Selection → State Change → API Request → New Data → UI Update
Building this helped reinforce the importance of separating API logic from presentation logic and designing reusable components around repeated UI patterns.
The cascading dropdown also provided practical experience with dependent data, where one piece of state determines what information needs to be fetched next.