Live demo: Front end app creation with Claude 3.5 and Cursor

Episode Description:

In this enlightening episode, Simon Maple sits down with Felipe Aguirre, a distinguished data scientist and programmer with a PhD in Artificial Intelligence. Felipe has extensive experience in AI and software development, having contributed significantly to various innovative projects. He is well-regarded for his hands-on approach and deep understanding of advanced AI tools and methodologies. In this episode, Felipe shares his insights and experiences working with Claude 3.5, focusing on its project functionality. Felipe discusses his innovative approach to creating applications, specifically his project "Cards Against AI," and how Claude's capabilities can be leveraged to write specifications and generate code. This episode is best viewed on YouTube for a detailed screen-share demonstration.

Chapters:

1. [00:00:22] - Introduction
   • Simon Maple introduces Felipe Aguirre and recaps the previous podcast episode.
2. [00:01:41] - Overview of Claude 3.5
   • Felipe provides an introduction to Claude 3.5 and its project functionality.
3. [00:02:36] - Project Selection and Initial Instructions
   • Felipe discusses the selection of "Cards Against AI" as a test project and the initial setup.
4. [00:03:49] - Creating Specifications with Claude 3.5
   • An in-depth look at generating specifications before code, including role definitions and the use of OpenAPI.
5. [00:08:08] - Iterative Improvements and Learning from Failures
   • Felipe shares his experience with failed backend implementations and the importance of iterative improvements.
6. [00:12:42] - Frontend Development with Claude 3.5
   • Felipe demonstrates the generation of React mockups and the iterative design process for the frontend.
7. [00:24:08] - Integration and Deployment
   • Step-by-step instructions on integrating the frontend with the backend using OpenAPI specifications and the Git workflow.
8. [00:28:20] - Tools and Tips for Better Workflow
   • Felipe shares valuable tips on using Git for noise reduction, crafting effective prompts, and maintaining a clean project structure.
9. [00:35:19] - Moving Forward with AI Tools
   • Felipe discusses future tools he plans to explore and compares Claude 3.5 with other AI tools like Cursor.
10. [00:41:32] - Conclusion
    • Felipe and Simon wrap up the episode, reflecting on the insights shared and the potential of AI-driven software development.

Full Script

[00:00:22] Simon Maple: Hello everyone and welcome to the podcast again on this episode, this is a very quick follow up after our previous chat, Felipe, where we talked a lot about how Felipe created applications and services, etc, using Claude 3.5 and in particular, the projects functionality that effectively allowed you to create prompts, to create, specifications and so forth.

[00:00:47] Simon Maple: For those of you who haven't watched, haven't listened to that first episode. First of all, feel free to do that or you're more than welcome to carry on watching, but Felipe, you're a data scientist, you're a programmer, you're a PhD, you're well into kind of like your education, learning, teachings, yeah, really interested in AI generation of code and the future that AI has to play in software development. And today you're going to be showing us, showing us a screen share of, of your interactions with Claude 3.5. Just for the listeners, this is an episode which is only on YouTube, obviously because we're going to be doing a ton of screen sharing.

[00:01:23] Simon Maple: So you won't find us, on the podcast, but the first episode of the chat is on both of those. I'm going to add the, the screen share to the page now, Felipe. Talk us through, first of all, when you, after you decided to use Claude 3.5, after you decided to use the, projects, this is what you were faced with.

[00:01:41] Simon Maple: Talk us through, the various aspects of the UI on the page and how you went about creating in this case, Cards Against AI, which is an application that you wrote effectively as a test drive for, Claude projects.

[00:01:55] Felipe Aguirre: Yeah, just for those who didn't listen to the first podcast, like a quick introduction on the purpose of these, this is a control experiment that I did,

[00:02:02] Felipe Aguirre: and I really wanted to test the raw power of Claude 3. 5. I could have done this with, a VS Code extension, Cursor, or any of those different tools, but I really wanted to test the raw power of Claude.I really felt that the future is product spec centric, versus code centric. And I was really forcing myself to, to apply that. And I decided to do cards against AI because it's something that I started from scratch that I didn't have much clarity or what I wanted. And I wanted also to see how Claude can help me write the specifications of this project.

[00:02:36] Simon Maple: And that's the key piece, because a lot of people go to a GPT and think straight away about the code.

[00:02:42] Simon Maple: Give me some code that does this. Whereas you went with the route of give me a specification, from these prompts and from our discussion with which I can then go ahead and create an application. So it was a slightly longer term path really because once you have the specification it's there, it's more concrete and that's your source of truth.

[00:03:01] Simon Maple: When you ask for code from a GPT, what's your source of truth? You can't just keep, you can't keep your prompts unless it's one prompt. And then that one prompt is presumably more like a specification anyway. So talk us through this page.

[00:03:16] Felipe Aguirre: So I have a project that is called Cars Against AI.

