Build a Low-Code SaaS product using Appwrite
I am a developer currently in Germany and a father to one. I share productivity apps for Salesforce implementations every week.
Try out these 5 star rated Salesforce browser extensions I built.
- Salesforce Dependent Picklist Matrix Export
- Salesforce Data/Metadata Utility
- Record and Metadata Comparator for Salesforce (Originally developed by Rajiv Bhatt)
If you have any suggestions for improvements or if you just want to tell me how much my project sucks, my email is manindersfdc@gmail.com.
You can support my work at https://www.buymeacoffee.com/maninders
Name
Magic Messenger
Team Members
Description of Project
Why I built this product?
Many people do not know to write code or lack the relevant skills to build a web application. I fall into the latter category. I have good experience with Salesforce and am also good at programming. But I lack the knowledge to build a web app.
I have great ideas to build apps which help developers and end users be more productive while using Salesforce. For those who are unaware, Salesforce is the world’s #1 customer relationship management (CRM) platform. I have read many articles on how to build a SaaS product which supports user logins and designing the web interface. All of the solutions fell into 2 categories:
Pro Code: Build the front end using UI frameworks connected to the backend database. Implement user authentication and control sessions using libraries or with custom code. Deploy the complete solution to a hosting provider and configure the app for public access
No-code: Build the app using no-code platforms such as Bubble, Webflow and others. These platforms have feature limited free versions with expensive paid plans.
The solution I stumbled upon
The #AppwriteHackathon from Hashnode introduced me to a solution I have been looking for.
For the user logins and data storage I finalised Appwrite. It is a powerful backend-as-a-service platform that provides all the core APIs required to build any application. The features I am interested in are
Is open source and free to self-host
Has detailed documentation
Supports OAuth integrations and other authentication methods
Provides REST API and GraphQL for easy integration with other no-code platforms
Media storage
Realtime API to capture changes to the resources as and when they occur
use a custom domain for free
For the User Interface, I finalised Appsmith. It is an open-source tool that helps the rapid creation of internal tools. You can drag and drop pre-built widgets to build UI on a grid-style canvas.
What did I build?
To have a production ready SaaS app, I built magic messenger. It is a custom messaging app to send custom messages to your users or customers. This can be used by individuals for personal use or by organisations to message customers using predefined message templates. Currently, it supports Whatsapp messaging.
Features
Dynamically generate custom messages from your data using this WhatsApp link builder, then send the message to a WhatsApp user.
Users can select a Contact from the table widget and auto-generate a new message to the user
Users can select between different message templates
Users can edit or add to the message before sending
Users can send a custom message without using the templates
Tech stack
I chose the tech stack to
minimise coding
have version control
rapid production deployment for public access
be more productive
The platforms used are
Appwrite - for user logins, database, user authentication and data security
Appsmith - for user interface and client-side logic
Random User - for generating useful mock data
WhatsApp Web - for sending messages to WhatsApp users
What role Appwrite has in the app
Appwrite is the central piece to the functioning of the app.
Database service is used for creating and storing contact information such as name, phone, gender, email, address, date of birth. The messages are sent to these contacts. The document
Account API service is used to create authenticated users for the app. Every user has to authenticate to use the app. We use magic URL authentication method. This is useful to build a no password login mechanism for the app.
Custom Domains is used to setup custom domain to access Appwrite instance.
Appwrite for Web is used to access REST API endpoints for connecting the frontend built with Appsmith to the backend built with Appwrite.
Avatars API service to generate QR code from the WhatsApp link dynamically generated in the app. This can be scanned to open the WhatsApp message on mobile.
How I built the app
I will share the high level design and user flow of the app. You can build your own no-code app using the same design.
Tech design
Create Appwrite account > setup new project > setup new database > setup new collection (similar to a table) - create documents (similar to records). Here each document is a contact record.
Set the permissions for the collection and documents to be All Users. This enabled only the authenticated users to have access to the data. I have not enabled Document Security which allows to set access permissions for every Contact record. I faced a challenge which we discuss later.
Setup custom domain to use your own domain as REST API endpoint. This is optional. You can use the default domain provided by Appwrite (https://cloud.appwrite.io/v1) as well.
Create API key and enable only the required scopes. This API key will be used when calling the REST API endpoints.
Next, create Appsmith account > create a new workspace > create a new project from a template or blank template.
Add REST API data source to list all documents (contacts) from appwrite. Check the Appwrite documentation for the endpoints and parameters. Use the custom domain as the host name and API key in the header.
- Follow Appsmith documentation to create the UI and bind it to the Appwrite endpoints.
User Journey
- Watch the demo to understand the user journey of signing in without password and using the magic messenger app.
Challenges we faced
I believe that if you haven't faced any challenges, you haven't explored yet.
If you found a solution to all the challenges, you haven't taken the unexplored path.
Challenge 1: In search for a frontend platform which has built in Appwrite integration, I found Tooljet. The integration does not work and probably it has a bug. I spent many hours figuring this out and have evidence to support this.
Solution: Use the REST API or GraphQL integration to connect the frontend platform with Appwrite.
Challenge 2: Tooljet does not have git version control. It does have version control on the platform though.
Solution: I wanted to use git for version control. I found Appsmith which supports git version control out of the box.
Challenge 3: Figuring out the REST API authentication was confusing. This was needed to connect Appwrite with Appsmith.
Solution: The blog written by the founder of Appwrite,Eldad A. Fux, helped me in the right direction.
Challenge 4: Appwrite has hard limits of 10 requests in every 60 minutes per user account for magic URL authentication. It is necessary for the custom app to verify the user but also use this endpoint only when necessary. Just refreshing the app page would call the endpoint and consume the limits.
Solution: The solution I implemented has 3 pages. The Login page creates a magic URL session when the user enters the email to sign up/ sign in. The Redirect page confirms the magic URL session to authenticate the user. The Home Page displays the app home page if the user authentication is successful else displays an error.
Challenge 5: Creating mock/test data in Appwrite. Appwrite does not have a feature to bulk load data into a collection. There is an app built by a developer which does this, but it is not a web app. Also, I wanted to have meaningful contact details as test data.
Solution: I found another amazing web app called https://randomuser.me/ which is an open source API for generating random user data. It was a perfect fit. I used Appwite REST API in Appsmith and loaded sample data from the random user API.
Challenge 6: Have every user create and maintain their own contact list in the app. Appwrite provides Document Security and Permissions API to support this. But to execute REST APIs on the server side (Appsmith) a JWT has to be created from the client side. I encountered the below error while creating JWT.
Solution: I did not find a solution to this issue. I think I know why this does not work. Appsmith serves as a backend for the web app. The Appwrite APIs are called from here. The authenticated user session cookies in the browser are not sent by Appsmith from the browser to Appwrite endpoints. So, Appwrite gives an error for the guest user even though the user is authenticated.
There is no article I could find if someone has ever tried doing this using low-code platforms like Tooljet and Appsmith. I will reach out to Appwrite support and the creator in the hope of getting this sorted.
Links
Demo Link
#Appwrite #AppwriteHackathon
