I Built a Data Analytics SaaS in 10 Hours (Not 30 Minutes) - Full Demo

Good evening, everyone. Welcome back to Tucson AI. Last time we shared our mental model of building an AI application. This week we're going to share a demo of a little product that we built that turns CSV into Insights. Let's dive in. So what did we build?

All right. We had a video like last year about how you can convert your CSV into knowledge, right? And we talked about van and you can upload your CSV and then you can interact with your CSV data and all that. Let me see if I can build a separate tool because I didn't want to use Vanna. Vanna was not necessarily the best tool based on what I expected. Therefore, I started talking to ChatGPT and I told ChatGPT that first you give me some idea. I even didn't mention that I'm going to work on this. And it gave me a few ideas and I explained that looking into these kind of things and then it gave me this idea, CSV to Insights. It called it CSV to Insight. We started elaborating on this idea. And initially the idea was like marketing agencies, they upload their CSV file and then your application or the CSV to Insight application will generate a report for them. And I said, okay. He gave me the idea and I started challenging it, that, okay, why do you think this is a good idea? And then another thing that I did some research using Perplexity said, okay, I'm going to build this application with all these features, do me a research and find me some competitors in the market. So it gave me a few pages of document, a few companies that they are actually just generating reports for agencies. And I checked them out and turns out that they are obviously expensive tools. Plus there is a learning curve if you as a marketing agency want to generate some report from your data. And I found that idea interesting. You can see here it even compared different kind of like marketing agencies with Shopify stores, because I was doubtful to go with marketing agencies or to build a tool for Shopify stores. And both of them are actually really legitimate ideas. But I picked marketing agencies anyway. After this you can see a lot of back and forth with ChatGPT and all that where I asked it to come up with a PRD document. You can see here the PRD document. So the overview, the core features, the techest data, like all different requirements. And after that I went to Claude and I started just sharing this with Claude and start building the app. So with Claude, I build the skeleton of the code and instead of asking even cloud code to do that for me. So I created a fast API because I knew I want my backend to be fast API, Python. And for the front end I said, okay, here's the framework that I'm going to use. I'm going to use Vid, with React, with typescript, all that. So I built the projects, both front end and backend. And then after that I initiated this cloud code and then I started talking to it and giving information about the PRD and going from there. So here. Any questions so far?

So you're saying you built the skeleton first and then you included cloud code basically afterwards?

Yes. If you want to use cloud code, there are a lot of tricks and tips that you can use.

Share something. Yeah, share some.

Okay, so cloud code has a bunch of commands. There are even some GitHub repo where they share some of these tips and tricks and prompts that how you can improve cloud code. Usually the first step that you have to do is when you have the skeleton of the code, you need to execute this init command, right? So/ init and what happens going to cloud code. Create a file called Cloud MD and it's going to go over your code base, whatever you have so far and document everything. I have it here and I updated that a few times initially when I had the skeleton. So it just creates a very generic document that okay, this is a backend, this is front end. That's why I just keep updating this cloud document. When you start a new cloud code or if you run multiple cloud code at the same time, sometimes you want to make sure that cloud code has the context of what's going on and one of the best ways to look at your this cloud MD file. After you run this init command, you start having a normal conversation with anyone like ChatGPT, let's go and implement this. You can even share the PRD and ask cloud code to take a look at that and then it knows exactly what functions and features you needed to implement and you can start having a conversation telling it what to do for each step. This whole process took a couple of weeks and people who just say I develop a production ready application within 30 minutes and all that. I think all of that is bullshit and is not really good for production. My idea from the beginning was do something As a micro SaaS because I'm going to launch this idea and for marketing agencies.

How many total hours?

Total hours on and off within a couple of weeks. But I think on average maybe 10 hours. Again because I have refactored the code a Couple of times, for example, inside one component on one file and the file could be like thousands of lines of code. And after some time I ask it now go and check my code and for example, break this one huge file into multiple components. It's a lot easier for cloud code later on to understand it. Rather than just putting everything, this entire context into this, its context window. This is another tip that I think people should be doing. Don't write a very large file. Rather just try at the beginning you can do it. But when you see after some threshold that this file is becoming very huge, you can split it into multiple files.

Right. So 10 hours is already implemented, the login and payment. Right. So that's pretty much ready to release.

Yes. The only thing that I haven't done is the payment system. But other than that, this is now the final version of the application and I call it Flash Insight.

Let's do a demo.

Let me just log in.

Yeah. What happens?

All right. There are three main pages. One of them is the dashboard you can see and the second one is upload data. And the third one is your recent chats. Usually what you have to do as the first step when you come to the dashboard, it just shows you all of the data sets or CSV files. Right now it only works with CSV files. It shows like some information about that. As a marketing agency owner, you, you want to come to this page which is upload data and then you want to upload some CSV to start interacting with your data. And the CSV is your Google Ads information. What they want to do is they want to understand the performance of these campaigns and they want to ask a lot of questions, get a lot of insights. And here what you can do is you can just download the CSV of your data. Right now it only works with CSV, but later on I will add this connecting to the Google Ad Dashboard, for instance. And then what happens? It's going to read your data, it's going to run some smart cleaning and pre processing on your data. Here, for example, you can see number of rows in this document is 2,600. But there are some issues with some of the data and this data set is specifically designed for that. Meaning that there is for example a date column here, but the format of the dates are different. Right. And there should be some cleaning before you start actually asking your questions. So it's going to do all of that smart cleaning, making sure that if there is any missing value, null value, things like that, it's going to just cover Them and fix them. After that you can start interacting with it.

Is there a way to preview a few lines? Like you know how a data scientist would do it?

Say that one more time.

Is there a way to preview a few lines the data so that you kind of.