[00:03:19] Felipe Aguirre: There are some instructions that you can add. So in this case, I just put this instruction. You're a CTO of a creative agency, blah, blah, blah, brainstorming ideas about design, be brief, technology agnostic, ask as many clarifying questions as possible before making up your mind.

[00:03:32] Felipe Aguirre: This is very important.

[00:03:33] Simon Maple: Turns it more into a chat kind of conversation.

[00:03:36] Felipe Aguirre: And it really helps with the blank page problem and what we were discussing in the previous podcast about that we can be lazy and expect that one single sentence can produce what we want. This protects us from that because one single sentence is not clear enough.

[00:03:49] Felipe Aguirre: So Claude will ask you questions.This one is also quite nice. Mermaid diagrams, tech stack, instructional details. It's nice when you instruct Claude, how do you want Claude to interact and what do you want Claude to provide to you? And Mermaid diagrams are quite useful, because they can be rendered, on the artifacts.

[00:04:06] Felipe Aguirre: We will see that. Then I just outlined the preferred tech stack and some design principles, but I think that's a personal taste. It doesn't matter that much.

[00:04:13] Simon Maple: And this is like your system prompt?

[00:04:15] Felipe Aguirre: That's, yeah, exactly. These instructions are common to every chat.

[00:04:19] Simon Maple: Every chat in this entire project.

[00:04:20] Felipe Aguirre: So now I have all of the chats that I used to create the app.

[00:04:23] Felipe Aguirre: So as you can imagine, as you can see, like there's a lot of them.

[00:04:26] Felipe Aguirre: I did a lot of different chats on that and you have this interface where you can add content. So I just add content and I can add any text file that I want.

[00:04:35] Simon Maple: So that's not just text files that Claude creates here. Although if you do create a file, you can push it into there, but you could pull in whatever files you want. Okay.

[00:04:45] Felipe Aguirre: But I also can, the artifacts that it creates, I can just ask it to integrate them into the project structure. Just to give you a better view over that, this is what we're talking about. This folder. This folder has all of the specifications that I want.

[00:05:02] Simon Maple: So how did you pull it out of Claude then to, to get the I vs code?

[00:05:05] Felipe Aguirre: let's take a look into that. Yeah. Okay. So let's see, for example, the Open API specifications to answer that question. . So here I say, okay. The definition of role, we were talking about roles in the previous podcast. You're a senior backend developer with extensive experience in API design, blah, blah, blah.

[00:05:20] Felipe Aguirre: Please review backend specifications, frontend specifications, and set up DB. That's all you need to design the API, which is the glue point. And propose OpenAPI specifications. So ask clarifying questions. I need to ask a lot of questions. I answered back all of those questions and then I get this. So this is the power of artifacts that I can actually review here.

[00:05:39] Felipe Aguirre: And if I modify it, then these same file will be modified. And then I just copy paste this into. OpenAPI, and that's it. So

[00:05:48] Simon Maple: A couple of questions there then. So the role, the role is first of all, it's not necessarily a structure within Claude projects, it's literally the opening line that you put in and that sets the context for the conversation.

[00:06:01] Simon Maple: So on every every request it presumably uses, I think it uses everything in that chat as context. So it automatically continues with that role. The specification, did you ask for, is that like a YAML specification, right? Did you ask specifically for a YAML specification or is that just yeah,

[00:06:16] Felipe Aguirre: I asked for OpenAPI specification, which is the standard.

[00:06:20] Felipe Aguirre: Yeah. yeah. A standard that any framework can talk to. Also something we talked about auditors. So look at this, please contrast the specification we set up that SQL script and make sure they are compatible and using the same names. If not, please modify. So these type of things are quite useful.

[00:06:37] Simon Maple: And was it, was this the same?

[00:06:39] Simon Maple: This is a different role though, right? no, this is the same role, but

[00:06:42] Simon Maple: you're turning it into more of an auditor

[00:06:43] Felipe Aguirre: role now. And then he realized he's made some mistakes. He modified some things. I don't know what it modified, I didn't modify some stuff.

[00:06:49] Simon Maple: Curious, you don't know what it modified, so no, I do know, but not right now.

[00:06:53] Simon Maple: Oh, I see. So my question there was going to be, how much you look into, from an assistant point of view versus a more automated path, how much are you looking at every single thing it creates versus putting it, throwing it all together and seeing what happens at the end.

[00:07:12] Felipe Aguirre: In this case, we all use Git as software developers, and I think it's instrumental to use Git, for this.

[00:07:18] Felipe Aguirre: So what I would do is I will just add this file to VS code.once I add it, I will stage the file. I don't have to commit it. I just stage the file. And then I copy paste the modifications on that, and I can see the diff. Ah, nice. And then I, that's how I survey how things are being modified. Gotcha, but yeah, I have to review and audit everything.

[00:07:42] Felipe Aguirre: Except for the frontend part where, I do review it, but just because I'm curious.

