🩰 Product Catalog

This responsive webpage was part of a school assignment. The main purpose of this project was to build a responsive site using an API, as well as to become comfortable and familiar with basic concepts for managing HTTP requests using JavaScript. This online store was built with Bootstrap components and the Fake Store API, and it only focuses on the product catalog that every online store must have :)

📦Technologies

• HTML
• CSS
• Bootstrap
• JavaScript
• Fake Store API

🚀Features

• Navigation: You can navigate through the different sections (Featured Products, Offers, and Catalog) of the website using the navbar.

• Slideshow: In the Featured Products section, you can cycle through items and see basic information about each product (title, price, and a special button Ver más detalles that opens a modal with more detailed product info).

• Modal: Each product contains a special button, Ver más detalles that opens a modal displaying additional information about the selected product, such as its category and description.

🖇The process

The first thing I did was understand and get familiar with the technologies that would be used, including the API endpoints. Then, after having a basic understanding of what needed to be built, I created an asynchronous function called obtenerProductos. This was the most important function, as it fetches all products consumed by other functions.

The second thing I did was create the HTML file. I had to read Bootstrap's documentation to implement its components. The markup file has all the necessary components; however, they are overridden in the JS file with the items required for each specific section.

The third step was building the remaining functions in the JS file to display the featured products, the catalog, the carousel, and others sections.

🧧 What I learned

I learned more about JavaScript. I learned that JavaScript is a single-threaded language, meaning it can only perform one task at a time. This helped me further understand synchronous and asynchronous behavior, and how asynchronous functions are used to handle slow operations like fetching data from a server.

Truly, this project is quite simple, but it deepened my understanding of frontend programming and how client-side programming languages are used to modify the Document Object Model (DOM).

🌀Preview

You can freely explore the website here: https://amnerys-santos-tienda-api.netlify.app/