Skip to content

Boo-coder/final-project

Repository files navigation

📱 Building an Interactive Product Search App with JavaScript and a Mock API

🧠 Introduction

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.


⚙️ 1. Purpose and Overview

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.


💾 2. Setting Up the Mock API

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"
}

About

Iphones

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published