Julien

Posted on Jan 9, 2022

Lotir - Share link and images between your phone and your computer

#atlashackathon

Overview of My Submission

I've always found painful to use email to share things to my phone. But I've never found any solutions solving this problem efficiently. They would either be too complex or not designed as first for this use case.
So I built this app by myself.

Submission Category:

Action Star
This app is event-driven. Each time something is shared from desktop, a notification is sent to phone thanks to Realm Trigger

Link to Code

julien040 / lotir

Lotir is an app to share text and images between your devices

Lotir

What is Lotir ?

I've created this app because I couldn't support sending myself an email to share something on my phone.

Lotir is a simple app that allows you to share images and text between your phone and your computer.

It's free
No ads
Simple to use
Share text and images
Temporary : Lotir keep your stuff for 7 days

How to use it ?

To use the app, you need to install it on your phone. Download it from Github Release. To access the computer app, just go to lotir.ml and set a sync key.

If you want to know more about this project, it has been built for the MongoDB Atlas hackathon. Check the announcement post here.

Development

Project structure

This repository is monorepo. It contains the following sub-projects:

mobile - Mobile apps (Expo)
desktop - Desktop apps (Neutralino)
website - Web app (Next.js)
…

View on GitHub

Additional Resources / Info

What's the use case of the app ? 🤔

Lotir permites an easy share of text and image between your phone and your computer. It takes less than 30 seconds to share. And it's bi-directionnal. You can share from your computer or your phone.
Lotir can be useful in these situations :

Imagine you receive a long OTP Code on your phone. Use Lotir to send it to your computer.
You have a very long url that you should send to Whatsapp. Use Lotir to send it to your phone.
You have a photo on your phone, and you need it on your computer. Send it over Lotir.

Also, everything is temporary. Thanks to MongoDB TTL indexes, each thing shared stays on the server for 7 days.

Features

Share any text from and to your phone/computer
Share any image from and to your phone/computer
Receive a notification when a new share happened
Data is safe and temporary. I use a MongoDB Database hosted on Atlas. Data is replicated using a replica-set in three availability zones and can't stay for more than 7 days.

How to use ?

Lotir does not have the concept of registration/login. Instead, it uses a sync key. Consider it as a secret key, it authenticates you to the server. Keep it hidden. To use Lotir, just put the same key in all your devices.

When you done that, you're ready to use Lotir

Download app

As you saw, Lotir is composed of two parts : a computer app and a phone app.

Computer

Lotir.ml is a web app that can handle all computer functionalities. However, if you prefer desktop apps, you can download them from github release.

Phone

Currently, iOS is not yet available.
To use Lotir on your phone, install its APK from github release.

Google Play protect may show several warnings about the security of this app. You can skip them.

Architecture 🗺

Clients (blue on diagram)

Clients are mobile apps, desktop apps and web apps. They identify themselves using the sync key specified in settings. Using Realm SDK (web and React Native), they interact with MongoDB Realm Functions.

Web app is built using NextJS and Realm Web SDK. UI is handled by chakra UI. I've added a custom theme on top of it.
Mobile apps are built using Expo and NativeBase. Notification service is also handled by Expo. Apps are then built using EAS Build.
Desktop apps are just a webview around Lotir.ml created with Neutralino. These are lighter than Electron.

Realm Function (purple on diagram)

Those are the main interface between client and backend. There is 5 of them :

addMessage : used to share text
addImage : used to share image
setToken : used to register notification token for mobile app
getMessages : retrieve shared text and images for clients
notifMobile : a function that responds to Realm trigger to create a new notifications

When an image needs to be shared, it is first upload to imgBB by the addImage function and link is then saved using addMessage function

Database trigger (yellow on diagram)

Each time something is shared, a new document is created in MongoDB. Creation of a new document triggers the notifMobile function. If it is detected that the message comes from a computer, the function sends a notification to the phone.

MongoDB Atlas database (green on diagram)

This is the central piece of the architecture. The MongoDB database hosted on MongoDB Atlas saves and retrieves all data for Realm Functions. Each share is saved in a collection with 5 attributes :

platform : mobile or computer
id : the sync key
title : self explanatory
body : self explanatory
time : timestamp of when the share was created

Then, a MongoDB TTL index ensures that shares don't stay more than 7 days on the server.

MongoDB Charts

To check some stats about the app, I've set up a small dashboard using MongoDB Charts. I can see how many different users there are, the repartition per platform and how many shares have been made in a week.
Link to dashboard

MongoDB Realm Hosting

Lotir.ml is hosted using MongoDB Realm Hosting

Open Source projects used

Expo : thanks to a recent update, Realm SDK could be used along Expo
Realm SDK (web and React Native) : those SDKs greatly simplified development and permits me to avoid using http endpoints.
react-native-async-storage : used to save data in Mobile app
Native base : Great UI library for React Native
react-navigation : Router for React Native
React for NextJs and React Native
NextJS : the site isn't optimized but still run fast thanks to NextJS
Chakra UI : Equivalent of Native base but for React and Vue.
Icons 8 : Icons come from this awesome website
Neutralino : Embed the web app in executables
Realm-cli : I could easily push and pull config of Realm Project thanks to CLI.

Demo

To record my phone screen, I use Your Phone from Microsoft

These videos show two situations :

Transfering text to phone
Transfering image to phone

Top comments (7)

Anthony • Jan 9 '22

This submission is insane! Did you actually create it specifically for this hackathon or another project? It seems extremely in-depth, I'm wondering how you did so much so quickly!

Definitely a winning submission here

Julien • Jan 9 '22

Thank you, it makes me happy hearing that 🥰.

I've just reuse a chakra theme from an old project. The rest was created entirely for this hackathon. And for the design, I got inspired by some old figma sketches.

I had this idea for a long time, but never add the energy to build it until I saw the announcement post