[00:07:47] Simon Maple: And sometimes probably, it will probably, it's good to, it's definitely good to do that validation and verification afterwards anyway, but sometimes I'm guessing Claude will probably tell you. The changes it made as well, but yeah, it's not, you can't just rely on its description.

[00:08:01] Simon Maple: It's good to validate. So I think it makes sense what you're doing.

[00:08:04] Felipe Aguirre: Yeah. Yeah. I don't think we're there yet. I think we still have to survey that.

[00:08:08] Simon Maple: Yeah.

[00:08:08] Felipe Aguirre: Let's go into the fail back end path. You asked me that question. Yeah.

[00:08:12] Simon Maple: This is, so this is. This is a, so what makes a failed path, first of all?

[00:08:16] Felipe Aguirre: What makes a failed path?

[00:08:17] Felipe Aguirre: As I said, in the previous podcast, I'm the one who made the mistake. There wasn't the first implementation of the backend. And I realized that I didn't do things in the right order.

[00:08:25] Simon Maple: Yeah.

[00:08:26] Felipe Aguirre: Because I saw that the API is the glue point between the front end and the backend. So I thought I have to start by the API.

[00:08:32] Felipe Aguirre: And it's not true. I had to start by the API, open API definition. That's what I had to start with. The open API definition. Not the implementation. And then once you have the definition, then you start by data model, the services layer, and then you have data model, services layer, you have enough context to actually create the API.

[00:08:54] Felipe Aguirre: So that's what I realized and actually I realized, yes and no, I asked, I just felt that I took a path where I asked straight away, implement the API and it was getting messy. It needed to do a lot of modifications. I do know about backend developer developments, so I knew this is not the right path.

[00:09:17] Felipe Aguirre: So I simply say provide a summary of what we did. Suggest an approach for future implementations,Mermaid diagram, and he gave you this diagram, which I didn't like that much. So I asked him like, please make it simple. And at the end, this is what, this is the conclusion. So with a discussion that I had with the, these roles saying these things are not working out, please summarize what we did wrong, what didn't work.

[00:09:40] Felipe Aguirre: And at the end, this is what it suggested. Start with the data, detail, specification, review, data model, design, service layer implementation, API Schema Definition and API Input Implementation. So my error was going straight to this, without doing these two first. So there's a lot of hallucinations going on of how these

[00:09:59] Simon Maple: Cause it always wants to give an answer, right?

[00:10:01] Simon Maple: Whether it's right or wrong. Yeah.

[00:10:03] Felipe Aguirre: So at the end, that's what I did for the next backend implementation and it worked perfectly. I focused first on the service layer, API Schema Definition and bam, done.

[00:10:13] Simon Maple: So what does it look like then In your kind of like Git flow, when you hit a dead end, what does it look like in terms of the,the Git flow, but also then how do you take your learnings into the next one?

[00:10:23] Felipe Aguirre: That's a good question.

[00:10:24] Felipe Aguirre: So I just did a branch for the back end. Okay. And then I just put a tag that it was a dead end. And then I just continue with my other branch. That's it. Yeah. As simple as that. That looks familiar. And from a Git point of view. yeah. It's not, nothing fancy, very simple.

[00:10:39] Felipe Aguirre: Just a branch that didn't go further. That's it. And what I did with that, what I did was learn basically, like that's all. It was a learning path. And now I know a better way of doing it. I just threw away all of the code. All of the code that I did with that was thrown away. I didn't look back and I simply use that as a learning path.

[00:10:58] Felipe Aguirre: And the thing is that it's so cheap that it doesn't matter. It's like the first backend, failed path. I was like, oh, it's painful. But then I thought I've only been doing this for 30 minutes, one hour. Who cares? Let's just throw it away and start again. And that's the beauty.

[00:11:13] Felipe Aguirre: When you realize that, when you go past that fear of starting over that we have as developers, because it's a lot of work, It just doesn't matter, what did I learn in this path and this, let's just try another one.

[00:11:23] Simon Maple: And I think that's curious. it's the learning piece, right? What have you learned from it?

[00:11:26] Simon Maple: And how can you take that back into the next one to make it easier or faster? And I think you do ask for handover, right? Yeah, exactly.

[00:11:32] Felipe Aguirre: The handover, which I then, include here. This is just an implementation path and key learnings, hours of improvement, and so on and so forth. I don't think it's worth it to go through the details, but yeah, suggested approach for implementation.

[00:11:50] Felipe Aguirre: Yeah, so that's, that was the setup I had for Cards Against AI. And I think it gives a good overview. I think moving forward, you can achieve something similar with Cursor. I think I will still use Claude for React mockups and for products, natural language product specifications. And I think it's quite good for that.

[00:12:13] Simon Maple: So show us the React mockup. Cause I think that's super interesting. We did a blog, when our designer actually, Rachel did a blog about how she did some of this, with some front end design stuff that she was looking at. And she actually updated her website after, afterwards.

[00:12:26] Simon Maple: Yeah, let's see what it looks like here.

