DEV Community: Aishat Agunbiade

Exploratory Testing Report for Cars.ng

Aishat Agunbiade — Thu, 06 Feb 2025 18:16:13 +0000

Introduction

Cars.ng is one of the leading platforms for buying and selling cars in Nigeria, providing users with a range of functionalities from browsing car listings to contacting sellers directly. As part of our exploratory testing, I conducted a thorough review of the website’s core user flows, with a special focus on ensuring a seamless experience across both desktop and mobile devices. This report highlights various issues discovered during testing, with an overarching observation: the mobile version of Cars.ng needs to be more responsive across the entire website.

Testing Setup and Methods

For this task, I utilized the latest versions of Chrome and Firefox on Windows 11 Pro for desktop testing, and Safari on iOS 18 for mobile testing. I followed these steps:

User Flow Exploration: I navigated through key sections of the site such as the homepage, car details pages, and contact sections.
Issue Documentation: Each issue was logged using a detailed bug report template in an Excel (Google Sheets) file, including steps to reproduce, expected vs. actual results, environment details, and severity ratings.
Visual Proof: Screenshots and video recordings were attached for each issue to provide visual evidence of the problems encountered.
Focus on Mobile Experience: Special attention was paid to how the site renders on mobile devices, which revealed several responsiveness issues.

You can review the full documentation of my findings by accessing the Excel report here.

Key Findings

During the testing process, I documented multiple issues affecting both desktop and mobile experiences. Here are some of the significant findings:

Unclickable Contact Information: On the car details page, the contact information (such as WhatsApp or phone number) was not clickable, preventing users from easily reaching out to sellers.
Blurry Car Images: Certain images, particularly in the “Similar Deals” section in the car details page, appeared blurry, which could confuse users regarding the quality and details of the cars.
Non-Functional Filters and Dead Links: Some interactive elements like the price filter and dashboard navigation were not functioning as expected, leading to errors (e.g., 500 error pages).

The Mobile Responsiveness Issue

The most recurring theme throughout the testing was the lack of proper mobile responsiveness:

Inconsistent Padding and Layout Issues: Text and images on mobile devices often appeared too close to the screen borders or overflowed their containers, making the content hard to read.
Non-Responsive Car Displays: Several sections, particularly the car display on the homepage, did not adjust well to smaller screens. The scroll container did not resize properly, leading to a disjointed user experience.

These issues highlight a crucial area of improvement for Cars.ng. In today’s mobile-first world, ensuring that the platform is fully responsive on all devices is not only a best practice but also essential for user retention and satisfaction.

Recommendations

Based on my testing, here are my actionable recommendations for Cars.ng:

Improve Mobile Responsiveness Across the Website:
- Redesign layout elements using responsive design techniques (e.g., CSS media queries) to ensure that images, text, and buttons scale appropriately on all devices.
Clickable Contact Information:
- Update the contact elements to ensure they are interactive and properly linked to their respective actions (i.e., opening WhatsApp or initiating a call).
Optimize Image Quality:
- Re-evaluate the image compression settings and source quality to ensure that car images are sharp and clear across all sections of the website.
Enhance Functionality of Interactive Elements:
- Address the issues with filters and navigation to ensure that every interactive component performs its intended function without errors.
Conduct Regular Mobile Usability Testing:
- Implement ongoing mobile testing as part of the development cycle to catch responsiveness issues early and maintain a consistent user experience. Test, Test, and Test Again.

Conclusion

The exploratory testing of Cars.ng revealed several critical issues, with mobile responsiveness emerging as a key area needing attention. By addressing these issues, Cars.ng can significantly enhance its user experience, particularly for users accessing the site via mobile devices. Improving the responsiveness, along with the overall functionality and image quality, will likely lead to increased user satisfaction and engagement.

For a detailed view of all documented issues, please refer to my complete Excel report here.

My journey into Mobile Development.

Aishat Agunbiade — Thu, 04 Jul 2024 15:43:44 +0000

