World Images Project:

When learning web development, one of the most fun and challenging things to do is to create a project from scratch. I decided to build a Vue.js application that allows users to search for images for a given keyword. The goal of this project was to learn how to use Vue.js, JavaScript, HTML, and CSS, as well as how to interact with an API.

Technical details:

The application is built with Vue.js, JavaScript, HTML, and CSS. I used Bootstrap to style the application and make it responsive. One of the challenges I faced during the development process was understanding how to use the Unsplash API and how to handle the API calls with Axios. However, with the help of the documentation and some tutorials, I was able to overcome this challenge and successfully implement the image search functionality.

Features:

The application allows users to search for images by entering a keyword in the search bar. The results are displayed in a grid with thumbnails of the images. The API returns a JSON object with the search results, which includes the image URLs, the image titles, and the image tags.

Screenshot:

link to project: https://world-img.herokuapp.com/

Conclusion:

This project was a great learning experience for me, as it allowed me to practice my skills with Vue.js, JavaScript, HTML, and CSS, as well as learn how to interact with an API. I also learned how to use Bootstrap to style the application and make it responsive. The biggest challenge I faced was understanding how to use the Unsplash API and how to handle the API calls.

In the future, I plan to add more features to the application such as a way to save images and a way to filter the results by image type.

References:

Unsplash API: https://unsplash.com/developers

Bootstrap: https://getbootstrap.com/

Vue.js: https://vuejs.org/ Axios: https://github.com/axios/axios

Code: The code for this project can be found on my GitHub repository: https://github.com/MarcosPerezLabrada/World-Images