Co-workers of vendre
A Code test
Introduction
Development of web page to display the people working at Vendre. this project was done as part of a internship interview process
Brief
For this project, I developed a responsive web application to display a directory of employees using Vue.js. The employee data was retrieved from the reqres.in API, which provided dummy data for the project. This project focused on creating a user-friendly interface that adheres to specific design requirements set by the design team.
API
The application dynamically pulls employee data from the API endpoint https://reqres.in/api/users, ensuring that the latest information is displayed. Implemented pagination to allow users to navigate through multiple pages of employee data. The API’s pagination structure was utilized, allowing the app to load additional employee records with requests like https://reqres.in/api/users?page=2.
Design requirements
Each employee's profile picture was displayed in a circular format, providing a clean and modern look. Employee names were followed by a clickable email link, allowing users to easily initiate contact with any employee. The application was designed to be fully responsive, ensuring a seamless user experience across various devices, from desktops to mobile phones.
Tech stack
The application was built using Vue.js, taking advantage of its reactive data binding and component-based architecture. Utilized CSS Flexbox and Grid layouts to create a flexible and responsive design. Integrated with the reqres.in API for data retrieval and pagination.
Result
The project successfully demonstrated my ability to build a responsive and user-centric web application with modern design practices. The implementation of API-based data fetching and pagination showcased my skills in working with external data sources and handling dynamic content.
Reflection
Working on the project was a rewarding experience that allowed me to hone my skills in both front-end development and API integration. The project presented several challenges, particularly in creating a user-friendly interface while adhering to the specific design requirements provided by the team. One of the main challenges was ensuring that the pagination system worked flawlessly across different devices. It required a good understanding of both front-end development and API response handling. Additionally, making the design both aesthetically pleasing and functional demanded close attention to detail, particularly when it came to responsiveness. This project not only improved my technical abilities but also my appreciation for user-centered design. It underscored the importance of creating applications that are both functional and visually appealing. Moving forward, I plan to incorporate these lessons into future projects, especially in areas where API integration and responsive design are critical.