WhatsThat

Overview

WhatsThat? is messaging platform which allows users to communicate with each other. Users sign up for an account with WhatsThat where they can then search for, add contacts and create chats with individuals or groups of contacts.

This was developed while studying Mobile App Development during university, where I was tasked with interacting with a comprehensive API to build full user, contact, and chat management functionality.

Technology Stack

• JavaScript

• React Native

• Expo

• Axios

• RESTful API

Features

• User Authentication: Secure user sign-up, login, and logout.
• Contact Management: Add, view, block, and unblock contacts.
• Chat Management: Create/edit chats, send/edit messages, and manage group members.
• Search Functionality: Search for users and contacts effieciently with paginated results.
• Profile Customization: View and update user details.

Wireframing to Development

Before diving into development, I created detailed wireframes in Figma to map out the main user interfaces and interactions. This ensured a solid foundation for the app’s structure and flow.

Having never used Figma before this project, I quickly adapted to the tool, which became essential for designing key screens like the authentication pages, chat view, and user profile.

Seeing the transformation from initial wireframes to the final app highlights how the design evolved and improved over time. This process allowed me to refine the user experience and make thoughtful adjustments with attention to detail.

❮❯

Technical Details

For this project, I worked with an API server that provided endpoints covering user, contact, and chat management. This setup allowed users to sign up, log in, and handle their profiles while supporting features like searching for other users, managing contacts, and creating chat groups.

I set up API requests for each endpoint and used useState and useEffect hooks to manage state and keep the data flowing smoothly between components, updating dynamically as users interacted with the app.

To manage navigation, I used React Native’s tab navigation, which provided an intuitive layout for users to switch between different sections like chat, contacts, and profile. The tab-based structure kept the UI clean and simple to navigate.

Each component was styled with React Native’s StyleSheet where I created dedicated stylesheets and applied them to components, keeping styles modular and easy to maintain.

Challenges & Thought Process

Developing WhatsThat introduced several challenges, especially with API interaction and error handling. One recurring issue was unexpected server and unauthorised errors, especially when interacting with DELETE or PATCH endpoints, like editing a message or unblocking a user.

Initially, these errors weren’t well-documented, so I had to debug by inspecting API responses and tweaking the request headers and body format. Through persistent trial and error, I was able to identify and resolve these issues by adapting the request structure to match API requirements more precisely.

I also resolved issues with Axios after realizing that I had been using the incorrect syntax for some of the request methods, which contributed to the unauthorized errors I was facing.

To see how the app all comes together, explore the complete project on GitHub and delve into the code.

Learnings