Chat App

Image 1

Overview:

The 'Chat App' project aimed to be a user-friendly mobile app using React Native. The main goal was to offer users a smooth and enjoyable chatting experience by adding features like real-time messaging, sharing pictures and videos, and sharing locations.

Purpose:

The primary purpose of this project was to create my first app using React Native as part of my Full Stack course with CareerFoundry.

Objective:

The objective was to gain experience and skills in mobile app development through this practical exercise, contributing to my growth as a Full Stack developer and adding the project to my portfolio.

Duration:

The project took 2-3 weeks to complete due to challenges associated with updating technologies that were no longer supported.

Credits:

Lead Developer: Antonio Ruiz Brocal

Mentor: Faizal Patel

Special thanks to my mentor, Faizal Patel, for his incredible support and guidance throughout this project. His assistance was invaluable in making this project a success.

Tools, Skills, Methodologies

Developing the Chat App:

I've developed a React component called Start for my application, incorporating Firebase authentication and managing user-related states such as name and background color. The component includes a signInUser function for anonymous sign-ins, which, upon success, navigates to the 'Chat' screen with user information. Error alerts are displayed if sign-in issues arise. Additionally, for security reasons, I've decided to conceal the credentials in the public code by crossing them out in the firebaseConfig object. I initialized Firebase in my application using initializeApp(firebaseConfig), underscoring the importance of treating credentials as private for security and recommending practices such as using environment variables to manage sensitive information.

firebase start signedin

I incorporated three new functions into my React component to improve the overall user experience. The first function, pickImage, allows users to choose images from their device library. It prompts for necessary permissions, opens the library for selection, and uploads the chosen image if confirmed. In case of cancellation, a notification informs the user about the absence of granted permissions. The second function, takePhoto, provides the ability to capture new photos using the device's camera. Similar to pickImage, it requests camera permissions, activates the camera for capturing, and uploads the new photo if taken. A notification is issued if the user cancels, signaling a denial of permission. The third function, getLocation, facilitates the sharing of the device's current location as a message. It initiates by requesting location permissions, retrieves coordinates if granted, and sends a message containing longitude and latitude. An alert notifies the user of any issues or if location permissions are not granted. These functions now enable users to effortlessly choose photos, capture new ones, and share their location seamlessly within the app.

functions

Final Product: In the last phase, I performed thorough testing, fixed problems, included extra features, and improved the application to make it polished and functional.

What went well:

What I really enjoyed building the chat app project was the use of React Native, which allowed for swift cross-platform development and the satisfaction of problem-solving in real-time scenarios. Additionally, Expo was a helpful choice. I also successfully integrated Firebase for secure authentication, messaging, and multimedia handling. Customizing the chat interface not only enhanced the user experience but was also a part of the project I thoroughly enjoyed.

What didn't go well:

Setting up Firebase presented initial difficulties because the new version was no longer compatible with some features we used in our project. This required significant changes and adjustments. Moreover, the challenge of understanding and applying the updated Firebase guidelines in the documentation, which often required deep reading and analysis, was a major obstacle I had to overcome.

Improvements for the Future:

My long-term goal is to take the chat application to a higher level by adding advanced features. This will include the implementation of private chats for more exclusive and secure communication between users. I'm also considering incorporating the audio messaging feature and other features I have in mind to improve the user experience.

Final Thoughts:

This Chat App project has been a valuable experience. Despite the initial challenges, I greatly enjoyed working with React Native and its efficient ability to debug errors in real-time. This has boosted my interest in continuing to build applications with React Native in the future.