[00:12:28] Felipe Aguirre: Okay. You're a senior front end developer, blah, blah, blah. You have a keen eye for details, blah, blah, blah. And then, important thing, go through front end specification and the OpenAPI YAML file. this will give you an overall idea of what I want. Help me design front ends.

[00:12:42] Felipe Aguirre: Give me some React visuals first. This is important. Because if you don't say that, it will implement the whole thing. And I don't want it to implement the whole thing. I first want to nail down the design. And once I have the design proper, the proper design,

[00:12:56] Simon Maple: Just breaking it into, breaking it down effectively, and then almost giving your approvals for the various bits, which are then later.

[00:13:03] Felipe Aguirre: So this is the homepage. This is the game page. I didn't like, let's spare the details. No need to go into that. But then I had some I don't know, I, some things that I had to change, please do this, do that. And it started to change, complete game page. And as you can see, like you have an evolution here of the whole app,

[00:13:22] Felipe Aguirre: add a 13

[00:13:23] Felipe Aguirre: column, add the score and submit button to the top, blah, blah, blah.

[00:13:28] Felipe Aguirre: I just tell it what I want, and then let's go to the part where we actually implement it, which I think it's quite nice. So at the end, this is what we get. And then if it's functional, this is actually quite powerful. It's functional.

[00:13:41] Simon Maple: How much, yeah. How much did you have to actually change under the covers to get it to work?

[00:13:47] Felipe Aguirre: Not that much. Look at this, I don't know, one, two, three, four, five, six, six prompts.

[00:13:57] Simon Maple: Were there any issues with the code rather?

[00:13:59] Felipe Aguirre: I don't know. And I don't care because at this point I only look at the visuals.

[00:14:03] Simon Maple: It's just the, it's just the, not the back end. This is just the visuals.

[00:14:06] Felipe Aguirre: So in six prompts, I got the visuals for the homepage and the complete game page.

[00:14:12] Simon Maple: Yeah.

[00:14:14] Felipe Aguirre: And then. What I did is I did this prompt that I think this prompt, I also put it here because I think it was quite important. This was a part of the specification, which is the contract, let's say,

[00:14:32] Felipe Aguirre: which is basically here, I'm just saying Hey, the frontend will interact with the backend following specifications found on OpenAPI final.

[00:14:43] Felipe Aguirre: Please be really careful to understand how to integrate it and what data to expect from each API call. And then I said, the homepage component is going to interact in this way and the game page in this way. So I'm just saying, which end points are you going to call in which different situations? Yeah.

[00:14:57] Felipe Aguirre: And then once I do that, it goes for the implementation, and yeah, I think I said, is this clear enough? Do you think there are some missing points? This is really important to always end your, when in some key points, always ask for clarification, ask me clarifying questions. It's quite useful.

[00:15:14] Felipe Aguirre: Yeah. And then you just. Do whatever. We will not implement it just at endpoints. How do you suggest we proceed with implementation? And then you get the whole code. And then it's just a matter of, okay, suggest a folder structure, for scaffolding the whole project, and there you have it,

[00:15:30] Simon Maple: And this looks like a real pain to have to move all this across now to VS Code, right?

[00:15:34] Felipe Aguirre: Yeah, for sure. But that's why I always ask for, scaffolding. I always ask for scaffold fronting, at least it creates the folder structures and the file names. Yeah. And the rest is history. That's a good, I like that idea. That's a good idea. Yeah. Of course. Yeah. And then I got an error, and then he just modifies the error.

[00:15:54] Simon Maple: So it automatically feeds that back in or you ask it to. No, I put the error in.

[00:15:58] Felipe Aguirre: Gotcha. Oh yeah. I see. That's yours. Yeah. I put it in and then it modifies stuff. I run it. I also got some errors.

[00:16:04] Simon Maple: It's very apologetic, isn't it? It's, I apologize for that error. how dare I suggest.

[00:16:08] Simon Maple: code that doesn't work.

[00:16:09] Felipe Aguirre: When I hit start game in the homepage, the page turns blank and does not bring me the whole game page and. Yeah. And at the end, please show me the full content. And then, yeah, this one, please show me the full content of the game page. that's actually not a nice thing that you have in Claude, which is, it shows you what to modify.

[00:16:29] Felipe Aguirre: And sometimes yeah.

[00:16:30] Simon Maple: Oh it doesn't actually provide you with the full version.

[00:16:32] Felipe Aguirre: Give me the full one, and then you've got this thing that doesn't work because it's trying to, it's trying to do a rendering, but I don't care about the rendering. I just want the code. I just copy paste the code. Anyway. And then at the end,you,you got it.

[00:16:48] Felipe Aguirre: I think that I came to the end of this part, but yeah, I think this is the gist of it.

So if someone wants to build app app from scratch, how would they start?

[00:16:59] Felipe Aguirre: Sure. So I had this app we built at Predicktia for chatting with your database. Okay. So I just use this as an example because I already have a ready made backend that is working. Yeah. So let's try to do the front end of this.