Starting mobile development seems too surreal because I’ve always admired learning how to create amazing applications that can be downloaded into our phones, but on the other hand, it seemed quite difficult in some corner of my mind and I couldn’t do it at all. Joining tech itself was surreal as ever since I was curious; that’s why I started learning web development anyway. The first app I ever built was a calculator. I remember saying “wow! this works…see? Just click it and you will get the result.” So happy and showing my siblings and friends. As my career moved forward in web development, I felt like starting something new so why not? Mobile Development since I already had some you experience using React.js.

With that, began my journey in React Native and no regrets about it yet. In anticipation of this thrilling trip through HNG Internship for me shall come one day; let me give some insights about commonly used terms in the industry interchangeably applied though. Before that, let me introduce to you why I decided to start HNG in the first place.

Why HNG Internship

Being an aspiring mobile passionate developer, I am excited to be a part of the HNG Internship. The reason this particular program appeals to me is because of its comprehensive curriculum and hands-on approaches to learning, which would help lay a solid base in mobile development. The HNG Internship makes available the perfect platform that is needed in gaining practical experience and networking with peers in the industry. You can learn more details about this wonderful program from their official website and explore opportunities for hiring some talented developers.

Comparing Mobile Development Platforms

1.Native Development
iOS (Swift/Objective-C):

Pros:

Performance: Native apps are written in a platform-specific language and hence are optimized a lot to provide a smoother user experience.
Access to Device Features: Access to all the features of iOS devices.
Consistent UI: Uses Apple's Human Interface Guidelines for a consistent and intuitive user interface.

Cons:

Cost and Time: Separate development for iOS and Android.
Learning Curve: Swift and Objective-C have a steeper learning curve when compared to some other languages.

2. Android (Java/Kotlin):

Pros:

Flexibility: It has an extended number of options concerning customization and system integration.
Large Community: Many developers are working over it with loads of resources and libraries.
High Performance: Very high performance since it allows native compilation.

Cons:

Fragmentation: Development is tough due to many different types of devices and versions of OSes.
It requires development and testing time, with large resources.

3. React Native (Cross-Platform Development):

Pros:

Code Reusability: This means the same code works for both iOS and Android.
Large Community: The Community is large, and there are a lot of plugins and Libraries at disposal.
Live Reloading: It allows the developer to instantly view the change.

Cons:

Performance: It's not as fast as native applications particularly where heavy tasks are concerned.
Native Modules: It requires sometimes to write custom Native modules.

4. Flutter:

Pros:

Single Codebase: A single codebase for iOS and Android.
Performance: It provides near-native performance because Dart compiles endenga.
Rich UI: It has an exhaustive set of widgets with a rich set of pre-designed UI components.

Cons:

Large Size: App size may be larger compared to native apps.
Learning Curve: Since many developers are not much familiar with Dart, it is a bit difficult to learn.

Conclusion

A good development platform and architectural pattern are important for the success of any mobile application. Since each of them has strengths and trade-offs, the choice would be majorly based on the needs of a project. I look forward with this journey at HNG Internship to immersively go through these technologies, make good mentorship, and contribute to some really innovative projects.

If you are interested in joining or discussing the HNG Internship should check out their official website. They also have an option for premium where you get exclusive informations about the program, job opportunities, CV Reviews, Certificate after the internship and many more.To get the full details check here

Thanks for joining me on this little walkthrough, and I look forward to sharing other insights and experiences while learning the ropes in this exciting field.

ReactJs vs VueJs: A Comparison Between Frontend Technologies.

Aishat Agunbiade — Thu, 04 Jul 2024 15:38:24 +0000

When starting a new project, one of the difficult questions frontend developers ask is “What framework should I use for this project”?

When deciding which JavaScript framework to choose for an existing project, it usually refers to Angular vs. React vs. Vue. For this blog, we are going to focus on Vue and React and make a comparison between them.

