How to build custom web apps & client portals with Coda and Softr
Let’s consider building an investor portal for people who invested in our startup. All the data we need is in a Coda Doc. Each investor can see only their associated data. We could use Coda and share access with investors, but we would need to create one dedicated Coda Doc for each investor due to the access restriction requirements of my app. This would mean as many Docs as there are investors, and disconnected tables. Making updates would be cumbersome, scattered, decentralized, time-consuming.
We could resolve this limitation by using Softr to build my portal. We would store all the data in one centralized Coda Doc and define the user permission layers directly in Softr. This ensures each investor can only see their information, while we can see and manage everything in one single Coda Doc.
First, we would build the Coda Doc. Below is one example of what could be included in the Investor portal system.
P.S.: This post focuses on Coda as a data source for Softr. However, there are many other data sources we can use for Softr, and the principles are pretty much the same.
P.P.S.: Pricing is certainly a factor in choosing the software stack for this kind of project for many people/teams to varying degrees. I don't focus on that in this post, but you can find information about Softr's pricing on the dedicated page.
Building the Coda Doc
This is a simplified Doc, created only to demonstrate the capabilities of building the portal in Softr. This way, you can understand the principles and implement them independently (or work with me).
Step 1 - Build the Coda Doc
First, we build the Coda Doc with a structure that enables data centralization for easy management. In this example, we build the following tables:
Investors: a table of all investors (they will be the app users automatically synced with Softr for automated user management)
Team news: a table storing all news to share with all or specific investors for their visibility in the portal
Documents: a table of all documents we want to share with all or specific investors for their visibility in the portal
Investment rounds: a table of all the past, present, and future investment rounds we are undertaking
Investments: a table storing all investments made by each investor
Team: a table of all our team members and their information
Step 2 - Build the Softr App
We may use the Softr AI app builder as a starting point. Upon creating the app, we can navigate the left sidebar menu to view all the app pages, theme (app design), and settings. Utility pages (i.e., sign-in, sign-up, forgot password, etc.) are automatically provided, and all the logic is handled by Softr. We can customize those as needed or create our custom utility pages to replace them.
On the "Users" tab, we can sync the data source — in this example case, our "Investors" table. We can also apply a filter to only sync Investors from Coda whose status is not archived. This ensures we keep the user base clean and up to date. We can finally map the email, name, and avatar from the dedicated columns in our Investors Coda table. Select Save and sync, and done. Users are now synced with our app.
After publishing the app, we can invite users by selecting them from the Users tab > invite. We can manage the authentication flow and other user and permission settings from the dedicated tabs.
Syncing users from the data source, with a filter condition applied
Now we can build all the app pages. Pages are composed of blocks. Some blocks are static and others are dynamic. The dynamic blocks will pull data from our source Coda Doc. We can use multiple different Docs or tools as Data Sources in one single Softr app. We can define the data source on each block in the Softr app independently. This leads us to Step 3, the final one in this guide to using Coda as a data source in Softr.
Step 3 - Connect Coda to Softr Blocks
When using a dynamic block, we can connect Coda as the data source. Dynamic blocks are listed under the dedicated section in the right-hand block panel in Softr, which we can see when we add a new block to a page on the app. Some dynamic blocks currently do not support Coda as a data source (e.g., table) at the time of launch.
For example, List is a dynamic block. When we add a List block to a page, we can connect Coda as a data source. Say, we want to display the latest startup news on the Homepage. We add a List block and connect our "Company news" table to it. We add filters for the logged-in user as needed (i.e., show all news targeted at the logged-in investor). We sort by date in descending order and select the content shown on each card.
Further, we can create a detail page for News, allowing users to expand each news card and read all the details.
Conclusion
These are the basics of building a Softr app with Coda as a data source. For a visual walkthrough, watch the video.
What do you think? What apps will you build or not build with Coda and Softr? Let me know.
For any questions or if you are interested in working together, contact me.