[00:17:17] Felipe Aguirre: I already have a frontend, but let's try to do another one just for the exercise.

[00:17:21] Simon Maple: So we should all chat with our databases regularly. Yeah. Yeah. Get to know them. And yeah, I think it's important. Yeah.

[00:17:29] Felipe Aguirre: It's the human thing to do. Yeah. Cause you couldn't,

[00:17:31] Simon Maple: you shouldn't only talk to them when you need something.

[00:17:32] Simon Maple: It's just generally how are you doing database? Yeah.

[00:17:35] Felipe Aguirre: Yeah. So you're a senior frontend developer with experience building React apps.it's quite similar to the old one. It's not very different, and at the end, it's just a matter of taste,

[00:17:44] Simon Maple: So that's set now for the whole, everything that we, every discussion that we have in here.

[00:17:48] Felipe Aguirre: And I actually started a project here where I have my front end description. I can, how I want the outline to be. I have my open API schema definition.

[00:18:01] Simon Maple: So how much of this did you create versus ask Claude to create for you?

[00:18:05] Felipe Aguirre: Yeah. So this one, I got it from the backend.

[00:18:08] Simon Maple: Okay. Yeah, of course. Yeah.

[00:18:09] Felipe Aguirre: This is just the open API specification from the backend.

[00:18:12] Simon Maple: And this is super useful just so that when you do create other pieces, it connects nicely.

[00:18:17] Felipe Aguirre: Yeah. Yeah.

[00:18:18] Simon Maple: Cause this is, that's the last place you want anything to hallucinate or expect things to be there when they're not.

[00:18:22] Felipe Aguirre: That's the beauty of standards. Yeah. No. Yeah. It's an open standard. Everybody respects it.

[00:18:26] Felipe Aguirre: And that's the beauty.This one, I wrote it on my own. And I just wrote it. I don't think it's, I don't think I need Claude to write this because it's quite simple. And then I just put all of those files over here. Yeah. Okay. Yeah. I already did one, but let's start one from scratch.

[00:18:44] Felipe Aguirre: Okay. So let's just copy paste the prompt just to save us some time.

[00:18:53] Felipe Aguirre: yeah, please help me design the frontend according to frontend.md. Do not implement all of the code yet. Give me some React mockups, let's say mockups.

[00:19:03] Simon Maple: So it knows what frontend.md is because it's a file in the project, knowledge. So let's see how it does.

[00:19:19] Felipe Aguirre: Okay. This is a common error. I've been getting this morning that I was not getting before. It's not an error really. This is proper code, which is you are importing things, from Component UI button components and this is does not allow us to render these

[00:19:37] Simon Maple: Okay, we're not because it's not something that we are supplying Yeah, it's a best practice probably for people who are developing code, but they would then import that into their environment

[00:19:46] Felipe Aguirre: So let's say please include all components in the same file and add mockup data.

[00:19:56] Felipe Aguirre: Because I saw that it said that I need to implement an API, whatever. No, forget about that. I just want to see the visuals.

[00:20:03] Simon Maple: Yeah.

[00:20:04] Felipe Aguirre: Yeah. So now it's mockup response. It's good. Gotcha.

[00:20:08] Simon Maple: Yeah. The button. Just putting it all in line. So would this be, if you did want to actually just import stuff, this would be quite annoying as well, right?

[00:20:20] Simon Maple: Because if we did pull this out to VS code, we wouldn't want to necessarily inline this all the time. So we would presumably maybe want to make some changes before we export just to say, okay, let's assume we do these imports now and so we can almost get it right and then perform the imports afterwards perhaps.

[00:20:37] Felipe Aguirre: Yeah.

[00:20:37] Simon Maple: But this looks much nicer. Yeah.

[00:20:40] Felipe Aguirre: Um,I'm not seeing the rest, let's do a test, submit, we're not seeing the rest. So,I am not seeing the other cards, only the, input component.

[00:20:59] Simon Maple: So as you can imagine, I did learn a bit about React, all of this hacking, I apologize. Yeah. Shame on you. It's very kind, isn't it?

[00:21:23] Simon Maple: It's a bit bigger. Yeah. React Tom. Oof. So it's interesting. it,

[00:21:30] Felipe Aguirre: Yeah, it uses an external library. Yeah. Yeah. Do not use react dom.

[00:21:47] Felipe Aguirre: Nah, but so there's always the fight that you have here.

[00:21:49] Felipe Aguirre: Sometimes it's just better to stop it. if you already know what, oh, What is happening Claude? Did I break Claude?

[00:21:59] Felipe Aguirre: Keep everything in the same file.

[00:22:04] Simon Maple: Now this is an interesting tip here becauseyou, chose to edit that versus writing a new. So what's the value of the edit versus adding a later prompt to, to correct.

[00:22:19] Felipe Aguirre: Noise reduction. Noise reduction. Okay. Yeah. As simple as that noise reduction, because if it made a mistake, but it didn't make a mistake.

