Full Stack Mobile Chat App - Built with django, flutter and mongodb

Overview

Full Stack Mobile Chat App

Contents

    1. Introduction
    1. Client Side
    • 2.1. UML
    • 2.2. Memory
    1. Server Side
    • 3.1. Applied Logic
    • 3.2. NoSQL Database
    1. Screenshots
    1. Video Demo

1. Introduction

Warning: There is little left to finish the application. It needs to add the user registration screens, notifications in the background and the data updates of friend requests and new friends via sockets.

For now, the application has been developing for a month, a month in which it went through periods of time implementing each basic requirement.

Upon completion of the basic requirements, the new requirements detected and the remaining more complex ones will continue to be implemented.

2. Client Side

The creation of the application started with simple sketches of the graphical interface. These sketches were lost for this reason I can't put them here. Please see the last section where photos of the project are shown.

The graphical interface was implemented while using static test data.

2.1. UML

This is the first project that by far has a big difference from the old ones I've done. I have tried in the most logical and optimal way possible to use design patterns to have clean code and protect business logic.

In a time limit the design was implemented, design which had to be changed a bit (only the classes related to messages) due to the limitations of Hive.

  • The builder design pattern was used to be able to build main and secondary users in an optimal and fast way.
  • The observer design pattern was used to notify the client when data is received from the server (either via sockets or via rest api).
  • The bridge design pattern was used to separate non-client related classes so that the client can call methods dynamically.

2.2. Memory

To give a fast and optimal application I have decided to save the messages in the device memory. To do this in a way I have used the hive tool, which serves as a local nosql database.

As an optimal solution, every time new messages come I will save them in the device, as well as in the ram so that the chat screen does not have to make the user wait. Only the last message of the existing conversions of the device will be saved in the ram.

Also here it should be noted that the users' profile images will be stored on the user's device, while the addresses of the local images will be stored in the ram.

3. Server Side

3.1. Applied Logic

To demonstrate the server logic see the image below.

Look at the image, which simulates a session of a user who sends a friend request to another user.

The example was given in order to see when the use of websockets would be needed and when the use of rest api.

Real-time operations like sending messages and friend requests will use websockets while operations like opening a session and updating a user's data will use the rest api.

This is the section which remains to be polished. Mainly missing is to optimize the rest api code (in a more correct way), add new methods to the channels part to add new notifications and add methods to the rest api and channels for users to register.

3.2. NoSQL Database

To give a better user experience (in the sense of speed) it was necessary to use a nosql database, because in this way the user's data can be accessed more quickly.

Clearly, this thought cannot be said to be correct, because since there are relationships between the identities, data from other users related to the main user will have to be updated.

Soon this section can be changed and remodeled. For now the logic of the model is very basic, each user will contain messages which have not yet been read, usernames which are their friends, usernames which have sent friend requests and data such as username, images (encrypted) and more.

It should also be noted that django does not yet officially have nosql database integrations, for this reason I have used the djongo tool, which is very curious and very useful, it applies sql models to mongodb to protect business logic.

4. Screenshots

5. Video Demo

Chat.App.Flutter.Django.Django.Channels.Demo.1.mp4
You might also like...

A full-fledged one-to-one chat app developed entirely in Flutter

A full-fledged one-to-one chat app developed entirely in Flutter

Enigma Enigma - A minimalist, locked-down one-to-one chat app. Usage Flutter - Get Started Since this is a Firebase dependent project, create a Fireba

Dec 23, 2022

Chat-App - A Chat App with flutter and Firebase and Video Calling using WebRTC

chat_app A chat app with flutter and firebase with image message support and vid

Nov 23, 2022

Dart library with stack blur algorithm for RGBA images

stack_blur The Dart library for blurring images with the Stack blur algorithm. T

Nov 19, 2022

The most complete Chat UI for flutter highly customizable and helps developing chat UI faster.

⚠️ Dashchat v2 is available in v2 branch ⚠️ You can open issues for the v2 to indicate things we need to implement/fix. Also the API can change until

Dec 11, 2022

Chat-application - Build Chat Application using Flutter and Firebase

Chat-application - Build Chat Application using Flutter and Firebase

Build Chat Application using Flutter & Firebase Source Code - Enjoy ! Social Med

Jan 3, 2022

Full Feature Todos Flutter Mobile app with fireStore integration.

Full Feature Todos Flutter Mobile app with fireStore integration.

IONICFIREBASEAPP DOWNLOAD TODO APP Marketplace for Mobile app and Backend that developed on leading Enterprise Technologies with as well as with your

Nov 4, 2022

Chatting-App - A Simple chat app built with Flutter/Dart and Firebase

Chatting-App - A Simple chat app built with Flutter/Dart and Firebase

Chat App By Flutter & Firebase 🤳 ✨ A Simple chat app built with Flutter/Dart an

May 20, 2022

A chat App built with flutter and firebase as backend

chat_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Dec 3, 2021

Chat App Built With Flutter And Firebase

Chat App Built With Flutter And Firebase

Chat App with Firebase - Flutter Preview video: https://youtu.be/bS5tkTDqFqU My

Dec 14, 2022
Owner
Andres Arturo Rodriguez Calderon
Ege University Computer Engineering
Andres Arturo Rodriguez Calderon
🌍 Full-stack travel app using Flutter, Dart and Geolocation service. Map updates 🗺 along with map markers based on location filters 📌

Tripscape ?? Built With Frontend Flutter Dart Backend & Libraries Geolocator Google Maps Flutter Provider API Places API Google Maps API Places Autoco

Soumyadeep Das 3 Nov 23, 2022
This is an interactive roadmaps/full stack curriculum app created for new programmers and enthusiasts.

Eduance This is an educational app created by Gokul Eswaran and Kiran Vishwak for the national level Hackathon TekSpark'21 on 27/10/2021 hosted by Kar

Gokul Eswaran 3 Feb 4, 2022
Amir Khan 47 Jan 8, 2023
🚀 Full-Stack Flutter application, encoded using Dart. Utilizes native device features 📷 and stores user data on a local SQFLite database. ✔

great_places_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Soumyadeep Das 2 Jan 24, 2022
Full Stack Instagram Clone made with ❤ using Flutter & Firebase.

Instagram Clone Full Stack Instagram Clone made with ❤ using Flutter & Firebase. Click on the link below to view the Overview video by Tushar Khatri.

Tushar Khatri 7 Oct 22, 2022
A powerful Flutter chat UI component library and business logic for Tencent Cloud Chat, creating seamless in-app chat modules for delightful user experiences.

<style> .button-9 { appearance: button; backface-visibility: hidden; background-color: #1d52d9; border-radius: 6px; border-width: 0; box-shadow: rgba(

Tencent Cloud 63 Aug 11, 2023
It is a simple group chat application made with flutter back-end by Firebase. People can chat like a community chat.

flash_chat A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if th

Moideen Rafih P A 4 Aug 7, 2022
Blog App Development Front-End and Back-End using Flutter, ExpressJs, NodeJS, and MongoDB

Blog App Development Front-End and Back-End using Flutter, ExpressJs, NodeJS, and MongoDB

null 2 Dec 14, 2022
Plant-monitor - Plant monitoring system using IoT, MongoDB, and Flutter

Plant Monitor IoT based plant monitoring system which is connected to MongoDB. T

Souvik Biswas 15 Dec 1, 2022
Modular server framework with ConnectMe (WebSockets + PackMe) and MongoDb support.

What is ServeMe ServeMe is a simple and powerful modular server framework. It allows to easily create backend services for both mobile and web applica

Source Caster 20 Dec 3, 2022