What is ReactJS?

React is a free and open-source front-end JavaScript library for building component based user interfaces. It is maintained by Meta (formerly Facebook) and a community of individual developers. It can be used to develop single-page mobile applications or sever rendered application using NextJS(A React Framework).

Features of ReactJS

Virtual DOM: It uses a 'Virtual DOM' to optimize rendering. A lightweight in-memory copy of the real 'DOM' has to be maintained while updates are being made.
Component-Based Architecture: React enforces the development of reusable, modular components on which the apps are based to drive modularity and reusability of code.
JSX: React introduces JSX, a syntax extension allowing one to directly write in a fusion of HTML and JavaScript, enhancing the developer experience.
Unidirectional Data Flow: React enforces a one-way data binding pattern supporting the integrity of data and also eases debugging.

Pros of ReactJS

Performance is maximized by the Virtual DOM, especially in dynamic apps.

Community and Ecosystem: With a large community and great ecosystem, one will rarely be left with libraries, tools, or support.
Flexibility: Any library or framework will go along with React; hence it enables the developer to structure their applications the way they want to.

Cons of ReactJS

Learning Curve: JSX and unidirectional data flow can sometimes be a problem for freshers.
Boilerplate Code: React sometimes demands more boilerplate code than other frameworks.

Vue.js: The Progressive JavaScript Framework

Vue.js is an advanced Javascript framework to build user interfaces developed by Evan You. It has been designed to be progressively adoptable, directly implying that you could use as much or little of Vue as you need.

Key Features of Vue.js

Reactive Data Binding: The Reactivity system of Vue automatically tracks all your dependencies and, in case of any change in data, it triggers DOM updates.
Component-Based Architecture: Vue, much like React, follows the approach that enables building powerful applications using serviceable, reusable components.
Single-File Components: Vue allows its component to be written in a single file wherein HTML, CSS, and JavaScript are combined, thereby making development easier and more straightforward.
Directives: Vue has picked a few of the commonly used ones out of the box. Vance already comes with a number of prebuilt directives such as v-bind, v-model, etc. These give very useful, effective ways to interact with the DOM. 5.API Styles: Vue components can be written in two different API styles; Options API and Composition API. To learn more, visit official documentation. Other advantages are; • Easy to learn: This particular framework has rather simple and intuitive syntax. It is most favorable for beginners. • Flexibility: Vue can be used both for small and big projects and in applications ranging from small to large, with ease of learning. • Well-documented: On this front, the official documentation in this regard seems to be faultless. It is clearly structured and full of material that developers might refer to in the course of building with it.

Cons of Vue.js

Smaller Community: Vue is diminished when contrasted with the network of people behind React, which can constrain the quantity of third-party libraries and different advancement assets accessible.
Difficulties with mobile support: Older versions of iOS and Safari browsers can cause certain problems with Vue.js applications.

Comparing ReactJS vs. Vue.js

Feature	ReactJS	Vue.js
Learning Curve	More difficult because of JSX and one-way data flow	Easier with a more intuitive syntax
Performance	High, thanks to the virtual DOM	High, with efficient reactivity system
Community and Ecosystem	Large and matured	Growing but smaller than React's
Flexibility	Very flexible, can use with other libraries	Flexible, suitable for different scales of projects
Component Architecture	Strongly focuses on reusable components	Focuses on single-file components

Looking Ahead with HNG Internship

HNG Internship mainly deals with ReactJS. This comes with an opportunity to master one of the powerful frontend libraries. I look forward with excitement to learning how to hone my skill in ReactJS by using its component-based architecture for building dynamic and efficient web applications. The practical experience and contributions to collaborative projects will help build my understanding and proficiency in ReactJS.

This is the link to their
official website, for anyone who wants a detailed information on the HNG Internship. A number of opportunities are also available on their premium services.

Learning ReactJS as part of the internship will be impactful in honing my technical skills; besides, it will also provide strong backing for subsequent projects. I'm so excited to start this learning journey, which is full of potential for making a difference with web applications using ReactJS.