[00:22:27] Felipe Aguirre: It's just separating two different, in two different component files, which makes it, you cannot render that here. Okay. So because you cannot render, I cannot see it. I cannot validate it. So that's why I'm asking it to keep on the same file. So it's better to do it this way so that you reduce the noise and you have a cleaner context because otherwise you will have a version with two separate files and a version with just everything in one file.

[00:22:55] Felipe Aguirre: So that's not ideal. Yeah. So you're still not interacting with, it's not giving us the full page. No. I am still not seeing all components.

[00:23:23] Simon Maple: And maybe because of the non determinism here as well, it's interesting because maybe had that command had run or had that prompt run four or five times, a number of them would have worked, a number of them wouldn't. So it's like almost down to your luck, as well as to whether it will do it or not, because you don't know which path it will take.

[00:23:41] Simon Maple: There you have it. This looks a bit better.

[00:23:42] Felipe Aguirre: There you have it. now we have the,the front end. , maybe it's not as beautiful as I would want to, but it doesn't matter. We could care about that. We could iterate and say, for example, I went top process and explanation to be in the same row.

[00:23:56] Felipe Aguirre: I want approve and disapprove to be next to submit button. We could try all of this stuff, but maybe let's go to the more interesting part, which is, okay, now let's go and implement this.

[00:24:08] Felipe Aguirre: So for that implementation, This is where I have the OpenAPI contract. Yes. Okay. So this frontend will interact with backend following the specifications found on file OpenAPI.yaml. Please read carefully to understand blah, blah, blah. And then I simply say what happens. You, we only have two endpoints, I think, ask and feedback.

[00:24:28] Felipe Aguirre: So ask that you submit a query and then you get back like the thought process, the explanation, the results on the query, then approve or disapprove because I want to have a feedback. did I give thumbs up, thumbs down, the right response or not? Yeah, exactly. So now I just have to tell it like, please implement, this front end.

[00:24:47] Felipe Aguirre: I'm going to cheat if you don't mind, make it quicker.

[00:24:52] Felipe Aguirre: Just to make it quicker.

[00:24:56] Felipe Aguirre: Okay. So this is the prompt.

[00:24:58] Felipe Aguirre: So read front end API contract, what we just saw. And you wrote that or, I wrote this, yeah. For instructions on how to interact with your backend, proceed with the implementation and provide unnecessary files and portal instructions to execute this app. Provide a bash script for scaffolding the skeleton of the project, provide full file context, and not just the editable parts, and provide

[00:25:20] Felipe Aguirre: Yeah, provide instructions on how to set up and run the front end.

[00:25:37] Simon Maple: This is in the same chat as the front end. It has to be in the same chat. Because it needs that as context. Unless you pull that out to

[00:25:47] Simon Maple: another file and use that as context.

[00:25:52] Felipe Aguirre: Which I should actually, I think that these, yeah, I do think that these, what is happening here? Okay. Okay. This thing is running. We're confusing it. Let it flow. But yeah, that's a mock up and these mock up, it's part of the product specification in the way I used it. It's part of the product specification.

[00:26:14] Felipe Aguirre: Yeah.

[00:26:15] Simon Maple: So where, if we're going back to the GitFlow, where would you, at what stages? typically, based on your experience using this as a workflow, at what places so far would you have copied that, the code across or even specifications and so forth across to, to actually, perform a, or stage it, or commit at various points.

[00:26:39] Simon Maple: Yeah, let's do that. Yeah. Okay. Is now a good point then, or would you have done it before? Now is

[00:26:43] Felipe Aguirre: a good point. Now is a good point to stage, not to commit to stage because Now you stage. Let's just do it.so

[00:26:55] Simon Maple: maybe let's just do one, one file

[00:27:07] Felipe Aguirre: So

[00:27:11] Felipe Aguirre: yeah, in this case,

[00:27:12] Felipe Aguirre: this will be the flow for first git init first. Okay. git init.. And then I would just say, do git add straight from there?First, I should have done git add specifications. Yeah, exactly. And git commit initial

[00:27:41] Felipe Aguirre: specifications. It's not the best commit, but it doesn't matter. And then git add scaffold. And I will stop there.

[00:27:50] Simon Maple: So why would you stop there and not,

[00:27:51] Felipe Aguirre: Because I'm not sure if this thing is working or not. And if I say you made this mistake, blah, blah, blah, whatever, change this and that. If that's the case,

[00:27:58] Simon Maple: You don't want to commit for every single one of those.

[00:28:02] Felipe Aguirre: I keep iterating until I say, okay, now I got to a milestone where what Claude provided me works.

[00:28:09] Felipe Aguirre: Then I have a commit.

[00:28:11] Simon Maple: And for this, how do you add tests? do you get Claude to create them for you? Do you do, is it more visual based on your, for a front end?

