🧭 Course: Integrative Programming and Technologies
Year Level: 3rd Year – BSIT / BSCS
Time Allotment: 3 hours
Laboratory Type: Hands-on Programming Activity
🎯 Learning Outcomes:
After completing this laboratory activity, students will be able to:
1. Define the concept of Application Programming Interfaces (APIs) and
their use in web applications.
2. Fetch data from a REST API using the fetch() method in ReactJS.
3. Implement state management using useState() and useEffect() hooks.
4. Display and manage dependent dropdown menus (Region → Province
→ City → Barangay).
5. Apply user interface design using CSS.
🧠 Background and Discussion:
What is an API?
An Application Programming Interface (API) allows communication
between software systems.
For example, a web application can use an API to retrieve location data,
weather data, or user information from another system.
RESTful API:
A REST (Representational State Transfer) API uses HTTP methods like:
GET – Retrieve data
POST – Send new data
PUT – Update data
DELETE – Remove data
PSGC API:
In this lab, students will integrate the Philippine Standard Geographic
Code (PSGC) API — a free REST API that provides data about:
Regions
Provinces
Cities/Municipalities
Barangays
API Base URL:
👉 [Link]
Example Endpoints:
/regions/ — lists all regions
/regions/{code}/provinces/ — lists provinces per region
/provinces/{code}/cities-municipalities/ — lists cities per province
⚙️Tools and Requirements:
[Link] and npm (latest version)
Visual Studio Code (or any IDE)
Web Browser (Google Chrome recommended)
ReactJS Framework
🧩 Procedures:
Step 1 – Create a React Project
Open a terminal and run:
npx create-react-app address-selector
cd address-selector
npm start
This will create and run a basic React app.
Step 2 – Prepare the Project Structure
Inside the src folder, create the following files:
📁 src/[Link]
📁 src/[Link]
Delete unnecessary files (like [Link], [Link]) for a cleaner setup.
Step 3 – Add Code in [Link]
import React, { useEffect, useState } from "react";
import "./[Link]";
function App() {
const [regions, setRegions] = useState([]);
const [provinces, setProvinces] = useState([]);
const [cities, setCities] = useState([]);
const [barangays, setBarangays] = useState([]);
const [selectedRegion, setSelectedRegion] = useState("");
const [selectedProvince, setSelectedProvince] = useState("");
const [selectedCity, setSelectedCity] = useState("");
const [selectedBarangay, setSelectedBarangay] = useState("");
// Fetch all regions
useEffect(() => {
fetch("[Link]
.then((res) => [Link]())
.then((data) => setRegions(data))
.catch((err) => [Link]("Error loading regions:", err));
}, []);
// Fetch provinces or Metro Manila
useEffect(() => {
if (!selectedRegion) {
setProvinces([]);
setCities([]);
setBarangays([]);
return;
if (selectedRegion === "130000000") {
setProvinces([{ code: "MM01", name: "Metro Manila" }]);
} else {
fetch(`[Link]
.then((res) => [Link]())
.then((data) => setProvinces(data))
.catch((err) => [Link]("Error loading provinces:", err));
}, [selectedRegion]);
// Fetch cities
useEffect(() => {
if (!selectedProvince) return;
if (selectedProvince === "MM01") {
fetch(`[Link]
`)
.then((res) => [Link]())
.then((data) => setCities(data));
} else {
fetch(`[Link]
municipalities/`)
.then((res) => [Link]())
.then((data) => setCities(data));
}, [selectedProvince]);
// Fetch barangays
useEffect(() => {
if (!selectedCity) return;
fetch(`[Link]
barangays/`)
.then((res) => [Link]())
.then((data) => setBarangays(data));
}, [selectedCity]);
return (
<div className="app-container">
<h2>📍 Philippine Address Selector</h2>
<div className="section">
<label>Region:</label>
<select value={selectedRegion} onChange={(e) => {
setSelectedRegion([Link]);
setSelectedProvince("");
setSelectedCity("");
setSelectedBarangay("");
}}>
<option value="">-- Select Region --</option>
{[Link]((r) => <option key={[Link]}
value={[Link]}>{[Link]}</option>)}
</select>
</div>
<div className="section">
<label>Province:</label>
<select value={selectedProvince} onChange={(e) => {
setSelectedProvince([Link]);
setSelectedCity("");
setSelectedBarangay("");
}}>
<option value="">-- Select Province --</option>
{[Link]((p) => <option key={[Link]}
value={[Link]}>{[Link]}</option>)}
</select>
</div>
<div className="section">
<label>City/Municipality:</label>
<select value={selectedCity} onChange={(e) => {
setSelectedCity([Link]);
setSelectedBarangay("");
}}>
<option value="">-- Select City/Municipality --</option>
{[Link]((c) => <option key={[Link]}
value={[Link]}>{[Link]}</option>)}
</select>
</div>
<div className="section">
<label>Barangay:</label>
<select value={selectedBarangay} onChange={(e) =>
setSelectedBarangay([Link])}>
<option value="">-- Select Barangay --</option>
{[Link]((b) => <option key={[Link]}
value={[Link]}>{[Link]}</option>)}
</select>
</div>
{selectedBarangay && (
<div className="result">
<h3>✅ Selected Address:</h3>
<p>
Region: {[Link](r => [Link] ===
selectedRegion)?.name}<br />
Province: {[Link](p => [Link] ===
selectedProvince)?.name}<br />
City/Municipality: {[Link](c => [Link] ===
selectedCity)?.name}<br />
Barangay: {[Link](b => [Link] ===
selectedBarangay)?.name}
</p>
</div>
)}
</div>
);
export default App;
Step 4 – Add CSS Styling ([Link])
body {
background-color: #f7f9fc;
font-family: "Segoe UI", Arial, sans-serif;
color: #333;
.app-container {
max-width: 600px;
margin: 40px auto;
background-color: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #1976d2;
.section {
margin-bottom: 20px;
label {
font-weight: 600;
margin-bottom: 8px;
display: block;
select {
width: 100%;
padding: 10px;
border-radius: 8px;
border: 1px solid #ccc;
background-color: #fafafa;
font-size: 15px;
select:focus {
outline: none;
border-color: #1976d2;
.result {
background-color: #e3f2fd;
border-left: 5px solid #1976d2;
padding: 20px;
border-radius: 10px;
Step 5 – Run and Test
Run the app:
npm start
Then open:
👉 [Link]
Select Region → Province → City → Barangay
✅ NCR should show Metro Manila as province.
📸 Expected Output:
A responsive form with four dropdowns that load Philippine address data
dynamically.
When all are selected, a blue box appears showing the full address.
🧾 Submission Requirements:
1. Screenshot of working app with selected Barangay.
2. Copy of [Link] and [Link].