Creating a CRM from scratch using SaasRock’s Entity Builder

I’ll write about the steps I take as I’m creating my own CRM for SaasRock’s core. I’m going to use its Entity Builder, and add everything I need on the fly.

The only thing I know about CRM is its goal: managing relationships.

Let’s start by exploring popular CRM solutions to find out the core structure for an actual CRM.

---

1. Research — Existing CRM tools

According to Zapier, Pipedrive is one of the best CRM apps. So I went ahead and created an account.

And now let’s see how Freshsales lists deals:

2. Core Models — Contacts & Deals

Right from the start, I’m able to conclude that we need 2 models:

• Contact: Email, Name, Phone, Company, Title, and Status (Lead, Prospect, Customer, Partner…).
• Deal: Contact, Name, Value, and Status (Open, Won, Lost).

Deal statuses should be customizable since companies must have their own sales processes, so I’ll use the SaasRock’s Entity Builder to define their properties.

A Status would determine WHAT’s the next action and WHO is responsible for it, and WHEN it should be done.

What, Who and When sound like a Workflow more than a simple status field, so let’s keep that in mind.

3. List Views — Table or Kanban & Filters

We can use a table for Contacts:

This view looks too plain, it needs a way to filter specific things, such as “Lead” status, so I went ahead and created a Filter mechanism:

And Deals should not have a Table view:

But a Kanban view:

I documented this process with a few tweets:

SaasRock

@saas_rock

How would you improve this UI/UX?

- Contact management
- Deal's Table vs Kanban view

(upcoming at the end of this month on v0.2.8)

20:20 PM - 25 Jun 2022

SaasRock

@saas_rock

Input Filters via URL (with search params) ✨

✅ Search in all fields
✅ Search individual fields
✅ Preload values with URL
✅ Submit GET form with new values
✅ Submit GET form clearing search
✅ Table & Kanban

#ui #ux #reactrouter

20:20 PM - 27 Jun 2022

4. Workflow — Deal Stages

I could keep the Deal.Status field as a simple text field, but making the status as a workflow status could give us a couple of benefits:

• Add custom workflow states
• Assign to people on status change
• Send emails on status change
• Create and assign predefined tasks

Since I’m building the CRM on top of my Remix SaaS boilerplate, SaasRock, I’ll use the Entity Builder to create Contacts and Deals. As of right now, Workflows have not been implemented:

So let’s build a Workflows engine from scratch as well, we need the following database models:

• WorkflowState: Title and Internal Status (Draft, Pending, Completed or Cancelled).
• WorkflowStep: From state, To state, and an Action title.
• WorkflowStepAssignee: Who to assign when reaching a certain Step (Current Tenant?, Roles?, Groups?, Users?).

Starting from the UI, it would look something like this:

And Steps:

5. Row Details View

Since I want to build CRM entities on top of the Entity Builder, I’ll need to make some changes there first. Currently, there are 3 elements on the Edit Row View:

• Details: Property fields
• Actions: Share, Update and Delete
• Activity: Row events

I need to add:

• Tags: New property type for colorful tags
• Tasks: Ability to assign tasks to other members
• Comments: A simple comment mechanism for every row
• Workflow Steps: Actions to send the row to a new state

5.1. Comments

First things first: Let’s add Tags, Comments, and Tasks.

I grouped Events/Logs and Comments into an Activity section:

I made a demo about this functionality:

I created a Postmark template “comment-notification” so the Row creator can receive emails for every comment. We’ll leave email notification preferences for another time.

5.2. Tags

Now we want to Create and Update Entity Tags and set them to Rows. Here’s what an empty state would look like:

And here’s the Row Tags route/modal.

5.3. Tasks

Now, I’ll build the RowTask model with user assignment in mind, but right now a simple implementation is fine:

5.4. Workflow State and Transitions

Let’s use the WorkflowState and WorkflowStep models, I’ll leave WorkflowStepAssignee for another post.

When a Row is created, it should be set to the first Workflow State that we created, Draft is the default. When Rows are Drafts, we should have only one action (Submit):

So every row (that has Workflows enabled), will have this "Submit" action:

And when the Submit action is performed, the new state should be Pending, which has 3 possible actions:

• Recall → Sends row to back to Draft
• Accept → Completes the workflow
• Reject → Cancels the workflow

And whenever a Row reaches its end, it should not have any more actions, but it should show the final State:

With every workflow action/step performed, there should be an audit trail:

5.5. Row Details View — Final result

I posted a 10-min video about these features:

Alexandro Martínez ☕️

@alexandromtzg

Seriously, @remix_run makes me build 100x faster 😲

Today I added a lot of power to @saas_rock's Entity Builder 😀

✨ Filter by custom properties or tags
✨ Comments - with @Postmarkapp email notifications
✨ Tags
✨ Tasks
✨ Workflow Transitions
Demo 👇
loom.com/share/83f892e1…

00:16 AM - 30 Jun 2022

6. Contacts and Deals using the Entity Builder

SaasRocks’s main goal is to build SaaS applications faster than ever using its Entity Builder, so it would make sense that the CRM is built on top of it.

Watch the end result here:

---

Conclusion

I know that this is the world’s simplest CRM, but it’s a good start and the Entity Builder got stronger.

Let me know what should I add for the next iteration of the CRM!

Subscribe to SaasRock's newsletter for more!