[00:28:19] Felipe Aguirre: I have no idea how to test the front.

[00:28:20] Felipe Aguirre: How do I test for a front end? Yeah. I have no idea. So again, like I'm a backend developer, so in that case, I would just ask Claude

[00:28:28] Simon Maple: To generate some tests or click through yourself, I guess with the backend.

[00:28:34] Felipe Aguirre: Yeah. I do test myself to the visual, like the user's test. Of course I did. I do them.

[00:28:39] Felipe Aguirre: But if you really want to have hardcoded tests in that case, I would just. Ask Claude to help me write. Yeah.

[00:28:44] Simon Maple: And I guess from a backend point of view as well, you can get it to general start generating those or use some other AI tools if you're, if you do it, if you're pulling that across into your IDE Codium or whatever it is to do that.

[00:28:55] Felipe Aguirre: Okay. Cool. So yeah, this is the workflow. now the next step will be to just copy, paste everything and run the instructions as they said. And see how that goes. Yeah. I do think that this is a nice. Way of doing. Oh, this is supposed to be called setup.sh, apparently.

[00:29:14] Felipe Aguirre: Yeah. Yeah. It doesn't matter. I do think that, this is nice and everything. As I said at the beginning, I wanted to test the raw power of Claude. I would do it differently. I would do it this way. Let's forget about this.

[00:29:46] Felipe Aguirre: And then Composer.

[00:29:52] Felipe Aguirre: So this is how I would do it. Which is like the equivalent, you know?

[00:30:00] Felipe Aguirre: Actually

[00:30:03] Felipe Aguirre: that's not how I would do it precisely, but I would have to first take this code, copy it, and then app

[00:30:24] Felipe Aguirre: mockup that DSX, I think. what's the extension? Yeah. Yeah,

[00:30:39] Felipe Aguirre: yeah. No. And then,

[00:30:44] Simon Maple: And to this, when it does create, it will automatically populate it in the i in the 'cause Cursor's, obviously an ID as well as a, as an a, a AI enabled assistant. So as it generates, it automatically puts it in a file structure, right?

[00:30:58] Felipe Aguirre: Yeah, exactly. But again, I haven't tried Cursor as much as I would like to.

[00:31:04] Felipe Aguirre: I've been off for one month. Yeah, that would be your next step. Yeah, that would be my next step. I don't know how good this will work. I would say this has to be quite powerful, but the idea is doing the same, but here, and then you hit submit.

[00:31:22] Simon Maple: And what is this used under the covers? Is this, is there a specific one? Claude 3.5. This is Claude 3.5 as well.

[00:31:27] Simon Maple: Yeah, and this presumably would also be better in terms of if you are trying to import things, you can then start pulling those components in versus requiring it because you're not effectively running it in a REPL whereby you need those. You can actually just run it using those components.

[00:31:47] Felipe Aguirre: So accept all.

[00:31:50] Felipe Aguirre: And then as you can see, like I have everything here, yeah. And now it's okay if it separates things into different files. It's, that's the right way of doing it. Yes. So that will be for me the next step. I don't know if you want to give it a try to see if this runs or maybe you can see the other one.

[00:32:07] Felipe Aguirre: Let's try it. Let's try it. Let's try it. Why not? Okay. Let's see. So let's follow the instructions here. So bash scaffold. Okay. Complete.

[00:32:25] Felipe Aguirre: But like it hallucinated a bit here, like at the end. It did some stuff that are quite weird. It's repetitive, as if this was actually not necessary.

[00:32:42] Felipe Aguirre: Like this scaffolding, actually, maybe I did a mistake here in that because now we're talking about, because now we're talking about Cursor. Yeah, that's my mistake. As we were saying, like sometimes, when it doesn't give you what you need, maybe you're the one who made a mistake. You confused it because make sure you scaffold the whole project and add necessary configuration files.

[00:33:04] Felipe Aguirre: Yeah. So I don't need to say that because we're in Cursor at the moment. Yeah. Cursor already has the instruction to scaffold everything.

[00:33:12] Simon Maple: Yeah. So it's just duplicated that scaffold essentially.

[00:33:15] Felipe Aguirre: So let's leave this package here. No, you know what?let's do it again. Let's do it again. Doesn't matter.

[00:33:30] Felipe Aguirre: Okay. Let's do it again.

[00:33:36] Felipe Aguirre: No, it's not that one, but,

[00:33:42] Felipe Aguirre: how to interrogate your backend, presume implementation and provide, that's obvious because we're in cursor.

[00:33:51] Felipe Aguirre: This, we don't need this. Provide full file content and not just the editable parts. Again, this is not necessary. Yep. Yep.

[00:34:02] Simon Maple: That's true.

[00:34:07] Felipe Aguirre: Okay.

[00:34:07] Felipe Aguirre: I actually

[00:34:17] Felipe Aguirre: implement the front end, based on the mock up found at,

[00:34:30] Felipe Aguirre: follow

