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
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) - ā¦
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
addImagefunction and link is then saved usingaddMessagefunction
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 Phonefrom Microsoft
These videos show two situations :
- Transfering text to phone
- Transfering image to phone
Latest comments (7)
This looks awesome!!! Great job...
and congratulations in advance for winning the hackathon ;)
Thanks !
However, I haven't won yet. I saw great projects in Action Star category, everything can happen.
Congrats once again! šø
Good to see NativeBase there. Happy to help if you face any issues with that.
NativeBase is awesome !
Coming from the web, transition was simpler thanks to this library.
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
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