Transcription
At the end of this video, this is what we are going to create, a platform that allows you to manage the entire clinic and doctors, your data, your systems, without depending on other complex clinic management EHR systems. I am going to click on login. For this case, I already have demo patients. I am going to click here on patient. I enter as my patient. This is my portal. I see appointments, history, and payments. But I am going to go here to the initial screen, not to see user information, but to be able to make a new appointment schedule. I am going to choose dermatology. Yes, I see the doctors associated with that service. And here we have a selector for the dates and availabilities of that doctor. In this case, for Thursday at 11. Done. I can also put this in Spanish. Here we will say that I am testing and I will confirm the appointment. In this case, look, it tells me the doctor's information that it has already been confirmed and my patient name. I am Maria Garcia. I am going to go to my appointments. This one here, I know it by the dates. Done. Here is the reason testing. Just to keep it in mind. Ah, as an administrator, I should be able to configure my clinic, Clinic Medic OS. Yes, I will put test here and we will leave the rest the same for now. We will put the name as admin. Done. And here. Aha. These are the specialties I have initially. I can edit them later. Go to the dashboard. What should happen here? First, you will go to configuration. You will customize all of this and remember that I put test just so we can see that this data is updated. Okay, we save them and we can also remove or add specialties, simply by going here, putting the name, the duration, the price, and creating. In this case, I click cancel. We will see all of this connected later. After that, you can go to the doctors section to register them. Look that here it created the admin, which was the first doctor, but I already had some created. I am going to delete it. Yes. And a doctor whose photo I did not upload, looks something like this. So, I will edit, I can upload, change their image if I need to. Yes, I will not do it for now. And I can change their information data. I can change the specialty from the ones I have available. Let's say it's a cardiologist. Uh, well, let's leave it in dentistry because the rest of the video is also dedicated to dentistry. If I click here, I can update the schedules. Done? And finally, I have an invitation link. So, I can edit a doctor. For now, this doctor is the one who has an assigned appointment. I should log in as him, correct? Here I have not yet invited this doctor. I will do it in an incognito window. I will assume as if I were that doctor and I will put the email of this uh doctor. It's Doctor Roberto. Yes. Roberto@mail.com. Done. So let's log in. and we enter as this doctor. As of today, he does not have a uh schedule, meaning he does not have an appointment. Don't worry. I will quickly put a calendar so we can see what the next ones are, because today, precisely today, he has none. We will also see the consultations and we will also see the patients as I attend them. So I will uh, well, save his information. it has already been linked. Yes. And I don't want to confuse you, but first let's see everything we have uh here as an administrator to return to the doctor. We also have the patients section. We will be able to create a new patient, yes? If they were not created from the profile, from the homepage, okay? We can also have the management of payments, reports, and the dashboard view, which is what shows me appointments. completed today, completed in the future, no-shows, and so on. Okay, since I just started with the project, that's why you see these values at zero here, but if there are already patients, let's log out, let's log in as the doctor. Okay, we are here. I will go to the day I have the appointment. In this case, I have this button to be able to start it. It's not today, but it works for testing. Let's click. And now I can start the appointment, I have the patient's information and I can add any notes. Perfect, the patient was prescribed medication and the appointment has been concluded. We will have to see each other in 14 days. Okay, I complete the consultation and that's it, consultation completed. For now, we do not have any consultations in progress, as this will depend on when we start the appointments. patients. We have these two patients. This is my flow as a doctor. Okay? So we will see the appointments. In this case, it has already been marked as completed. On the other hand, let's go back to the administrator. Mm. As an administrator, we also have the schedules. Here it is completed, okay? We have the information. Done. And the payment issue, as I say, this uh will be done manually initially, okay? From Maria Garcia. She paid for the doctor's consultation, she paid the amount, let's say she paid 800 because I don't remember the exact value. Done. We register it. done. Okay, this would be for an administration or secretary role. This is what we are going to create today. Stay until the end of the video to see how to have this platform working and launched on the internet. Let's begin. Let's begin. The first thing we do is go to lobable.dev which will give you the first version and structure of your application's code. Here you will paste a message. I already have that message ready for you. You will go to the description in the resources or in the comment below the video and you will enter this link. Once you click on this button to copy, you return to Lobable and paste it here. Done. With this message, you will click enter and with that, in the free version of Lobable, or you must have created your account, you will be able to create the first version of the application, okay? This takes about 5 minutes. What it does is from that first message, it generates a version of the application, which is what you see here. I only had to paste that first message and then confirm that I wanted the interface to be created. So, we have an infrastructure and an interface, and this generates the following for me. Let's review it together. it has created several uh pages, here I can see them. The booking page, authentication, hop, doctor, patients. First, you see this very clean page that looks like a medical application. Here an image that doesn't work, but that's irrelevant, it can be improved later. It highlights some benefits, testimonials, and a button to schedule. If I click on schedule, I will go through a wizard, a multi-step form where I choose a service. I will click here on dentistry, I have an associated doctor. Then I can choose the dates, I choose the time, and I will be able to fill in the information. Test user. Here a phone number, an email. and a reason for consultation. Okay, we click continue, we have the information, and we confirm the appointment. For now, this is not connected, it doesn't work, it's test data. We have the confirmation page and we return to the beginning. But that's for a patient who wants to schedule, correct? To continue, I need you to create an account on GitHub. GitHub will allow you to export the project to advance from here. It's completely free. So, you will create an account if it's your first time, and once you create the account, you go back to Lobable and click this icon, you will connect with GitHub. Done, click connect. Perfect, it's here now and it generates this link. To see if this works, we will paste it in the browser and it should take you to this section. Correct? Up to this point, it means everything is working well. Now, to be able to work with our project, edit it as we want, we need to use an agent environment where we ask things and it can help us. A code developer, a code development software with agents is antigravity. I have used it in several videos. We also have other options. We can use cursor, yes? And we can use cloud code, correct? Of these three options, I tell you that the work will be very similar. What matters more is the way we work than the platform. and I will go with Cloud Code. There are many ways to work with this platform. So, you can choose any, yes? By downloading this and using the agents. Also cursor, using the uh agents. We will opt in this video to work with Cloud Code, what do you think? What you are going to do is download Cloud, but you will do it from the application. Yes, here on the desktop. Click on desktop if you haven't already and you will download it for your operating system. In my case, I am on Mac, and once you download it, you have a screen like this. You have the cloud or the AI chat, as we all know it. This is from Antropic, it's different from OpenAI, but it's the same thing, you have the AI chat where you can ask questions and it answers. You have Cork, which is designed for people who have to organize their work and are not developers. And finally, we have Cod, here it says code, the translation, and this is what will be useful for us. It's a very friendly environment, and you will soon see why I recommend it for us to use. The first thing we are going to do is click here. I will paste this URL. I need you to clone this repository locally in my tutorials folder. We will start with that project, okay? I paste something like this, okay? And my tutorials folder, I will look for it. I paste the access path. So, here you can choose, I don't know if it's visible well, I think it's better visible there. You can choose the AI model or you choose the best one. And be careful, to work with Cloud Code, I recommend that you have a subscription. This video is not about how to work with Cloud Code, this video is about how to create these applications to work for businesses. That's why I won't dwell too much on subscriptions and the like, but you will see the workflow I maintain. If you want to work with this completely for free, I recommend Antigravity. I have many videos where I use Antigravity or Cursor for it. First, it asks me if I want to trust the workspace because Cloud Code will have access to your computer. So, we add trust, and the agent or agents of Cloud will start working. This will surely take a few seconds, a few minutes, I don't know. And we'll see you on return. It's normal that when you are working, you see messages like these. Yes, here it is saying, "Do you want to clone the project?" I will say yes. Done, it tells me it has cloned the project and I paste it here. Now, before continuing, I will do two things. I have a document which is this roadmap. Basically, I will also share it with you in the files. I will copy it. Yes. And it's a step-by-step of what we need to implement for the application to finally work. We go back here. I can paste it here directly. I will tell the system. I need us to follow this roadmap to take the application to production so we can launch it and it works, okay? In the same document, I detail that there are advanced functions that are out of scope, meaning they will not be achieved now, but in a later stage. So, keep that in mind. Okay? We paste this here. That's enough. We will send it. Done. Look, here I have this marked. It really shouldn't be marked, but don't worry. Here the agent, if it reviews it, will realize that no, it has to update it. We will click on always allow. Aha. There are no environment variables, don't worry. This is simply that we need some passwords and so on, some keys and so on for this to connect to a database and so on. So, I will tell it to stop. The roadmap is not completed, it's more like we only have the initial part. First, I just want you to save it in the files and then we will continue step by step to take the project to the end, what do you think? I will also give you a PRD. We already have the two files that I would like the agent to consider to have more context of our project. When this is saved, we will open it on our computer. You will already see how it works. My application is Medit. OS. And look, here is the PRD. Yes, you see it. It's already there. And the roadmap is also there. Okay. They are documents. Aha. And that's one way to see them. But well, let's continue. So that it doesn't ask me for permissions all the time, I will click on skip permission which accepts all permissions. Enable this bypass mode. Done. So, what else will we do? We will continue. I want to see this application. Here we have a button that says preview. Aha. Run the development server. Done. I will click this button and let's see what happens. The agent or agents, because CloudCode doesn't have just one agent, but several agents, it's multi-agent, will try to see how my project is developed and what it needs for the user to visualize it. Correct? And it does this automatically. Again, we allow it so it won't ask me anymore, and we allow it. Be careful, I am doing this. Yes, you don't have to do the bypass mode because look what it says here. It can modify, which is what we want, or delete files too, but ah, you have to keep in mind that you don't want it to delete files from your computer and so on. Here it asks me which server I want to start. I will tell it this one, the dev. Mm. Yes, here it gives us the necessary commands, and don't worry, the agent will take care of all the configuration. Perfect. Here we see a first glimpse. The agent even ensures that what we have, what already works, works. And it's finishing. Meanwhile, we have a preview that if you click this link, it will take you to see it in your browser, completely. You already know how it works. You can navigate through it, but we will continue completing our roadmap. The next thing we will do, where do you want us to start working? You will tell me, we need to connect Supabase. And for that, you will go to Supabase, which is a platform that has databases, authentication, functions, and so on, storage, and so on for your application to work. You can start completely free with it. You will create an account if it's your first time here. When you create an account on Supabase, the first thing it will ask you is to enter an organization. Yes, it's a very short form, and it asks for the organization name and also which tier, which price you want. Okay, you will choose the free one. Once you do that, you will enter this project panel within the organization. You will click on new project, you will give it a name. In our case, the application is called Medit. OS. Yes, I will put it like that. And here we add a secure password, don't worry, you can also change it later. And you will click on create new project. Great. Now, for there to be a connection between this database, which is empty for now, and your application, you will click here on the profile account preferences access token and you will generate a new token. Give it a name and set an expiration of about 30 days so you can do this development and then that token expires. Here I have some tokens already created. So, you create it, copy it, and you will tell the agent, let's start with Supabase. We need to do the initial setup as the ROPMAP document says, and for that we can use tools like the Supabase CLI or also the CLI, okay? We paste that information, and if it's your first time doing it here, you tell it the Supabase token for mp. Yes, the token you just copied, okay? In my case, it's this one, yes, because I already had it from before. And it starts with an SVP Supabase. Done. Be careful, this token is for this project for Supabase. Also, something I like to do is go back here. I go back and I will tell it the ID of my project, which you can find in several places, for example, here it is this one. Uh, copy. Why doesn't it let me copy it? Well, I will copy it from here. Done. Okay, I pass it the information I need for the setup. So, the first thing it does is the Supabase configuration, it obtains the project URL and the variables and other things that I don't want to explain to you now, I don't want to confuse you, but basically all the configuration that we used to do manually, is now done automatically through something known as MCP. Done, the agent has finished, it tells us that it has created what is necessary. The next step is to work with the database schema. You will understand what that is soon. I will show you. Even the app continues to work correctly. We continue with the changes. Yes, please. Okay, so it will continue configuring the tables of our application. In a moment, you will understand what that is. Perfect, it has finished. It tells us that we already have tables. Let's see if that's true. I go to Supabase, in this case I go to this section called table editor, and here I have these tables. This is where your project's information is stored. We have services. Yes, we have profiles, patients, invoices, doctors, clinics, appointments, and this one here is called appointments events. Okay, perfect. In authentication, I like to skip here for a moment to go to where it says registration and providers and disable this option, the one to confirm email. A user does not need to confirm or reconfirm their email to log in. Just that. We save the changes. Okay, done. And we go back here because we saw that this worked. So, we continue with phase two, which is authentication. We will say yes, but before, if we click on login, look that here we have this. These are test data, okay? I need you to continue with authentication. It would be great to have a demo user for administrator, doctor, and patient, but with real data in the application, or if not, I will create it, to show the entire flow and know that everything is working correctly. Yes, literally it's the creation of authentication. I am giving it some uh rules which I want to make sure are working correctly, but simple. Let's wait for the agent to finish. As you can see, it's very simple to interact with this agent. Here it is creating the users. Honestly, the best way to create users is for you to do it, if I'm honest, but let's see if the system is doing it. I update in users and look, there are already three users. it has generated a unique code for these users, administrators, we have uh Maria, we have Sofia, and we have the admin. Okay, I suppose each one is for a profile. Let's go to Table Editor and let's go to profiles. And here it is. This one has an administrator role. Aha. and surely it's the user admin@mail, doctor, and patient. Done. Okay. For now, this works, although it can be expanded much more, like putting a username and so on. ah, doctors. Done. Here we see doctors, patients, and that's important data. Doctors and patients and profiles are two different things. So, let's say there should only be doctors related to authentication and profiles. First, let's wait for the agent to finish, and look at the page it already gives us, which looks much better. Uh, here it gives us quick access to the demo, okay? And here it's doing something interesting, it's route protection, meaning a doctor doesn't really have to go to the hop. Aha. Look, the doctor can access the hop, that shouldn't happen. it should be restricted to the doctor. So, as you can see, the system is already considering real scenarios of how these types of applications are managed. Great. Okay, we have finished with the users. Perfect. And before continuing, here it indicates that it will work with RLS. These are uh protections, security rules. Done? So, we can continue with that or we can test the flow. Let's log out as administrator. I log in directly, it takes me to complete my clinic's data. Perfect. For now, let's leave this data here. It's taking it as if the clinic were from Mexico. And let's put doctor. Yes, although I would like. Well, this is a description. doctor's name. I don't know. Let's put something like that here. We will change this later, no problem. So, I just click next and that's it. All of this can be customized, obviously we have that, and look, here we have the information mm and the services. What would I do? First, I will ask the agent, review the onboarding. We need it to be connected with the configuration data as well. Also, we have services that we cannot edit in configuration. Okay, I will send something like that. Yes, honestly, this message is still a bit vague, but the agent already has enough context of my application, so I am sure that with this message it will be able to understand the two things I am asking for. Review the onboarding and continue uh adjusting the configuration so that I can uh optimize, edit, yes, improve it. Now I also need you to allow me to create and delete a service and its price. Okay, let's add that. Done. Meanwhile, what it did was, I will log out. What it did was first the onboarding, which I will no longer see because I already filled it out, connect it so that it connects to our database, is real, and the configuration is seen here. And second, for example, here I delete save. So, if I refresh, look, the data is already visible. And the second thing is that here it added this option where I can edit services, but I would also like to create a service. Okay, we will do that now. Done? So, now we have an option to add a new service. Precisely here, cardiology. 60 minutes and the price is 900. Create. Okay, as you can see, the configuration is created. It's done. What would be next? Well, I would like to create uh manage doctors as the next step. So, I will ask the agent the following. Look, based on our roadmap, I understand that we have to work with RLS, but the application still doesn't have the doctor management section, meaning, you can add a new doctor, but the photos are not being saved in Supabase storage. That would be something to fix. And also, I cannot edit or delete a user, all the CRUD configuration is missing. Okay, I send a message like that. Yes, CRUD. This is the word create in English, uh, read, update, and delete. So, I will send the message because there are two paths. Done, here it already creates a series of steps, which is what agents do. They create a plan, then they perform actions task by task. So, we will have photo storage, we will be able to upload reusable images, we will create the CRUD so that they can work with schedules and so on. Yes, we don't even have a page yet where if you click here you can see the doctor's details. We will get to that point and connect everything to our database. In this case, the system, well, the agent decided to put it here. I could have also asked it to put it on another page, honestly, but for now, we will leave it like this. If I want to see a details page. So, let's wait for it to finish and let's test it. Done. So, let's see it. I think I can edit, uh, sorry, delete. Let's delete this doctor here. A popup appears, which is from the browser. Yes, whichever you have. Done, it was deleted. Perfect. And then we will click here on doctor Carlos. Dr. Carlos Herrera. Doctor Carlos Gonzalez. Yes. You choose the specialty here, the description, and if you click here on schedule, then I can also edit that. Let's say he doesn't work on Monday. We save the changes, and here it already shows Tuesday, Wednesday, Thursday, Friday, and Carlos G. Gonzalez, right? So, as you can see, editing is working, deletion too, creation. I will assume so. For now, you can test this, and the agent will help you polish it. And we continue with the next component. Okay, it seems we have a solid doctor screen. Now we need CRUD for patients. Let's remember that later we absolutely have to work on making doctors and patients real, meaning they are linked to authentication, profiles, and doctors and patients in the table, in the Supabase tables. Done. Well, here it's Supabase. It's like this, only that the transition detects it in different ways. No, no problem, the agent will understand it. Great. Correct. Let's see. Look, we have the new patient. We already had that, actually. We can edit a patient here, and over here we can also delete them. Let's delete the first one, Pedro Gonzalez. Yes, just to see if it works. Done. And okay, let's change the last name here to An Lara. Done, we have it. Correct? We have the doctor and patient information to edit. The appointment issue, this will be done by the, well, the administrator can also do it here. Ah, that's great. Let's see, Maria Garcia, Doctor Sofia, the Ya service. Here I'm missing something. I don't see the cardiology service I created. Okay, I will take a screenshot. We paste it here. Configuration cardiology. Okay, we need to review this appointment page, as I don't see all the services. It seems the page still has dummy data. We need this data to come from the database. Yes. Great. Let's review this. Great. Done. Now we have this connected. Okay, if I click on new appointment, the service, look, here the services we have appear. Also the doctors we currently have. Let's choose Carlos, Ana Lara, cardiology. For the date, let's choose Monday the first or Monday the 30th. Let's see, we are already. Yes, Monday the first. Here the date. This is interesting because it should be based on the slots. Well, for now, let's say we will set it for 9 in the morning, so we also give the administrator the freedom to set it at the required time. Done. Something like this. and consultation. Done. Check-up consultation. We create the appointment. When is this for? Done. Here comes an issue that remained here. Done. We log in and see the information. We can mark it as confirmed, as canceled, as no-show. Confirm, cancel. Well, confirm can actually be automatic, yes? Or when the payment is made. So, for now, we will not handle the payment issue. No-show is when they don't show up, but those options remain. Okay, we have configured these three pages. Regarding payments. Let's tell the agent about the payments screen to continue. We also need it to have real data. For now, we will handle payments manually. Yes, in cash. Later, it can be integrated with Stripe for automatic payments. Done? Okay, let's say something like this. Stripe is a payment platform that can be configured in systems like these for businesses, software as a service. So, for now, we will do it manually. Let's say payments are made at the time of making the appointment, the consultation. Done. Great. Here this section is already connected. Payments have been migrated to the database. Be careful, to notice this, you go to the section, here they are, paid, paid, pending invoices. Done. And let's also go to the part, we are missing reports and dashboard. We will ask the agent to continue with the dashboard and reports part. After that, we will continue with our roadmap. Okay, we have completed the functionalities on all necessary pages, and the next step would be to migrate the doctor and patient panels, then the booking landing page. Yes. So, let's tell it to continue. Remember, we are doing this migration because initially we had static test data here, but now we have connected a database. We continue with the migration. Okay, done. The agent here, well, it's finishing. It asks me if we continue with Vercel, which is launching to production, but be careful, it took me to this page because it was verifying that everything works. Correct? And there is something else I would like to ask for. There are two things because it already checked that the doctors here load the real doctors and also here we have real services. If we click on schedule appointments, look that cardiology and so on are already visible. So, before this, I will ask it two questions for functionalities. I would like that when scheduling an appointment, if I am not logged in, one of the steps be uh that I can create my account in the form, correct? If I am already logged in, then that step can be skipped because we already have the user's information. That would be the first thing. Okay? And the second functionality. Well, first let's finish with this one and move on to the second. I will send. Ah, exactly. Like that. Okay, great. Look, it has finished now. So, look, it even tells me the name of the user I have. In this case, I am Maria Garcia. I choose, well, cardiology, I haven't chosen doctors. Let's put dermatology. Yes, here it is. Done. And it talks about my user data. So, the reason for March 31st at 11:30, let's say check-up. We confirm the appointment. Done. Patient Maria Garcia, we have the information. Go to my appointments and here it should be dermatology, done. Correct? It's working. So, here I will see information when I have consultations, because an appointment is not the same as a consultation. The appointment is made when the doctor starts the session with the patient, and over here, payments tells me that I still have pending payments. So, let's do the next functionality, and with that we will integrate everything for you. The next functionality is that as an administrator, I would like that when I enter the application, a doctor or a patient, I can send them a link so they can complete their profile, because I am creating their profiles, but they do not have access to authentication until that moment. So, to close the loop, we need to add a functionality so that both authentication and user tables are all connected in the application. Okay? These are the two functions I see. There are more things. I will send this. There are more things we can add. For example, I would love that this here is not just seen by day, but we have a calendar view. I would love to have payments, as I say, automated and that we can pay them online. I would also love that directly from here I can say, "Okay, this service is associated with X and YZ doctor." All those things you can add to the application in natural text, as we are seeing here. But we will add the functionalities that I think add the most value, and then we will proceed to launch because you can launch with this version, don't focus on having everything ready and then you will improve it. And I tell you this because I always see it with clients, they take a long time to launch a platform to reach customers. Yes, great. So, look, I'm here again. The agent took me to the administration page. On this page, we have this icon here, which is the copy invitation link if a user has not been invited before. Look, Doctor Sofia doesn't have it because she already has her account. We simply click here or directly go to this doctor's details page and copy this invitation link. And with that, we go to any browser, paste it, and then we proceed. Okay, you have been invited as a doctor, we would ideally complete the same email and add a password. Okay? So, we do the invitation flow. For now, I will stay here. What will be the next thing we do? Perfect, we have a solid base, right? That more application functions can be added. Now I would like to launch it to Vercel through GitHub. Our project is already connected to GitHub, so we need to set it up to launch it to production on Vercel. Done, the agent closed the preview here, it's not a problem. What it's doing is uploading the changes to our project, our application. Those changes will be visualized. Let's see, we click on send. They will be visualized here, okay? The changes have just been launched now. So, we have the code. Let's wait for it to finish installing what's necessary, and in the meantime, you will go to vercel.com. Vercel is basically an infrastructure to launch applications for free. You can start from vercel.com, okay? And you will create an account, you will log in to Vercel. I am already here. So, to create a project, we will click on Add new project, okay? And here all the projects associated with your GitHub account will appear. If it's your first time, you will link your GitHub account. It's very easy. So, I will wait a moment to click on import. First, I want everything to finish. Okay, it tells me yes. Done. I will copy these variables. They are relevant, they are important. Medit. OS is our application. The variables. Well, you will leave everything the same. You will simply add the variables here. We paste. Well, it's not the best way to paste them. Let's do it one by one in a better way, and with that, we will click on deploy. Great. The first validation that everything works is that you can see this here. Click, done. And here we have the application. Okay, so we can log in. We can say that this should not be seen in production if it's a value I missed, or rather, we shouldn't see it here, but well, let's click as administrator. Done. And here, look, the real data tells me, "Okay, you will complete your administration profile. This is good." So, as you can see, the application is already working. Now, if you need help with the development of your application, yes. In the infrastructure part, thinking about it, planning it, and even developing it. Well, below you have my contacts, and maybe you and I, if your project is serious, can work together. See you in a next video. Greetings. M.