Building a Modern Chat Application with React Native: My Final Viva Project
Why Chat Applications Matter
Let’s face it — communication has become the backbone of our
digital lives. Whether it’s casual convos or business discussions, messaging
apps play a crucial role in staying connected. So, when it came to choosing a
final project for my viva, I knew I wanted to build something people actually
use — a real-time chat app.
What is Chatty?
Chatty is a React Native-based mobile chat application that
supports user authentication, real-time messaging, and profile customization.
It’s sleek, minimal, and built entirely from scratch as my final viva project.
🛠 Planning and Conceptualization
Choosing the Right Stack
Before writing a single line of code, I had to decide on the
technology stack. Since mobile accessibility was essential, I went with:
- Frontend:
React Native + Expo
- Backend:
Java EE 7
- Database:
Hibernate ORM
- API
Tunneling: ngrok
This combo gave me enough flexibility and performance for
building a full-stack mobile application.
Mapping Out Core Features
I broke Chatty down into the following must-have features:
- User
Registration/Login
- Real-time
Messaging
- Profile
Management
- Clean
& Responsive UI
🌐 Key Features of Chatty
User Registration & Login
Users can register with their mobile number and a password.
This flow was handled via simple form validation on the frontend and secure
session handling on the backend.
Built with:
- React
Native TextInput components
- Backend
validation in Java EE
- Hibernate
for saving user data
Real-time Messaging
Though I didn’t use WebSockets (yet), I created a
pseudo-real-time system using HTTP polling.
Highlights:
- Chat
interface built with FlatList
- Messages
fetched via HTTP every few seconds
- Smooth
scrolling and real-time UX illusion
Profile Management
Users can update their:
- First
and Last Name
- Mobile
Number
- Password
- Profile
Picture
I used expo-image-picker for photo uploads and built custom
UI components for the settings screen.
Modern and Responsive UI
Built with simplicity in mind, the UI includes:
- Soft
gradients
- Custom
avatars
- Animated
buttons
- Light/Dark
mode compatibility
📱 Frontend Development
with React Native
Using Expo for Rapid Prototyping
Expo allowed me to skip complex native configurations. I
could test instantly on physical devices with Expo Go and push hot
updates effortlessly.
Styling with Tailwind CSS and Gradients
Though React Native doesn’t natively support Tailwind, I
used Tailwind-inspired utility styles via libraries like tailwind-rn.
Features:
- Gradient
backgrounds using expo-linear-gradient
- Rounded
avatars
- Button
shadows for depth
Integrating Image Uploads
Using expo-image-picker, users can choose images from their
device or camera. The images are previewed before upload and then sent to the
backend as base64 strings.
🖥 Backend Development
with Java EE 7
Building Secure REST APIs
I created endpoints for:
- /register
- /login
- /sendMessage
- /getMessages
- /updateProfile
Security and validation were enforced at each layer.
ORM with Hibernate
Hibernate mapped my User and Message entities to MySQL
tables. This reduced the need for raw SQL queries, letting me focus on logic
rather than syntax.
Handling Requests via ngrok
Since my local backend wasn't publicly accessible, I used ngrok
to tunnel API calls. This was perfect for testing from real devices.
⚡ Real-Time Messaging: Behind the
Scenes
Using HTTP Polling for Simplicity
Every few seconds, the app sends a request to check for new
messages. While not as efficient as WebSockets, it was simpler to implement and
good enough for this version.
Future Plans for WebSocket Integration
I plan to use:
- Java
WebSocket APIs
- Event-based
architecture for pushing updates instantly
This will drastically improve performance and reduce API load.
🚧 Challenges Faced During
Development
Real-time Syncing Without WebSockets
Maintaining a smooth chat experience without true real-time
updates was tricky. I had to fine-tune the polling interval and cache messages
effectively.
Debugging Mobile API Requests
Often, requests wouldn’t go through due to local firewall or
ngrok limitations. I had to rely heavily on mobile debugging tools and ngrok
logs.
🎨 UI/UX: Making It
User-Centric
Minimalist Navigation
Tabs and stack navigators kept the user flow intuitive. The
goal was to make every screen no more than two taps away.
Mobile Responsiveness
Components scaled well across different screen sizes thanks
to flex layouts and dimension hooks.
Custom Avatar & Theme Support
Users could upload their avatar, and a light/dark theme
toggle is in the works.
🧪 How I Tested Chatty
Device Testing with Expo Go
Using Expo Go on both iOS and Android helped me:
- Catch
platform-specific bugs
- Test
image uploads
- Validate
real-time behavior
Simulating User Flows
I created multiple dummy accounts and simulated real
conversations to test edge cases like:
- Profile
update mid-chat
- Logout
while receiving messages
- Invalid
credentials
📚 What I Learned
Technical Skills
- Full-stack
integration
- RESTful
API creation
- React
Native animations
- ORM
design patterns
Problem-Solving in Real-Time Environments
I learned how to build stable systems even with limited
real-time support, and how to debug complex request-response cycles
efficiently.
🔮 The Future of Chatty
Adding WebSocket-Based Messaging
This is top priority! It will make Chatty truly real-time
and ready for scaling.
Video & Voice Features
Using ZEGO Cloud or Agora SDK, I plan to
integrate video and voice chat capabilities in future updates.
Deploying the Backend to the Cloud
Hosting on Heroku, Render, or AWS will
allow 24/7 access without relying on local servers.
✅ Advantages of Chatty
1. Cross-Platform Compatibility
Since Chatty is built with React Native,
it works on both Android and iOS using a single codebase. This reduces
development time and ensures feature consistency.
2. Modern User Interface
Chatty features a clean, responsive, and
modern UI that enhances user experience. Smooth animations, gradient
backgrounds, and intuitive navigation make it feel like a professional app.
3. Easy Profile Management
Users can easily update their personal
information, including profile picture, name, password, and mobile number — all
in a user-friendly interface.
4. Fast Development with Expo
Using Expo speeds up development and
testing. No need to deal with native build issues, and features like
camera/image access are simple to integrate.
5. Scalable Backend with Java EE
Java EE 7 provides a reliable and
scalable backend infrastructure. Combined with Hibernate ORM, it allows secure
and efficient database management.
6. Real-Time-Like Messaging
Even without WebSocket, the HTTP polling
implementation simulates real-time messaging well enough for small to medium
use cases.
7. Secure User Authentication
Chatty uses secure backend APIs to
authenticate users, helping protect against unauthorized access and common
security threats.
8. Great Learning Project
Chatty showcases a full-stack project
with real-world use cases. It's perfect for a portfolio or as a final project
for software engineering students.
❌ Disadvantages of Chatty
1. No True Real-Time Messaging
Currently, Chatty doesn't use WebSocket
or push notifications, which limits its ability to provide instant updates.
This can lead to minor delays in message delivery.
2. Localhost Dependency (During Testing)
The use of ngrok for API tunneling means
the backend is only available during local development sessions. This restricts
real-time multi-user testing.
3. Limited Multimedia Support
Chatty focuses on text messages only.
There’s no support for sending images, voice notes, or videos — features common
in modern chat apps.
4. No Cloud Deployment (Yet)
Since the backend isn’t deployed to a
public server yet, users outside the local network can’t access the app without
special configurations.
5. Lack of End-to-End Encryption
While Chatty uses secure APIs, it does
not implement full end-to-end encryption, which is important for privacy in
production-grade chat apps.
6. Basic Notification System
There’s currently no system for sending
notifications when a new message arrives, especially when the app is in the
background.
7. Limited Group Features
Group chats, message reactions, and
other collaborative tools are not available in the current version.
🎯 Final Thoughts on the
Journey
Creating Chatty wasn’t just a project — it was a full-blown
learning experience. From setting up backend authentication to UI polish, I
wore multiple hats and learned a ton. If you're diving into full-stack mobile
development, there's no better way to learn than to build something real.
✅ Conclusion
Developing Chatty taught me how powerful and
rewarding full-stack development can be. From planning to deployment, each step
was packed with challenges that pushed me to grow. React Native, Java EE,
Hibernate, and a passion for clean design came together to build something I’m
truly proud of.
Whether you're a student or hobbyist, my journey with Chatty
shows that with the right mindset, tools, and a bit of trial and error, you can
build applications that feel professional and polished.
❓ FAQs
1. Is Chatty available on app stores?
Not yet! Right now, it's only available for demo via Expo.
I’ll publish it after implementing WebSocket and cloud hosting.
2. Can I see the source code for Chatty?
Yes, I plan to release it on GitHub soon. Stay tuned!
3. Why did you choose React Native over Flutter?
I already had experience with JavaScript and React, so React
Native made more sense for faster development.
4. How did you secure the user data?
I used hashed passwords and secure APIs. User info is stored
with validation and protected access layers in the backend.
5. Can I contribute to Chatty?
Absolutely! Once it’s on GitHub, collaboration will be
welcome. Keep an eye on the project page.
UI Designs
Source Code Here 👉