DEV Community

Cover image for Lotir - Share link and images between your phone and your computer
Julien
Julien

Posted on

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

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

GitHub logo julien040 / lotir

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

Lotir

Header

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

Demo Image

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)
  • …

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.

How to set sync key

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.

Website Home

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.

Lotir on android

Architecture πŸ—Ί

Lotir 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)

Collapse
 
anthonyjdella profile image
Anthony

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

Collapse
 
julien41 profile image
Julien

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

Collapse
 
adhirkirtikar profile image
Adhir Kirtikar

This looks awesome!!! Great job...
and congratulations in advance for winning the hackathon ;)

Collapse
 
julien41 profile image
Julien

Thanks !
However, I haven't won yet. I saw great projects in Action Star category, everything can happen.

Collapse
 
adhirkirtikar profile image
Adhir Kirtikar

Congrats once again! 😸

Collapse
 
sanketsahu profile image
Sanket Sahu

Good to see NativeBase there. Happy to help if you face any issues with that.

Collapse
 
julien41 profile image
Julien

NativeBase is awesome !
Coming from the web, transition was simpler thanks to this library.