You mean to see the few rows of the data?

Yeah, yeah. Like a data set?

Yeah, it's possible. I didn't add it, but yeah, I can add that. When it's doing that, it is actually just showing the first few rows so we can take a look.

Yeah, this is good because this is how data scientists work, right? First we check the data quality and then about like how many structured data columns, numeric columns and missing data, all those kind of things. So you have in the dashboard.

Yes. However, my idea is that this tool is good for marketing agencies, which are usually the owners or the people are not technical, not data scientists. Let's say you click on this, it comes to this page and now the data set is there. It gives you just these three predefined questions and then you can start having a conversation. So let's say if you want to see the number of columns, right. You can ask your question. It's going to analyze your data. Take a look at that. And then it's going to. Okay, all right. It gives you all of your columns and then it's going to suggest some ideas. Now what you can hear, you can start asking whatever questions that you might have. You can ask what is the average sale amount and cost and all that. And then it's going to, again, behind the scene is going to generate some SQL query. You can see the SQL query here. You can see the result after executing the SQL query. And then after that it's going to generate some chart, if that's necessary for this. It gives you some key insights. Okay. And then it's going to use all that information to generate some meaningful response. And you can see here, this is the breakdown of average sale amount, right? And you can see the key insights and all that. And then it suggests three more relevant questions and you can keep doing it. Right.

I like the data visualization piece. It looks like interactive already, right?

Yes.

Yeah, it actually shows the difference.

What is the cost over time? Show me. So here you can ask your specific question. I said what is. Just show. See, it shows the cost over time. And then again it shows some key insight. You can see here again the SQL query that has been generated, all the rows, everything here. And then shows the chart, shows the values again here. And I try to make sure that the visualization or showing this table again, it looks pretty when it's printed out because the data is being streamed out. Right. And then you can see the key in size and what does that mean? And all that again you can just keep adding and just talking to your document. You can see all of your previous query history. You can see here you can execute them if you want to. You can create a new chat and then you can go to your recent chats and here you can see all the chats that you have done with different data sets. Okay. And then you can load more and all that. Okay. This is more or less what this application is doing. So you can get information about your data set. You can see them here. You can delete them if you want to. Let's say I want to delete this data set so it's going to be deleted. And then recent chats are right is the list of all the chats that you have. It shows you the some statistics about that. And you, if you click on any of these chats here, for example, let me just click on this one for instance, it's going to load the chat and all right, see the last. This is a chat that I had with it. You can see there are different time types of visualizations. So right now it supports bar chart, line chart, pie chart, but you can really extend that to all sorts of charts that are needed. And here, just to show you this chat file, it was originally more than 3,000 lines and right now, let me see how many lines is it? It's 750 almost. So I asked it to refactor it and it created several different components here and import. Now it's actually even the kind of improve things very faster, much faster because it when it needs to read this entire file, it's not that long. So it can understand and perform the tasks much better. By the way, to just give you an idea in terms of like logging and authentication, I'm using Clerk database is a Supabase database and the backend is Python. The front end is JavaScript or React and that's about it.

Yeah. Let's say before, if you are not using ChatGPT or cloth code, how long do you think it will take you to build this app knowing that you already have the prd? Just the coding part.

How much time the coding part. It would take me at least a week, maybe two weeks if I wanted to write. Really as neat as what it is now?

Yeah.

And also I also created a landing page for that. The landing page Is almost ready if I have it here. Right.

Are you using cloud to generate this? That's pretty nice.

No, I used V0. V0 is very good at building front end stuff.

Yep.

And then I used cloud code, it generated this document and then I gave the document to V0 and I asked it to generate the landing page. So the landing page is also ready that I just need to do some changes maybe with the icon, just add some of these things that don't work right, these buttons, update them and then make it live.

I have a question. So this is very close to text to SQL but at a much smaller scale. Basically I'm curious, like in these type of applications, how do we, how do we look out for hallucination? I think the biggest fear in these type of applications is can they give me the wrong results?

So that's an excellent question. In terms of checking that then a person who is technical needs to somehow verify and see if the responses are correct or not. For example, when you just say show me cost over time, it gives you the SQL query that it's using and also write the execution of that query and then it generates that. But how do you know that this is like exactly right or wrong? You need to have a data analyst to do that even. You need to have some, first of all, some guard layers in terms of making sure that the data set that you know you are processing, it has certain threats like standards and all that. To decrease that the chance of hallucination, you need to work on the technical implementation in terms of when you are generating the queries, right? Make sure that it generates enough information and context about your data set so the LLM can generate a better SQL query. So you need to do a lot of like technical things here and there, but at the end you are not 100% maybe sure that the answer is correct or not. You have to have a separate data set, do some evaluation, right? Say oh, if I ask this question, I expect this response and then you ask the same question, see if it gives you the exact response or not. So you can verify by doing evaluation at some point you can trust more and more. And here I have added this feedback so you can give the feedback. If the response is bad, you can just give their feedback. And then later on I use this to improve the system. If you give it like a thumbs up, it means that this response is correct and then we can again use that information to later on when you ask the same question and on that to make sure that it's going to give you the exact same deterministic response.

Yeah, makes sense. So we're releasing it today. It's our little mini micro SaaS that we're building to share with audience and then see if you can learn from how we build it and how, you know, how it interacts.

So I am trying to just implement. Try to validate as much as possible by talking to actual people, by doing some search online and all that, then build it, make it available, and see the reaction.

Yeah, yeah. We will share all the ideas and the prototypes with our audience here, and I hope that the audience can also learn with us about how to build with AI and how to even sell with AI. Yeah. Nice chatting. We'll see you next time, Mehdi.

Yeah, see you.