Introduction

Recently, I embarked on a new opportunity by applying for a position at a company that intrigued me. After submitting my application, I was thrilled to receive a call from the company for an interview. The interview process was rigorous, and it challenged my technical knowledge across various domains. I would like to share my experience, the challenges I faced, and how I approached the assignment that followed the interview.

The Interview: A Technical Deep Dive

During the interview, I was asked a wide range of questions that tested my understanding of core concepts in web development. The questions covered several topics, each requiring a strong grasp of fundamentals and practical knowledge. Here’s a breakdown of some of the key areas discussed:

Arrays and Manipulation
I was presented with an array, [1, 2, 3, 4, 5], and asked how to manipulate it to display only specific elements, such as 1, 2, 5, 6. This required a solid understanding of JavaScript array methods and how to efficiently manipulate data structures.

Media Queries for Responsive Design
The interview also delved into CSS, particularly focusing on media queries. I was asked to explain how media queries can be used to create responsive designs that adapt to different screen sizes. This part of the interview highlighted my ability to ensure that web pages are accessible and visually appealing on all devices.

React Components
A significant portion of the interview was dedicated to React. I was asked to explain the concept of components, how they are used to build user interfaces, and the importance of reusability in component-based architecture. This discussion also touched on the state and props in React, demonstrating my ability to manage data within an application.

Context API in React
Another React-related topic was the Context API, a powerful feature for managing state across the application. The interviewer wanted to gauge my understanding of how Context can be used to avoid prop drilling and manage global state effectively.

Array Methods: Map and Filter
The interviewer asked about array methods like .map() and .filter(). I was required to explain how these methods are used to iterate over arrays and create new arrays based on certain conditions. This question tested my functional programming skills in JavaScript.

Bootstrap Grid System
Finally, the conversation touched on the Bootstrap grid system. I was asked how to utilize Bootstrap's grid to create responsive layouts that adjust across different screen sizes. This required a good understanding of the grid system, including containers, rows, and columns, as well as how to use responsive classes like col-sm, col-md, and so on.

Moving to the Next Round: The Assignment

After the interview, I eagerly awaited feedback from the company. I was pleased to learn that I had been selected to move on to the next round, which involved completing a technical assignment. This assignment was a practical test of my ability to implement the concepts discussed during the interview.

The Assignment: Fetching and Displaying Dog Images

I was provided with an API endpoint for the assignment: . The task was to build a web application that retrieves data from this API and displays it in a user-friendly manner. The assignment had two key requirements:

History Section: I needed to create a section that stores and displays the history of images retrieved from the API. Each time a new image was fetched, it had to be added to this history section.

Card Section: The main section of the application had to display the current image fetched from the API. This card section needed to be visually appealing and functional, allowing users to see the dog image clearly.

Completing the Assignment

I completed the assignment within one day, ensuring that it met all the specified requirements. I utilized React to build the application, leveraging its component-based architecture to create a clean and maintainable codebase. The application was designed to be responsive, ensuring that it looked great on all devices.

I also implemented additional features, such as:

Local Storage: The history of images was stored using local storage, ensuring that the history persisted even if the page was refreshed.
Error Handling: I added error handling to manage any issues that might arise during the API call, ensuring a smooth user experience.
After completing the assignment, I delivered it to the company for evaluation. Below are the links to the GitHub repository containing the code and the live deployment of the application:

Live Output: Dog Image Task - Deployed on Vercel

Conclusion

This experience was both challenging and rewarding. The interview process pushed me to demonstrate my technical knowledge and problem-solving skills, while the assignment allowed me to apply those skills in a practical scenario. I am proud of the work I delivered and look forward to hearing back from the company regarding the next steps in the hiring process.