Top 30 JavaScript Snippets To Boost Your Productivity

Aishat Agunbiade — Sat, 22 Jul 2023 17:26:12 +0000

Introduction

JavaScript is a versatile and powerful programming language that plays a critical role in web development. Whether you're a seasoned developer or just starting with JavaScript, using code snippets can significantly enhance your productivity and improve code readability. In this blog, we'll explore the top 30 JavaScript snippets that can make your coding life easier and more efficient.

1. Convert String to number

const number = parseInt(string)

2. Get the Current Date in YYYY-MM-DD Format:

const getCurrentDate = () => new Date().toISOString().slice(0, 10);

3. Remove Duplicates from an Array

const removeDuplicates = (arr) => [...new Set(arr)];

4. Find the Largest Number in an Array:

const findLargestNumber = (num) => Math.max(...num)

5. Check if Element Exists in an Array:

const elementExists =(arr,elem) => arr.includes(elem)

6. Generate a Random Number within a Range:

const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

7. Truncate a String:

const truncateString = (str, maxLength) => str.length > maxLength ? str.slice(0, maxLength) + '...' : str;

8. Convert String to CamelCase:

const toCamelCase = (str) => str.replace(/[-_](.)/g, (_, c) => c.toUpperCase());

9. Merge Two Arrays:

const mergedArray = (arr1, arr2) => [...arr1, ...arr2];
or
const mergedArray = (arr1, arr2) => arr1.concat(arr2);

10. Check if an Object is Empty:

const isEmptyObject = (obj) => Object.keys(obj).length === 0;

11. Sort Array In Ascending Order:

const sortedArray = (arr) => arr.sort((a, b) => a - b);

12. Reverse an Array:

const reversedArray = (arr) => arr.reverse();

13. Find the Difference Between Two Dates:

const dateDifferenceInDays = (date1, date2) => Math.abs(date2 - date1) / (1000 * 60 * 60 * 24);

14. Calculate the Sum of an Array

const sumArray = (arr) => arr.reduce((total, current) => total + current, 0);

15. Format Number with Commas:

const formatNumberWithCommas = (num) => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

16. Validate Email Address:

const isValidEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

17. Check if a String is Palindrome:

const isPalindrome = (str) => str === str.split('').reverse().join('');

18. Convert Degrees to Radians:

const degreesToRadians = (degrees) => degrees * (Math.PI / 180);

19. Shuffle an Array:

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);

20. Convert Object to Array:

const array =(obj) => object.entries(obj);

21. Check if an Object is Empty:

const isEmptyObject = (obj) => Object.keys(obj).length === 0;

22. Capitalize the First Letter of a String:

const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);

23. Check if a Number is Even or Odd:

const isEven = (num) => num % 2 === 0;

24. Convert Object to JSON String:

const objectToJson = (obj) => JSON.stringify(obj);

25. Check if a Value is an Array:

const isArray = (value) => Array.isArray(value);

26. Find the Index of the First Occurrence of an Element in an Array:

const findIndexOfElement = (arr, element) => arr.indexOf(element);

27. Get current URL:

const currentUrl = window.location.href;

28. Set a Cookie

document.cookie = "name=value; expires=date; path=path; domain=domain; secure";

29. Copy text to Clipboard:

const copyText = (text) => navigator.clipboard.writeText(text);

30. Check if the User is Scrolling Up or Down:

let lastScrollTop = 0;
window.addEventListener('scroll', () => {
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
const direction = scrollPosition > lastScrollTop ? 'down' : 'up';
lastScrollTop = scrollPosition <= 0 ? 0 : st;
});

Conclusion

In this blog, we've explored 30 JavaScript snippets that cover various tasks like array manipulation, string operations, date calculations, and more. By using these snippets, you can save time, write cleaner code, and boost your productivity as a JavaScript developer. Happy Coding!