As web developers in training, learning to build interactive applications that communicate with APIs is one of the most valuable skills we can develop. APIs (Application Programming Interfaces) allow websites and applications to access and share data efficiently.
For my Phase 1 project, I decided to create an interactive Product Search App that lets users find iPhone models, view their details, and click the product image to open an external purchase link. The project uses HTML, CSS, and JavaScript, and it connects to a mock API made with json-server
.
This blog explains how I built the app, what technical concepts I used, and what I learned during the process.
The goal of this project was to build a single-page web app that interacts with data from a mock API (db.json
).
Users can:
- Search for iPhone models
- View product details (price, color, storage, and description)
- Click the image to open a purchase link
- Toggle between light and dark modes
All of this happens without reloading the page thanks to asynchronous JavaScript and DOM manipulation.
I used a db.json
file that contains iPhone data. Each iPhone object looks like this:
{
"id": 1,
"model": "iPhone 13",
"storage": "128GB",
"price": 699,
"color": "Midnight",
"description": "The iPhone 13 offers a sleek design, improved battery life, and the A15 Bionic chip for fast performance.",
"image": "https://store.storeimages.cdn-apple.com/.../iphone-13.png",
"buyLink": "https://www.apple.com/shop/buy-iphone/iphone-13"
}