Transcription
Iman Godzi's SAS app is making over $130,000 every single month, and I legally just built an exact replica of it without having to write one single line of code. Now, this isn't some basic landing page or a simple tool; I'm talking about a fully functional SAS platform with user accounts, payment processing through Stripe to earn money right away, and every single feature of the original. And the craziest part—yes, it gets crazier—I just used one AI tool to build the entire thing. No coding experience required, no development team, just me and this one new AI tool that most people have no idea how to properly use—not yet. Because in this video, I'll show you exactly how I reverse-engineered Iman Gad's SAS app named Floy, step by step.
Unlike other no-code tutorials here on YouTube that just barely scratched the surface, I'm going to reveal how this new AI tool can generate an entire development documentation that turns complex apps into reality within just minutes. This video is special for people like you and I that may have never even created an app before. So whether you're trying to validate a business idea, create your own SAS, or just want to see how deep the AI rabbit hole goes in 2025, this video is the most valuable 15 minutes you'll spend on YouTube this week. All right, so let me show you how deep this goes.
What we're going to do is start with the new AI tool, Code Guide. I added a link in the description below so you can go ahead and check it out. And later on in the video, we will use Replit to build the app, and with code m I ke Mikey, you will get a 10% discount. Getting started with Code Guide begins by activating Cody, the built-in AI voice guide, to help explore the environment. While not mandatory, it's a great way to familiarize yourself with the system before diving into any actual setup. A quick interaction with Cody helps reveal how navigation works, and from there, it's time to click on "New Project" and begin.
Now, the prompt field opens, ready to receive initial instructions. In this case, in our case, the goal is to build a flowy.com style app—an all-in-one platform designed for agencies, digital businesses, and consultants. The vision centers on unifying operations, and I'm talking about client management, invoicing, tasks, CRM, real-time chat, even, and of course, a centralized knowledge base called "Brain," and a dashboard for visibility. Setup should feel smooth and modern, with client portals, permission-based roles (admin, team members, clients), and an intuitive SAS interface from the start.
Once the initial idea is submitted, Code Guide moves to the AI tool selection page. Replit is chosen as the primary development environment. The platform then brings up a few follow-up questions to flesh out the structure. User roles are configured first: admins get full access, and team members have partial control, while clients stay limited to essential views, of course. Next comes the color scheme, and I'm talking about a sleek gradient shifting from purple to blue, specifically #5351FC to #19FC, with purple for primary actions, blue for highlights, dark blue (#2F3349) as the base background, and light purple (#4F4F4FB) for hover states and secondary sections.
As for chat functionality, that'll get some attention too, where we will request not only standard messaging but also support for file sharing, voice messages, group chats, and even emoji reactions to make communication more fluid and natural. Responsiveness is also confirmed: this platform needs to feel natural across tablet, desktops, and mobile. And after that, the platform presents a full preview of the app structure, and it looks like everything's lined up, from features to layout. And once it's confirmed, Code Guide generates the technical documentation. The final output includes a project requirements document, app flow, text stack, front-end and back-end guidelines, along with an app flowchart and a full implementation plan. Each document is clean, it's organized, and also fully aligned with the project vision. And once downloaded, the entire foundation of what we're building is in place—no code written, just structured direction and AI precision.
Jumping into Replit for the first time can feel a little overwhelming, especially when you're staring at a blank screen and wondering, "Where do I even begin?" But instead of writing any code up front, I start by letting the AI get familiar with the project first. Cody, the voice-assisted guide from earlier, is suggesting that we should copy the project requirements document directly into Replit, and that way the agent understands the full scope before generating anything. So here you can see I'm going to paste in the PRD and tell the AI to first interpret what the project is about before doing any coding.
Once it processes the markdown file, it responds with a structured app plan that outlines the technical approach based on the documentation we just provided. And at this point, I'm prompted to configure a few project options. Now let's go ahead and select PostgreSQL as the database and enable advanced invoicing features, including tax calculations and multicurrency billing, just as Cody recommended earlier. And from there, the agent starts laying the groundwork for the build. You can see here it sets the dashboard as the default homepage, giving us and our users a clean starting point. Now it is asking for the Stripe API keys to handle payments, so I'm going to open up Stripe, I'll navigate over to the developers tab, and then I'll copy both the public and secret keys into the appropriate fields.
Once Stripe is connected, we can now run the project for the first time. But, well, the login system isn't working. The screen loads fine, but no matter how many times I create a new admin account, the app won't move past the login page. So let's flag the issue by letting the AI know that the login screen is stuck and that I'm trying to access the dashboard after registering an admin account. The agent replies by checking the back end and asks if a database should be added, which, well, does make sense. So I'll click "Add Database," and it links everything properly. Now the AI is requesting for a Stripe product ID to complete the integration, so I'm going to head over to the product catalog in Stripe, I'll create a new product, and then I'll paste the key (starting with "prod_") into the corresponding field in Replit.
I try logging in again, hoping the loop is fixed, but it's still stuck. So I'm going to follow up by letting the AI know the login loop is still happening and it needs to be fixed so that our users can finally access the homepage. And the AI makes some deeper changes, and this time I managed to log in successfully. But here you can see a new issue shows up: it happens sometimes. It's okay. After reaching the dashboard, none of the UI components are actually clickable; the entire page is frozen. So I'm going to report this as well, explaining that while the login now works, the dashboard itself is unresponsive. And the agent works through the error on its own, and this time the fix lands. Now everything on the dashboard becomes fully interactive; our buttons respond, the UI components load as expected, and the entire view just feels stable and usable.
Next, let's shift our attention to improving the navbar. It's functional, but, you know, I kind of want something a bit more dynamic—specifically, a way for users to toggle the sidebar open and closed. So I'm going to instruct the AI to implement a hamburger button that allows our users to show or hide the sidebar and then focus on the main content. You can see here the hamburger icon now appears in the top corner; clicking it smoothly reveals or hides the sidebar, and the main content adjusts accordingly. And with all of our login issues resolved and the basic setup already in place, it's time now to focus on refining the visual side of the app. The dashboard and the sidebar are already functional, but, you know, visually, at least to me, everything still feels a little rough around the edges—default fonts, tight spacing, and components that don't quite feel polished is the word I want to use. So at this point, we have to start improving the overall design, the UI design.
Here you can see that I'm asking the AI to make the dashboard layout a bit more modern, and that means larger font sizes, better spacing between components, and a well, basically, a cleaner aesthetic. And the updated layout now comes back with improved structure and a bit more breathing room. But after testing it, we can observe here that some of the text is inconsistent, and the input fields aren't standing out enough. So to fix that, let's just ask the AI to enhance the text contrast and redesign the input fields, adding rounded corners and a lighter background so that they're easier to identify. Next, let's update the buttons, because, well, they still look like just plain old placeholders. Let's ask the AI to restyle all the buttons, also with rounded corners, with modern fonts, some hover effects, and then use our brand colors (purple and blue) for the primary ones. And the changes apply quickly. The buttons now look a lot cleaner, they're reactive, and of course, consistent with the rest of the design, and everything starts to feel a lot more cohesive.
And to bring the interface to life, I'm going to ask the AI to add subtle animations using Framer Motion—fade-ins, slide-ins, and smooth transitions for elements like the dashboard and sidebar that you can see here. And this adds a bit more flow to the app; instead of snapping into place, everything now just glides in naturally. And with our visual directions in place, let's go ahead and revisit the sidebar to improve navigation. So we're going to ask the AI to highlight the active page and then add icons next to each link using Lucid React. So let's make sure the sidebar remains fully responsive, and the improvements land right away. But on mobile, a few layout issues appear. So what we're going to do here again is simply to ask the AI to optimize responsiveness, and that means adding proper padding and stacking elements vertically for smaller screens. And once applied, the mobile view feels far more usable; our components in the app scale correctly, the spacing looks balanced, and nothing feels too cramped.
Now these revisions wrap up the first phase of UI polishing the app. It no longer looks like a starter template; it's actually starting to feel like a real product with cleaner layouts, brand-aligned colors, and smoother interactions. We're now ready to move deeper into the functionality. And there you go, our UI is already looking good, and it's time now to move on to implementing one of the app's core features: that's real-time chat. This will allow team members and clients to communicate directly inside the platform, so it needs to feel fast and reliable from the start. So I'm going to begin by asking the AI to set up a live messaging system using Socket.IO, with messages stored in the database and then loaded automatically when users open up the chat.
And once the basic text chat is up and running, we're going to expand that functionality to support image uploads, voice messages, and document sharing, with clear previews and icons for each type of file. The AI handles both front-end display and secure file storage. The file sharing works well too, but as you can see here, the chat layout doesn't translate too cleanly to mobile. So let's go ahead and have the AI optimize the design by stacking messages vertically, reducing the padding, and keeping the input bar fixed at the bottom. Now that quick change makes the mobile experience feel a lot more natural, especially for our thumbs and eyes. Now let's enhance message interactions by adding emoji reactions, along with ready-to-replies and timestamps. Our users can now long-press on mobile or hover on desktop to bring up these message options. And with these features in place, our chat feels a lot more dynamic and complete; it's seamless across devices, and it's designed for real-world use.
Now it is one thing to have a clean-looking UI, but until the buttons actually do something, it's all just surface-level stuff. So this part is about digging into what works, what doesn't, tossing that out, and making sure every interaction feels solid. Now one of the first features on the list is the chat system, and everything looks fine, surface, but once messages start getting sent, it becomes clear there's a problem: they don't show up in the chat window; our file uploads aren't working; and the emoji button doesn't respond at all. So to clean this up again, all we do is ask the AI to fix those key issues, making sure messages are rendered properly, file uploads are actually functional, and our emojis can be sent without any glitches. After the adjustments by the AI, file sharing and emoji reactions work smoothly, but yeah, the messages themselves are still invisible—yikes. So again, we're just going to follow up by clarifying with the AI that each message should appear in a visible chat bubble, and outgoing messages need to display in purple, and incoming ones should be a lighter gray or white for contrast. And once those visuals are applied, everything falls into place; the chat feels complete, responsive, and visually clear.
Now we'll move on to the Projects page. This section still needs essential functionality: like, our admin should be able to edit, view, and delete any project listed, and at this stage, none of those actions are wired up—not yet. So again, we'll just simply tell the AI to fix the project controls and lock them to admin accounts only. And after that's done, it's time to verify how each user role interacts with this section. Logging in as an admin gives full control; editing, viewing, and deleting all work as expected. Our team members can view and edit projects, but deletion remains restricted. And then on the client side, users are limited to viewing project details only—exactly how access should be handled. Now with all these pieces working together, both chat and project workflows now feel reliable, role-aware, and production-ready.
At this stage, let's begin scanning through the remaining features to finalize our build, starting with the Account and Billing section. Under a client user account, we can notice here that several buttons (like "View," "Pay Now," and those under "Payment Methods") those aren't fully functional yet. So let's go ahead and guide the AI, as we've done before, to make these fully interactive. So now the "Pay Now" button should redirect users to the billing page and then also trigger Stripe integration for payments, while the credit card and payment method buttons need to allow our users to update and then store their payment information properly. And after those changes are applied, the "Pay Now" button works and routes correctly, but the "View" button causes an unexpected logout for some reason, and the "Add/Update Payment Method" options still aren't responding. Again, as we've done before, let's tell the AI to fix these remaining issues all by itself. And once corrected, clicking "View" now triggers a proper pop-up instead of redirecting to the login screen, and both payment method buttons become functional, allowing our users to save payment info directly to their account.
Now from there, we can now shift our focus to user access restrictions. So let's log in as a client, and we can notice here that the client user still has access to the CRM and Client pages for some reason, which should be restricted. We can flag this for the AI and then again, as before, ask for proper access control: these pages should only be visible to admins and team members. Now with all of that sorted out, I'll continue testing other components too. The chat feature: let's simulate sending, let's say, a message from an admin to a team member, and everything seems fine on the admin side, but when we log in as a team member, the message doesn't appear. So I'm going to ask the AI to resolve this sync issue so that messages sent by the admin also properly display in the team members' chat interface. Once the fix is live, messages flow correctly between admin and team member accounts.
Now finally, I'll move over to the Tasks page. I want the interface to clearly show team members which tasks they've been assigned. So I'm going to instruct the AI to update the layout so that each team member sees only their own list of tasks—nothing global or shared unnecessarily. So let's log in with several different user accounts to verify that, yes, the changes and everything else works as expected. And as you can see, each user only sees their assigned tasks, and there's no overlap occurring between accounts. After one more final sweep through the entire app, it looks like all of our features—from chat to billing, task management to user access—those are all functioning smoothly. The platform is fully responsive, permissions are in place, and everything feels production-ready. Good job! And that's a wrap. Thank you again for watching, and I'll see you at the next…