[00:34:35] Felipe Aguirre: front end API and, open API for instructions on how to communicate.

[00:34:50] Felipe Aguirre: with the backend.

[00:34:56] Felipe Aguirre: Then you just don't need to put this here.and then simply provide instructions.

[00:35:19] Simon Maple: It feels faster. Yeah. I don't know why. So maybe it's the, maybe it's the UI. Yeah.

[00:35:24] Felipe Aguirre: So accept all.

[00:35:30] Felipe Aguirre: So you say accept all and everything is fine. It's there. Yeah. And let's just do npm install.

[00:35:41] Felipe Aguirre: Okay.cd analytics front end.

[00:35:51] Felipe Aguirre: Something is missing there. So it didn't provide a, package.json. Yeah. So you forgot.

[00:36:15] Simon Maple: That's good. Yeah.

[00:36:31] Simon Maple: It's thinking.

[00:36:32] Felipe Aguirre: Yeah.

[00:36:36] Felipe Aguirre: Good. What else do I do? So npm install. I should provide the backend API. So let's create a .env.

[00:36:56] Felipe Aguirre: Yeah. And that's actually the address. Let's just verify.

[00:37:04] Felipe Aguirre: Yeah, it's there. Okay.

[00:37:10] Felipe Aguirre: Okay. source .env okay, what else should we do? And then run dev. If this works straight out.

[00:37:31] Simon Maple: I would have been amazed.

[00:37:36] Felipe Aguirre: It's quite weird. But wait, is there, do we have a con? And then go to,

[00:37:44] Felipe Aguirre: it's funny. Okay. Let me just check because I think that I do have a stuff running on port. Just make sure. Okay. No, this is not the case,

[00:37:59] Felipe Aguirre: but here, this is the case,

[00:38:04] Felipe Aguirre: like

[00:38:05] Simon Maple: down. Okay.

[00:38:15] Felipe Aguirre: Yeah. Okay. So

[00:38:26] Felipe Aguirre: let's see. When I go to the URL, I get this.

[00:38:36] Simon Maple: And this is the problem. Then it's it's giving it quite generic error responses.

[00:38:41] Felipe Aguirre: And also this is where. The fact that I'm not a front end developer and I'm not proficient in Node.js, that's where I start losing because

[00:38:50] Simon Maple: Yeah, it's good till it's not, when it's generating stuff, but unless you actually know the details and depth of it, yeah.

[00:38:55] Simon Maple: So we have a Python developer and a Java developer trying to debug JavaScript right now, which is Exactly! It's not a good space.

[00:39:03] Felipe Aguirre: We need to check if there's an issue with the main entry point. Let's create our update. I'll leave it at that. Also make sure you have an index, okay, it created two new files.

[00:39:14] Felipe Aguirre: So this is where, let's pause here. So this is where I should have done that, but I didn't. Dropbox, Projects, ChatGPT.

[00:39:33] Felipe Aguirre: This is where I should have, used, started using Git. Yeah. To actually see what is changing. yeah.

[00:39:39] Simon Maple: Oh, I see. To compare, better diff the, the updates there. Yeah. And also it's like offering things now that we didn't specifically ask for. So it was almost like we were almost being too specific and it wasn't generating enough for the app.

[00:39:50] Felipe Aguirre: Git ignore node modules. Okay. Now this is something useful. Stage all, stage all, except this one. Okay. And then, let's go back to the composer unless it's accept this.

[00:40:16] Felipe Aguirre: Okay, now I see that it actually changed some stuff, like the index. html didn't have anything. Yeah. And we were missing the main.txt. So this is a great example of the importance of using Git as your buddy here. So let's see if that changes the output of this.

[00:40:42] Felipe Aguirre: There you have it.

[00:40:42] Simon Maple: Amazing. Yep.

[00:40:45] Felipe Aguirre: Give me a list of brands. There you have it. There we go.

[00:40:54] Simon Maple: Amazing. Yeah.

[00:40:55] Felipe Aguirre: Yeah.

[00:40:56] Simon Maple: Wow. That was super cool. It was awesome to see that demo like more end to end and I think, hopefully folks, on YouTube will have, will have seen some very interesting things, how to get started and also how, showing how easy it is for two back end developers, ultimately, to, to

[00:41:11] Felipe Aguirre: Python and Java doing Node.js.

[00:41:13] Simon Maple: There we go. Who'd have thought to build up a front end and connect to that back end so well, using the specs in particular as, big pieces to connect different parts of the app. Felipe, thank you so much for joining us and thank you for sharing,some live coding using, using Cursor, using Claude, and Claude products.

[00:41:32] Felipe Aguirre: Thank you, Simon, for having me. It's been wonderful two days interacting with you and looking what you were doing. it's really great conversations and everything. I'm really happy to be here.

[00:41:40] Simon Maple: Amazing, appreciate it. And, tune in to the next episode. Thanks for listening.

Podcast theme music by Transistor.fm. Learn how to start a podcast here.