Introduction

I am Ekaksh Janweja, a pre-final year student at Delhi Technological University, and together with my friend Aryan Sidhwani [trust me he makes things work], I embarked on a journey to create dtu.social, a proximity chat app aimed at connecting students with similar interests and goals. You can check out the app here.

In this blog, I will walk you through the technical aspects of building this app and the challenges we faced along the way. Our motivation was to bridge the gap between students and foster a supportive community where individuals can seek mentorship, form lasting bonds, and grow together.

Choosing the Right Technologies

To ensure dtu.social could work seamlessly on Android, iOS, and the web, we opted for Flutter, a cross-platform development framework known for its efficiency and ease of use. Flutter's single codebase approach significantly sped up development, allowing us to target multiple platforms without rewriting the entire codebase.

For backend integration, Firebase emerged as the ideal choice. Its Backend as a Service (BaaS) offerings and robust database [cloud firestore] provided the foundation for the app's real-time chat functionality. While alternatives like Appwrite and Supabase existed, we decided on Firebase due to its seamless integration with Flutter and our familiarity with it.

Riverpod - A Natural Choice for State Management

Choosing the right state management solution was crucial for a smooth user experience. We narrowed our options to Riverpod and Provider, both popular choices in the Flutter community. Eventually, Riverpod became the clear winner. Its built-in support for Futures and Streams via FutureProvider and StreamProvider eased handling of asynchronous data, ensuring smooth real-time updates within the app.

Future builder implementation using a Future Provider

  ref.watch(provider).when(
    data: (data) => Center(child: Text(data.toString())),
    error: (error, stackTrace) => Text(error.toString()),
    loading: () => const Center(child: CircularProgressIndicator()),
  ),

Stream Builder implementation using Stream Provider

  ref.watch(streamProvider).when(
    data: (data) => Center(child: Text(data.toString())),
    error: (error, stackTrace) => Center(child: Text(error.toString())),
    loading: () => const Center(child: CircularProgressIndicator()),
  ),

Location Tracking with Geolocator

To implement the app's proximity chat functionality, we needed to track users' current locations accurately. Geolocator helped by enabling us to retrieve location data and update it in Cloud Firestore efficiently. This allowed us to connect users based on their physical proximity.

Adopting the MVC Pattern

Simplicity was key in our app's design, and the Model-View-Controller (MVC) pattern perfectly aligned with our development philosophy. Its clear separation of concerns made the codebase easier to manage, allowing us to focus on specific components independently. The MVC pattern significantly improved our development efficiency and code maintainability.

Routing with Routemaster

To handle navigation effectively, we adopted Routemaster. This library simplified route management by allowing us to define all routes in a single file. With Routemaster, navigation logic stayed organized and maintainable, even as the app's complexity grew.

The Challenges we faced

1. Coordination as a Two-Man Team:

Working as a two-man team initially posed coordination challenges, but close collaboration and efficient communication helped us maintain consistent progress.

2. UI Design Struggles:

As developers, UI design was unfamiliar territory. Struggling with creating an intuitive and visually appealing interface, we sought feedback from design-savvy individuals to improve the app's look and feel.

3. Firestore Data Structure Optimization:

Initially, we encountered inefficiencies in our Firestore data structure, leading to crossing the limits of the basic free Firebase plan. We learned from this experience and migrated to a more optimized approach by consolidating messages into a single document, vastly improving the app's performance.

4. Deploying the app to play store:

Getting our app on the Play Store was complex. We tackled forms, explaining location use, and adhering to policies. Despite hurdles, dtu.social went live.

Lastly,

I would be grateful if you guys try to use this app and drop me feedback on twitter @ekaksh_janweja. And also Aryan lets build even more projects together.