Using ChatGPT to build a Web App from Scratch

The product goal that I'm trying to build is a basic CRUD app. I should have like a compensation table. So like this is a nice graphic, but like just start out a compensation table, kind of double-click into a single like offer view. I should be able to create an offer. So upload an offer, like a PDF type of thing. And that's really like the MVP that I'm trying to build.

Try levels.fyi, but for doctors. Like imagine you're talking to just an insanely knowledgeable person, right? Like if you're talking to, like if I were talking to a senior engineer at, I would just, this is what I would tell them, right? Levels.fy for doctors. And then they would do all of the research to figure it out. I wouldn't ask them. And so yeah, and this is honestly like when founders pitch me, the best pitches are kind of like when they're just like, it's this, but that. It saves so much time, right? In terms of like the business model and like lead gen and like all these questions are asked. Yeah. So let's see what happens. Let's see what happens. What's interesting to me is that basically GPT-4 has no idea what we are trying to actually do, right? Like you're giving it a hint, but like you haven't really specified like, you know, all these questions around like, you know, is it bootstrapped? Is it venture funded? Is it a startup? Is it, you know, like, are you building it for somebody else? Like, but it just sort of figures out A lot, a lot more. It doesn't get the fact that we just want the code, basically. Like, I would say, like, you know, set of instructions to— I mean, maybe it's just not going to get the fact that, like, what you need is a Flask app, you know? But I mean, the closest part would be to choose the technology side. Maybe just ask it. You know, what, what technology stack, you know, what technology stack would I use or, yeah. Yeah. So it's basically gonna give you a frontend and then backend. It's gonna ask you to say like Node, Python, Ruby, maybe. No, it's really biased towards JS, I guess. Yeah. Yeah. I mean, it's not a bad approach, I think. I mean, it kind of shows you where the world is headed because these are definitely answers that are accurate for 2021, but not 20— like I learned to code in 2008 or 2009 or something. Right. So I'm like, like, no, you know, not a lot of kids are learning like Rails and Python, like for, for app development at this point. Uh, like React and Node is definitely like the right. Answer. So cool. Okay. I mean, this is pretty good. I mean, it kind of tells you, uh, that we basically are going to want sort of like this React Redux sort of front end, uh, and then Node backend. The thing I would disagree with it the most is probably the hosting provider. AWS is like way too much. Heroku is better. Um, there's even newer services, like the, the one that people recommend And Heroku is probably still the default, but a lot of people have recommended render.com. I wonder if you could ask it like, what about render.com? And see if it has a, has an opinion. But you know, now we're cheating, right? Cause it's like, this is knowledge that I have that isn't, you know, would not have come up. Yeah, it's actually pretty good. I mean, maybe code, like code to build levels.fyi for doctors, you know, deployed, you know, in, in, you know, React, Node.js. MongoDB deployed, you know, on render.com. This really is like the vast majority of the decision. Like, it really is like, this is 80% of like architectural decisions, right? It's kind of like, are we building it with wood or concrete? You know, like ideally would ask clarifying questions, you know, basically say like, I can't answer this well enough unless you tell me XYZ. Let's create a new. Folder and everything. But no, this is good progress. I mean, the fact create-react-app is the right command. I mean, that is the— what I would, what I would probably recommend. So, and I'm more— I'm learning too, because I'm really bad at React. I actually don't like it, even though Gumroad is in React, so So it's asking you to create— okay, that's interesting.

Create two folders with the frontend in front of them, another for the backend.

All right.

You know, like, so it's sort of like once this stuff gets good enough, the next step is pretty obvious, which is like you'll be able to basically just like copy all of this into like Auto Terminal, right? So here's what I would do. I would literally, and this is, I would literally copy that and just paste it and don't give it any context. Just paste the It's there, just there. Yeah, literally just there. I don't know if how they have figured this out. Either they trained it like this with RLFHF. That's my guess actually. And so this is the part where I feel like AI will help a lot with, right? Which is like you're not actually doing anything now.

Yeah.

You're just going through the motions of downloading a piece of software Yep. And then you'll, you'll get another error.

Move to trash.

All right. So now, so yeah, let's say it is.

All right.

There we go.

So very cool.

Call it globally.

Verify.

Error.

Error. I mean, so, you know, similarly, you could literally just paste this. I would recommend just doing like sudo. Normally when it says like a permission, like the operation was rejected by your operating system, it just basically means Macs are pretty defensive. So this is basically to prevent you from like fucking up your computer, right? With like some internet command. Uh, uh, already exists. All right, well, that's good. I mean, that means you already have it, so cool. So yeah, then you basically just have to go back and do that again. Welcome to being a senior engineer at Facebook. It's like, this is the job of a software engineer that gets paid $500,000 a year.

Yeah, how long until I can apply?

Yeah, yeah.

But yeah, so I mean, did you, did you do that npm init as well? You did that? Uh, Oh, so you just make sure you're in the backend folder when you do that. It says navigate. Oh, cuz you want to be in those two folders.

Oh, okay.

So either you delete those three files or you can just move them, uh, manually. Yeah, which is fine. Yeah, I would just, yeah, move all three of them. And then you want to— that was in the frontend. So you wanna move that to those files to the frontend folder. I think you moved them to the backend.

You're right. I did. There we go.

Now I need to navigate to the backend.

All right. That note. Sure. Yeah. I mean, that's all it does, I guess. It just creates the package.json.

Sure.

You have the frontend app, you have the backend folder. Yeah. Make sure you're in the backend repo, I think, when you do— before you, uh, before you do that.

Is that how you— how do I check Express? Just wanna check real quick.

Package.json file.

Yeah, you're right.

Okay, I did.

Well, yeah, I would probably run that, uh, I would, I would just run that again, the whole npm install, just in case. Okay.

Um, and did it say go to the backend, navigate to the backend folder?

Cool. Awesome. Yeah. Now you have, yeah. So basically, basically you had the package.json file, which tells it what to install. Um, but you didn't actually run the command in the backend folder. So you didn't have, basically you'll, you'll know because you didn't have the package.lock file.

Hmm.

If you click on the lock file, it's a lot bigger of a file.

I see.

Actually what's downloaded, like, because all of, you know, all of these, you, you only have 3 or 4 packages you need, but then those packages have their own dependencies, right? And so it's sort of catching the tens of, you know, hundreds of thousands of millions of lines of code. And that, that's where the complexity comes from. It's like you're actually building an app with like millions of lines of code. It's just all just like, you think it's like 20 lines of code. It's all abstracted out. Okay. Yeah. Cool. Server.js in the backend folder. Cool. Let's do this.

Okay, copy and paste it, create environment variables of MongoDB.

Okay. Awesome. All right, let's see how to—

how do I get a—

probably just, uh, ignore that for now. Okay, DB part, I would just try to deploy, get something, you know, deployed somewhere.

Yeah, just get a new Repository.

Okay, for this, um, probably need a backup, right?

I—

yeah, I think you were going to want to. Yep, exactly.

Nice.

Cool. Um, and then yeah, just do those. That adds all the files. This will commit it to Git locally because I don't think you, you know, all it— this is just purely Git local.

Um, should I go add one on the—

yeah, I, I, yeah, I would. Yeah, Render is going to basically pull it from there.

I— where do I go to my repositories again?

Try to create one the other day, but let's just call it—

and then basically you just want to do that second set, the push an existing repo from the command line. You can literally just hit that copy button. I think it'll just and then paste those 3. It should just do them all.

Uh, so front-end deployment. All right, let me go create an account on Render.

Yeah. Get started.

Let's see. Yeah. What I find amazing is normally you would use Render, like you would use their onboarding docs or their help center, right? Or their whatever, their README. And like, you're actually, we're using ChatGPT. Like ChatGPT, it says replaced their own help desk.

Right. Right.

Like just a fascinating It's like Google, you know, just like, you know, no, no website has their own search. It's like maybe one day you don't even need your own help center. No one, like the help center is purely for Google scraping it or for ChatGPT scraping it, right? AI scraping it and you don't actually need a, anyway.

It'd be like a reverse model. It's like we've got Stack Overflow demanding that these companies pay Stack Overflow, but instead it's gonna be like Render paying ChatGPT to like, please index my. Yeah, I help docs.

All right, well, now we'll learn how good it is, right? Because this, I do find it's not— it guesses here.

Yeah.

So look, click on new static site. All right, I mean, I got that right. Choose your Git provider.

I mean, new static site.

By the way, this is another opportunity is like, you know, at this point, you, you know, like an AI should be able to look at your screen and just do Yeah. Like, apply the left to the right, you know? Like, I, I often have to do this, like, filling out, like, a form, you know? And it's just like, why am I doing this? AI can easily, like, just— you don't even need AI. I mean, like, you just read the text. Right.

Yeah.

I'm sure it'll happen. All right.

So connect to Comp Clinic.

Um, like, here's a good example of what they should be using GPT-4 to do. Like, they should have autofilled the name, you know, and, and stuff. But, uh, because otherwise you're like, should I use uppercase? Spaces allowed, right? Uh, okay, then you just need to set the— yeah, the build command and the publish directory.

Okay, let's see the build command too.

I had no idea this is like the how people do it. They literally just have two different folders, frontend and backend. That's actually not bad. I like that. That makes, that's pretty simple.

Yeah.

Oh, you put it in the wrong, the wrong field.

Oh, the publish directory. Wait, where is it? So, okay, so select your, the build command. Where's the build? Oh, there's a build command.

Okay. Publish directly directory to— here we go.

That creates that site.

All right, yeah, go to the GitHub repo. Maybe we forgot to push. I thought we pushed.

I thought we pushed too. Yeah, no, I don't Yeah, go back terminal.

Oh, it's still building.

What? Yeah, so just cancel this and just run the last one.

There you go.

Yeah, that's probably something to do with the weird auth password stuff.

Yeah.

Deploy started. Wonderful. Back in deployment, click on new web service.

New web service. There we go. Select your repository and branch.

Can I do the same?

Yeah.

My web service as I did for the—

You probably— my guess is it's gonna require you to do a different name.

I'll just do backend. Like repository build command place build command.

My guess is this is wrong, but let's just do it.

Like replace?

Uh, my guess is the cd is not necessary. Uh, but I could actually— no, I could be wrong. I could actually— yeah, I could be wrong. It might be actually because it's trying to do it from one repo actually. So yeah, maybe it's Maybe it's right, right?

Add an environmental variable to key.

So this part, um, for— I think you can just create it. I would, I would ignore the Mongo part for now. My guess is that's like the next page.

Yeah, let's see.

It would ask, um, to— for that, the keys on the Environment on the left is probably where it will ask you for that. Yeah, so basically, I mean, there's— we can, uh, okay, what does it say? Now you have successfully deployed your levels.fy. Okay, so I mean, in theory, if you went to that front-end website Uh, so that's the backend website. So that shouldn't even— I don't even know why that— that doesn't really even need a URL. Um, cool. Awesome. Yeah, so let's see what went wrong. Missing script build. So, um, if you go up— yeah, so basically you want to run this locally first, uh, make sure it runs locally. Um, so I would probably just ask ChatGPT like run locally.

Navigate to front. Okay, okay, start.

Boom, awesome. So you, you see it, there's a similar error, which basically means that your, your package.json is missing, uh, that function. So if you go to— yeah, so you'll notice there's no— if you go to the other one, there's like a command, you see that scripts with test. So you need to create one. But if you, if you just paste it, if you just pasted this, I'm curious if you just pasted that error and if it can figure out like what, what's, what you're missing.

Yeah, there you go.

I'm at least as smart as ChatGPT. Yeah, I find that the longer the context gets, like, you know, the, you know, the worse the answers get. But so that's kind of why I start new times. 'Cause like, I don't know where it got React scripts from, for example. But in theory, it's, I mean, it's roughly correct, which is you need, if you wanna do npm start, it always has to, it's, that's what it's referencing. So you do need some start thing. In the folder you're running it in.

Okay.

I think that should be fine. Yeah, just remove the dot dot dot. And then I would update this. I mean, I would— oh yeah, you need a comma. We could try running it and see what happens. My guess is it will fail, but yeah, see, so what does it say? It said something after the React scripts bit. It said, okay, so that's okay. That's in the different—

add it.

Yeah, I would do the same. I would just sort of like copy that error, the React scripts error, and just see, uh, yeah, like it'll probably be like, oh yeah, sorry, sorry, you're right.

I wonder if I missed a step earlier where this would have been automatically installed.

Oh, I see. Yeah, maybe.

If I rerun some of the scripts above, it's not gonna like duplicate the files if they already exist, right?

No, no. It'll, it'll error out.

Okay.

Or replace it. Do that or follow this again.

Yeah, I guess it's just making an argument that you don't have React scripts, but I've never heard of that. I, was, was that in the, in those? I guess it's required for create-react-app.

I think it was mentioned earlier, like, this is just a recent, recent thing. You think I should try to reinstall everything from the beginning or just—

Oh, yeah. Yeah, definitely. I have to do this many times. Or no, just listen to it from the back, from that. Effectively, what it's asking, what it's telling you to do is doing that.

The node_modules and reinstall them.

Okay.

And then this time it should pick up. I mean, I guess it's not— there's no create-react-app in the package.json, uh, so I don't know why it would— why, why it needs—

let's try it.

Let's see if it all works now.

That was the exact same Create a new React app in a different directory. Call it new frontend.

I mean, I mean, if you just look at create-react-app, it should just say what the node— yeah, I would just manually do, uh, like if you go to create-react-app.dev, if you just go to the bottom, it says, you know, upgrade using a single command. So I assume you just wanna do this, run this like install function, which will effectively, I think it'll also add it to your folder too. And my guess, that's my guess is it skipped it. It didn't get this part.

So. Got it.

You think I should still follow this? This process?

I don't think you'll learn anything. I think it'll— I don't, I don't think it's accurate. I think, I think it's basically— I mean, you can ask it like, could it be that I didn't install React? Like, did you tell me to install React apps? Like, and then it might be able to tell you that it didn't. But that's my guess. It just, it kind of skipped a step somewhere.

This one?

Yeah. Yeah, it wasn't. So for some reason, when you did npx create-react-app, it, it didn't, uh, add that.

All right, should I try this?

Yeah, let's do it.

Install React Scripts in the frontend folder.

Lots of scripts.

There we go. Okay, and then run the frontend server.

Let's see what—

added a bunch of packages, high severity, but seems like it works. So now just run npm start.

Oh, sorry, I was muted. Um, you're missing, uh, basically what happened I think is that your create-react-app command Did not fully succeed, which is why you're missing some files like create, you know, there's the same issue that is why you don't have this index.html file and why you didn't have React scripts. So basically, basically you have to just run that create-react-app again is my guess. Yeah. Like if you just, if you search this for just that create-react-app, um, this one? Um, up one more, hopefully. Yeah, so that, that— this command basically did not, did not actually work. Uh, so if you just run this again in the frontend folder— yeah, this command failed last time is my guess. Um, yeah, so it looked like it succeeded, but it actually failed. So we basically have to delete all of those 3, those 3 things and start again. Or yeah, or just do it manually.

Do it manually.

Now let's see.

Yeah. I mean, the— yeah, the frontend should be very simple. It's just all it's doing is basically spinning up a basic React app. And then most of the logic is actually in the, in the backend. So yeah, so here it tells you npm start, uh, so if you just run npm start, it should work.

Cool.

I mean, so you have a frontend. Now we can either do the backend locally, or we can do the frontend deployed and then worry about the backend, either approach. I would probably see if we can get this running on Render.

Okay.

'Cause doing the same on the backend's probably repetitive. But let, let's, yeah, let's see if we can. So basically if you go, if you go to Render's website again, You know, they had this, you, you basically wanna commit the code and it'll, it'll automatically try to deploy. I believe Render's sort of default is to set up, set up like that. So if you just push to GitHub, it'll just auto do a deploy. Oh, it's the, the -a has to be before the -m. -m has to be before the message.

What does that -a do?

I typically just do -m. -a is, uh, adds all the files, stages all the files you've changed. We're making pretty good headway, I think. But the cool thing is once you have, in theory, once you have it set up, once you have deploys going, then it, it's ChatGPT super helpful, right? Because at that point you're just like changing parts of something that exists.

And we're live.

Yeah. I mean, so Now, now let's do the, the second part. We have 20, you know, minutes. I think we can do it, but, uh, yeah, we basically just wanna do the backend, um, part of it, which means, which means creating that, uh, I think for now we can ignore Mongo. We can just do the create the backend piece and get something, uh, showing up. Uh, and then we can connect the dots and then we can worry about Mongo if we have time. I mean, how— I would ask it, how are the— how is the front end talking to the back end? Because I don't see that.

Um, still building.

Okay, yeah, that's a long— that's a long build. I'm surprised you can't— can you, can you click on that deploy and see the code as it's doing it, at least.

Okay. Yeah. Okay.

Yeah.

Well, that's good news. We got the error. I guess you gotta do the Mongo thing for it to actually get, get up.

Um, should I do that real quick?

Oh, let's, yeah, let's see if we can do that. Yeah, let's do that real quick.

Okay.

This is another thing that AI should do for you, like next level autofill.

Have to remember to try to blur some of these autofill passwords, uh, yeah.

That's so annoying how they make you do this. I—

yeah, whatever.

Some, some, uh, it's going to show up in someone's dashboard somewhere.

I think everything's JavaScript, right?

Yeah, yeah, free. Make sure you're not an AI. AI does all the work, humans fill out all the CAPTCHAs.

Yeah, all right, username and password.

Right, definitely usernames, passwords preferred, way more convenient. Create user, make sure you copy that, um, just in case they don't show it to you later. Okay, um, and then we've added your— yeah, well, you're gonna want What happens when you click cloud environment? Ah, fuck. I don't know what any of this means. I would just do local for now.

Okay.

And we can see if there's errors with, and then just finish and close. It's pretty well designed. I mean, it's good UX. I didn't realize they'd built so much of this stuff out. Um, yeah, I would, I would maybe ask ChatGPT at this point, like, how to get Mongo URI from MongoDB Atlas Connect. See, like, how would that be predictable? Like, I guess. But, um, and then what do you want? You're going to want drivers, I believe. The first one, connect to your app. Uh, what does it say though? Uh, whitelist. Oh yeah, we already did the whitelisting. We already created the database. Connect cluster, choose a connection method. Okay, where— that's where we are in the select connector application. So that's wrong, they missed the 2. So it missed that part, it missed drivers. It's assuming— it says select connector application, but it's slightly wrong.

Yeah.

Um, However, what does it say now? It says, yeah, boom, there you go. That's it. That, uh, Mongo SRV thing. Um, it's, it sort of skipped that in the ChatGPT, but I would run that.

You're talking about this guy or this guy?

Uh, the npm install, sorry, npm install MongoDB.

Yeah, see that real quick.

And then make sure you're in the backend, uh, the backend folder.

Okay.

And then, yeah, in your end, the end file, um, you need to set that.

We're gonna set here? Yep.

Just the whole thing? This is the whole URI?

Yeah. Yeah, equals, yeah.

All right.

Just like that. Exactly right. And then you wanna do a new line at the end normally just to have a, yep, there you go. Awesome.

Good.

Um, then just make sure you replace that password with your— with the password. Um, it's, it's not giving it to you, so you have to go back and get it. Pretty sure. Oh, nice.

Uh, yep.

No, we'll find out.

And then, yeah, basically, I mean, that's, that's all you needed. Um, in, in theory, the, you know, the, the username and the password are provided. That's all, all, all the app needs. So I would just, yeah, push that. And, uh, and you should at least, you know, or yeah, that should, yeah, could push.

Cool.

And then let's see.

Boom.

This is the thing, right? Is like people say learn to code, but this is what it is. Like we're not really typing. No. Like we're not coding any really anything. It's just like this is the stuff that I think is, is, is, you know, the stuff that's hard to wrap your head around. It's a, it's a art more than a science. Well, the good news is the build is successful.

Successful.

Wonderful.

All right, let's see if it starts the service. Starting, uh, the server, which all it does it seems like is connect to the Mongo instance, and then I don't even know if it prints something or what. But, um, in theory what you would do is you would basically have the backend, you know, fulfill an API, right? So it would just— it would basically render, um, JSON that would be equivalent to like some segment of the database, right? And then the frontend would basically consume that JSON, turn it into HTML, CSS, and then render that. And that's basically, you know, what levels.fyi is, right? It's not much more than that. Well, this is good. It's a better error. So let's see if we can figure that out and just run, yeah, just run that and see, see what ChatGPT says. But it's, you know, it's basically just gonna ask you to, there's some, some config thing that you have to set up on, probably on the UI of MongoDB.

Did I not whitelist that?

You did on your local. However, you know, the, it's, it's Render's, right? Server that's hitting Mongo. So you basically have to add Render somehow. So, oh, maybe it's in security. If you go back, this is, yeah, see now it's hallucinating a little bit. Like it's guessing, I think, based on what it said prior. That's why it thinks it's here, but it's not. I think you have to go close that.

It keeps bugging out.

Okay.

Oh, that's better. Yep. All right. Add IP address and then—

Do I add Render's IP?

Yeah, you're gonna have to add Render's. Yep. So how do— yeah, exactly. Yeah, yeah, exactly. And then there'll be still be some way to do it. Alright, so that's almost definitely, I'd be surprised if that works, but Render should have their equivalent documentation. So if you just go to Render, yeah, I would, this might be worth Googling. If you just Google like Render MongoDB Atlas, I guess is, this is gonna be hopefully something that just surfaces them their own docs. And then, yeah, we already did that.

Uh, return.

Okay, maybe my username, maybe my password was wrong.

Yeah, username and password. But it still seems like it needs the network access thing.

Yeah. What was that that's wrong with it?

Oh yeah, I would fix those for sure. Username and create environment variables for username and password. I mean, no, I mean not necessarily. All it's doing is like if you, could you go to the code that's hitting MongoDB Atlas? Like if you Google Mongo or if you search for Mongo URI in your code base, what, I guess it's in server.js. So what is it doing? It's basically just getting the mall. Yeah, I mean, yeah, I mean, basically it just requires— it requires that IP thing. There, there was a way to do it. There was. I, I remember seeing if you click a new IP address If you go back to that dashboard and hit add IP address, I'm pretty sure there was like a— yeah, what happens if you hit allow access from anywhere? Yeah, that might be good just for now.

This here?

No, they didn't.

Okay.

And at least that way should, you know, it should allow you to do more.

Yeah, I Googled it and it looks like if you whitelist that 000, it should, it should work. It should just fix itself, but you might, it might require a deploy.

And yeah, it should have fixed itself, but do manual deploy or should I just push?

I would just do manual deploy. It, it probably won't allow you to deploy, or yeah, I would just, I would just Yeah, that, that should be fine.

Yeah.

And then maybe if you want to get, um, some more levels.fyi specific stuff, because it really would all live within the server.js, um, file, because really, like, the, you know, there's, there's like really, I mean, what do you need it to do? You need to be able to like create records and then list, you know, show a list of the records, right? Basically. So there's like—

How do I, how does it connect to the front end?

Like, like— So the front end, the front end, the front end. So the user visits the website, the front, which, which is the front end, right? That's the front end website. The front end then would ping the backend. So the frontend, if you go to public, uh, index.html, uh, and you just go to the body, so if you just scroll, right? Um, there's nothing here. Um, so what you would want is, um, yeah, if you wanted to start there, what I would do is go to ChatGPT and say, you know, um, after the create-react-app, like, update this file to ping backend and render list of roles and, you know, compensation.

Build successful.

That's good.

Okay, here, I'll follow your lead. So you say, should I do the backend first or the, the—

yeah, I would do, I would do the frontend. Um, so I would just say, you know, up, up. I would probably copy paste that file in, you know, index.html. Um, yeah, and be like, this is index, you know, this is frontend-public-index.html update to pull list of jobs, you know, parentheses title compensation from backend. Yeah, let's see what happens. Yeah, I mean, it worked, connected to MongoDB. So like, if you went to MongoDB— you probably want to keep this open in a tab, sometimes it'll error out.

Um, but you're saying go to MongoDB and—

yeah, I mean, if you, if you go to database on the left, I'm curious if you can actually— can you add data or no? There's no way to add data directly. Um, oh yeah, like load sample dataset. What happens if you hit load sample dataset? That's my guess. If you hit browse collections, there's probably gonna be a collection in here soon. Yeah, there you go. Sample mflix.com.

It's all right. Got it.

So at least this way we can potentially write some code to get whatever the junk is. Yeah, this seems right to me.

Frontend source folder. Okay. Or component into app.js. Okay. Header element inside.

Yeah, sweet. And then really all you— and then I would ask it, uh, you know, code to configure backend server for to serve data at API jobs.

Uh, to to your backend to—

what was that?

Serve data. I'm just— serve data at the API jobs endpoint.

Uh, what was that?

Uh, that's number 5.

This one?

Number— the 5 point.

Oh, here we go.

Yeah.

I'm getting there. Let's see. Folder jobs.js, file code, folder routes, jobs.

Where do I put this?

Uh, I think you just put at the— yeah, I think that should be fine.

Mount the jobs router at the path.

Uh, yeah, I just put it there. I— that's a guess for me too, but that's probably fine since that's where the other app uses are. It's probably fine.

Yeah, there we go.

Yeah. Oh, nice.

Cool.

Um, and then yeah, you basically just want to deploy.

Let's do it. What's that stuff?

Oh yeah, add the files and then cool. And really, in terms of listing the jobs, the only thing is, you know, you, you would basically, uh, you know, replace some of this code from to fetch from, uh, the Mongo database itself, right? Instead of just rendering this statically, you just have some code that basically takes a little bit of what you were, what's in server.js to fetch, you know, fetch this, the same data.

You wanna, should we finish that last piece to connect everything to MongoDB and then wrap up?

Yeah, let's see if we can do that. So yeah, I mean, basically, you know, I would just say code, you know, code to fetch jobs from MongoDB Atlas, you know, you know, and I think that's like, that's really it. I mean, that's—

and it's probably in the jobs.js folder. Should I mention that?

Um, my guess is it'll figure that out. It'll, it'll ask, it'll say, you know, update jobs.js. Let's see, you already, you've already done this, you've already connected, so good. That's good. Yeah, you basically have, you just need that mongoose.connect. Um, Yeah, I would, I would just, yeah, I would just do that. It's funny cuz it's like, it's overkill probably. Like you don't technically, you could all do this all in a single file, right? Called server.js. It's like, it's giving you best practices, so it's, it's like you don't really need like a model and all this stuff, but it's good to have, I think.

Oh, I need a models folder. Capitalizing it.

And models.

Is that normal to capitalize?

Yeah, I think so. And I think in, in Mongo Mongo syntax, uh, JS generally it is, uh, capitalize the model names, I guess. Um, it's interesting as a— yeah, and like the files themselves, I haven't seen that, but, uh, I assume it's the standard. So yeah, then basically just add that, and then yeah, you basically just replace, uh, that little bit of JSON jobs with, that try, that try loop, try-catch.

And do this just below here?

Yeah, you'll, you'll replace, you'll want to delete that, yeah, that one or comment it out.

Yeah, exactly. Cool. Okay.

Yeah. So then, yeah, that's basically fetching the jobs. From that database from and rendering it. And then the only thing you're missing is the front end isn't actually getting the data right from this. Um, that's the, that's the missing piece for rendering it on the, on that URL.

Okay. Or actually from that, from this table.

Yeah, yeah. So you just need to update the job list. Uh, so if you just go to joblist.js, um, you know, it's, it's, it's actually already doing that. Uh, oh yeah, you already have this code, so it's already there. Sorry, I forgot we already did this. Something. Yeah, yeah, in theory it should, it should work. It should get the, the, the jobs, um, from the, from the JS. The only thing it's not doing is it, it's, it's assuming that it's, it's fetching from the same, uh, server. Uh, if you notice, if you go back, um, if it's— if you go to joblist.js, it's fetching /api/jobs, right? Which means it would work if it's on the same server, but because it's on the, the backend server is a completely different place, you're gonna have to update this. So basically you're gonna have to update this and I would ask ChatGPT like update to fetch, you know, jobs from separate backend render web service, you know? Yeah. How do I fetch jobs from separate backend you know, Render instance. Yeah, I mean, basically just that URL needs to be updated. Yep, that's right. So you just have to get that, um, base URL from, uh, from Render. And then just update that URL to the render backend. Yep, that exactly.

That's it. Yeah.

And then deploy it all. There's likely, you know, my guess is we've done something wrong, but well, one of the deploys worked.

The backend works.

The front could be that it's not going to get— it's not— the schema is not matching. But that's, uh, the whole point of Mongo is you can kind of just update the schema on the So it's probably render something. You know, but if you can't actually get stuff, so, okay. So, so I would, yeah, copy that error. There's some, something we did wrong in that module not found, can't resolve, blah, blah, blah. Yeah. Like that's the error. That's the error. That's really the problem. Yeah. I think next session we could probably do like adding jobs, you know, like a form that people can fill out. Fill out and submit to add jobs and stuff. Um, yeah, so what— it's in frontend source job list. I definitely see that, uh, in your frontend app. I see that too. Yeah, so I would just do npm start, uh, to run it locally, because in theory, the cool thing about having a backend frontend, right, is in theory, if you're just pointing to the backend as a website, right, you can just completely run your frontend locally.

Yep.

And just work on it locally for a, and then you'll know it's gonna work cuz all it's doing is rendering the same data.

Right. I put, I go to the frontend, right?

Yeah. You wanna be in frontend. So cd .., oh, that's why you're not going, it's .. to go back up one level. Yep. There you go. Perfect. And then cd frontend. Perfect. Yep. And then, yep. And so it should error, I mean, in theory. Well, there you go, there's your list. So the reason it didn't error— so the good news is that it's not a local problem, which means it's almost definitely— you maybe you just need to run that npm run build.

Uh, where did this come from though? I thought we were pulling from, uh, Mongo.

Did we— we didn't—

we're, we're— it's pulling from the web app, which basically means that your deploy succeeded for the backend for the commit that has the job statically rendered.

I see.

So the— this is not— the, the backend is not running locally. Um, it's just the frontend folder that you're running, right? Um, so the frontend is pinging the, that actual render server right now. So the render server is broken in the sense that it's not pulling from, uh, from the Mongo.

Uh, this is a different one.

The deploy, the deploy failed.

Yeah.

Which is good. I mean, it basically. I mean, what you have here is basically, you know, that your frontend is working locally, not on render, which means the build process is failing in render. That's the only difference. Besides that, it's just running code. So I would run the build process locally. I would run that npm run build. And commit that and see if that fixes things.

That's on the backend?

No, you can do it anywhere. Like when you're, when you're committing code, it's going to commit to both and deploy both every time. You have only one deploy for both. So yeah, I would just run that. It doesn't really matter as long as you're within the compclinic folder. I think it's git is kind of It's gonna be run on that whole folder. And then you had to deploy that. See if, see if that fixes the issue. Yeah. See, it's, you haven't committed that file. Git add dot. You have to do git add dot. You can't skip -a will not skip that part. Will not do that part, I think. Yeah, there you go. There you go. New file. Yep, that should fix it. Yeah, there you go. Okay. See, it's just small stuff like that, you know, like you didn't, you know, you, you somehow that file didn't get pushed up.

Yeah.

But if, if, if it's working locally, I mean, the cool thing is you should, if it's broken in production, you should always try to get the same issue locally, right? Because the feedback loop to fix it locally is gonna be so much faster. And it, what it means most likely, if you can get it to work locally, is that there's some issue with that compiling build process. Ideally, we would live in a world where you don't have to compile, right? It would just, you could just like PHP, you don't have to compile, but that just means it's slow. And JavaScript's like way too much code, I guess, like it would be so freaking slow if it wasn't compiled. It didn't used to be. I mean, all this compilation stuff is kind of newish, um, server-side stuff. But, uh, I mean, maybe not newish now, but I'm sure people, if people watch this video, they're going to be like, no, you don't understand the history of JavaScript. But they're right.

This is, this is it. This is the one.

Yeah, I mean, in theory, if this works, I mean, there's always going to be more, but yeah, I mean, in theory, that means you have a URL, right? Anyone in the world can visit that displays the content that you want. Uh, ideally that content is coming from a database that you can easily update. Uh, and yeah, I mean, that's really the bare bones of like, you know, like basically, you know, if you're building Airbnb, right? This is basically what you do to start. Uh, it's just that the MongoDB would be, you know, listings.

Yeah.

Yeah. Right.

Um, module not found job. So it's a similar issue. You don't have that models job. Uh, is it in the folder models? No, it's in mode. So you just have to, uh, modes. You just, uh, yeah, rename that folder. So it has to be called models. And you're gonna have to do a git add. again. Yep. Commit, blah, blah, blah.

I don't know, I'm psycho and like doing git status every time.

Magic is nice when you, you know, you have faith in the magic, but that takes time to build.

Okay, back at it.

Let's see. So it's still— yeah, the front end is really simple app. Yeah. Oh, it is, it's working in theory, right?

I mean, it's getting something.

It's getting the empty— it's getting the empty, uh, uh, uh, table from— because it's— if you go to the code that you have, my guess is it's looking for a collection, you know, that Like, this is what's nice about Mongo and what's terrible is it, it will, it won't fail. Right. Um, will work. So if you go to models job, I guess, uh, you know, it's, it's, it's doing this thing where it's, you know, it's like, it's, there's this magic happening, right? Where it's looking for a job. Uh, but where is, where is it connecting specifically to Mongoose? Where's that code? Uh, like if you go to server.js in the— yeah, you see how it has all this mongoose.connect— I'm pretty sure you need that. Um, I don't know why it was able to try to get there without it. Um, but if you notice, like for example, if you go to job.js, it's doing mongoose.connect. Oh, it's not even doing mongoose.connect. Weird. Maybe, maybe it just works because it knows it's using the same instance, I guess. Um, so you don't need to—

maybe it's empty because there's no data that's got this model within.

Yeah, and, and it doesn't have— yeah, so I would, I would probably copy paste this whole thing, uh, into ChatGPT and say like, you know, how to create sample data MongoDB, you know, Atlas for this file.

Right?

Basically, uh, how do I create the data, um, you know, the sample, sample data in MongoDB Atlas? Yeah, it's just, it's probably just got too long.

Just that.

So I would just start a new one and literally give it no context and just give it that, and I think it has an— there should be enough clues in it with, you know, Mongoose, et cetera, to figure it out. It'll be, you know, it's gonna give you some of these basic things again, but. Yep. Yeah, I mean, so you have this connectDB thing and then you really, oh yeah, the seedDB, I guess. It's basically writing code. But I, I would probably do it. I mean, the nice thing here is then you can kind of update the code and hit a button and it'll just seed the database. So this is actually kind of nice. You can skip right to the add a, add connect db.js. Oh, yeah, the, the big, this one.

Yeah.

My project folder. So I guess here.

Um, I would just do it in, uh, backend. Yeah, backend. Yeah, backend is better.

I need to run this.

Probably need to run this.

Um, you probably already have it, is my guess, but Um, yeah, I think that's fine. And then you just also need that seed DB. And then one small thing is it's assuming you're doing it in the project folder, so you have to update that require const job equals, uh, You just, it needs to be updated to remove the backend folder. Just the relative path is one. Yeah.

This one is it? Exactly.

Cause you want it to, yeah, it's already in the backend folder. And then yeah, I would just run this code.

And this didn't have that issue.

Okay.

Yeah, that didn't happen. But I think if you just run that node cdb, Um, connectDB is not a function. Like, how do you— how do they do the .env stuff in, uh, server.js?

Is this what that's called, by the way?

Mongo URI. Yeah, so that needs to be updated. That could be the reason. Yeah, try now. Oh yeah, nice. There you go. Sick. Good catch, man.

Thanks. All right, so refresh.

Oh, boom, boom. I mean, now I would go to, uh, MongoDB Alice and just confirm like what data that script— that script did it properly, right? Yeah. So we did it wrong, uh, which likely means that's what should happen. Uh, now we know. Uh, so, you know, it's like technically it works, right? So you don't even need to correct it necessarily. But anyway, I mean, you have, so what do we have? I mean, you basically can do whatever you want here, right? You can make it as pretty as you want. Is it because that's just static HTML CSS. And then the backend, you know, it's, it's hitting the backend. The backend is just serving as a router to get information from the database. The backend is nice to have. In theory, you could get rid of it, but you know, over time you want it because you want to do things like validations, right? If you're adding a new row, you wanna make sure it has some constraints. That's really why you use code instead of no-code tools. It's like that logic. That kind of conditional stuff is hard to do with no-code. And, and, but yeah, I mean, what else? I guess next time if you want to do it again, we could probably in another hour and a half or so do like, we could probably create a form on the front end that submits and creates a listing.

To start out like kind of copying their approach here. I imagine if I added a salary, like you were saying, it would take me to a form. So I'll probably just have like an add salary button that takes me to a Typeform where they could submit like, you know, some kind of their like job offer. And like I'll have somebody or like me, I'll just like manually verify everything and like myself. So like I, there doesn't need to be user accounts at this level. And I'll probably find a bunch of, find as much data about like healthcare comp. To like have something to splash on. But like once I have 1,000, you know, or some, some like strong number of like sample compensation data, then I'll like start refreshing it on them.

And the other nice thing is if you do it, if you learn these skills, like you haven't spent any money, right? Like if you were doing this with like all these other tools, you'd spend like a few hundred bucks on like, a month on SaaS, right? But anyway, I think we made some good progress. Yeah.

Yeah.

I mean, I've never built anything with React Express.js ever, like, right. But it's, I've done it in enough other, you know, stuff that it's like, oh yeah, I can, I can, you replace this part and this part and like, um, yeah. Having like two folders for front end, back end. I've never done that before. Um, but that makes, it makes, I can see why you would have like basically them completely separated. And now I'm like, oh, Gumroad should probably, like, we should probably do that at some point.

Yeah. And, and I like it, like how we kind of separated, like this is just standing up the application and the next session will be about like, well, you know, let's actually build a little bit more functionality and, and some logic into this so it's actually useful to—

Yeah. Yeah. To me, I always am focused on getting a URL that people can visit. Yeah. That renders database data.

Right.

Because at that point you have everything, right? You have the database, the backend, the frontend, and then the user experience, you know, you have the pieces of this entire experience. And then at that point, yeah, you can make it pretty, you can add more data, you can do whatever.

The idea is like, I'm gonna, I wanna give users a bunch of value that's kind of unique that doesn't exist today. And then also like, like have an add salary button so we can actually complement this with this data with real verified salaries. But I need a way to like attract users to like get them to, to eventually like add and contribute salaries. So basically the idea was, well, I'm just going to scrape a bunch of existing job postings from a bunch of different sites that have like physician job postings with salary data. And then visualize that salary data based on like, they all post job ranges. And so that's like, what is the frequency of all the different job postings for primary care? Like, what's the frequency that these ranges overlap? So it's kind of an interesting way to visualize that the most, the highest likelihood pay is going to be right here. So what is it, $275K for primary care? OB-GYNs are closer to like $350K and anesthesiology is close to $500K based on like the density of the like job postings. I've used ChatGPT entirely to do job scrapers for both Doximity and LinkedIn. And most recently in like a couple hours ago, only like probably 45 minutes of working with it. Was able to put together this table. So I'm now feeling like a data scientist with ChatGPT.

That's pretty— oh, so that's real data using the data in the Google Sheets.

This is real data that I used. Yeah, exactly. It's just in this job scraping bucket. ChatGPT created all of this. So I basically wrote a bunch of scrapers for—

I'm curious if you have like the chat log.

I, uh, even better, I thought I might actually continue to do this over and over again. So I just kept copying and pasting.

Oh cool.

All of the key prompts that I used.

So there was like, oh yeah, nice.

Probably 12 key prompts that I used, um, to, to ultimately create the, the scraper. Um, on the scraper side of things, like, what was fun too, I'll have to like I'll have to like rotate all these passwords again, but it's like kind of learning how to rotate proxies and user agents to like, not, I didn't know any of this, right? And ChatGPT was able to guide me through all of it.

Yeah. And this is, I mean, the reason you were able, you wrote this code in the first place is basically, I assume you saw some sort of error, right? And what, and pasted that into ChatGPT. I, and, and it was like, oh, this is what's happening. Because I feel like this, what's, you know, like if you, if you pasted this into Google, you might find like a, all these results. But what ChatGPT does so well is it kind of tells you the context of like, well, what actually has happened? Like why, you know, it'll, it sort of is like, oh yeah, you need to, you're getting rate limited by IP or something, you know, and you need, here's some Python code and like, yeah, it's just fascinating. How much better it can— it is at that kind of thing.

Yeah, exactly, you nailed it. Like, previous versions earlier in the week, um, like after I— my own IP got banned, um, not banned, it was just like rate limited, it was like, oh, you could use free proxies. So I had a whole other file that was dedicated to like trying to test free proxies, and then if the test was successful, then, you know, try to scrape, um, But after like probably a half day of like banging my head on the, you know, table with that not working, I just finally asked ChatGPT, how the hell do I use paid proxies? And so it guided me to, uh, like even with this provider IP Royal, it's like, here's where to go on the page, here's how to download them, here's how to— so it was pretty incredible. Um, so that basically brought me to, um, having, uh, in this case I had to go through it and parse through a bunch of files, but, you know, a bunch of different files for Doximity jobs. I did a little like little post-processing on Google Sheets and then kind of like just with what I had in front of me started like trying to think through like what ideas can I put together that I can build a product around. So like one of the ideas well, I'll just mimic levels.fyi in a way that makes sense for the healthcare industry. So that's how I got through this idea. And this basically says, given a specialty, given the job range and the frequency that that job range has, you know, where does— like, how does pay within this specialty, like, look? How does it work? Um, and so that, that's what this provides. There's another idea which is like you know, my friends are about 30 years old and they're just starting their, their jobs. Um, and so it's like, what does your 10-year kind of earning potential look like? I didn't really like this idea. It didn't seem as attractive as the one before. Plus I then had to also scrape residency data, which I scraped— I just like manually entered this, but it seemed like a lot more work. So that's how I opted with like basically just taking the data dump that I have. Which I think it's a few hundred, uh, job postings with salary data. I filtered out the ones that don't have it, um, and then this to basically arrive at my MVP. So this is my MVP. Basically now the next steps are, and what I'm working on right now, is basically take the CSV, toss it into Mongo, render it. Yeah, take that like, uh, Mongo data put it into a table, render the table, and then somehow basically take— this will be a fun one— take this Python data or Python code to render this image within the browser. So the dumbest idea, which I'll probably just do, is drop this PNG into the the page. But I think like the, the other idea would be, well, can I just select on these specialties and have it, you know, populate? Um, you know, like I, instead of clicking Amazon, I should be able to click on like cardiology and that would bring up a, you know, a new tab in the same way that Levels does.

So what do you think?

Yeah, I think it looks great. I mean, I like how you've boiled it down to the components for the MVP. And, and also like this, it's sort of like this progressive fallback, right? Of like, if, if, you know, if you, if you can do it with interactive JS, awesome. If you can't, it's still there as an image. So there's still some, something you can still ship, right? Uh, you don't have to like have this pie in the sky idea. Um, and yeah, now you have sort of schema as well. I mean, you don't have to keep all of this in Mongo, but right, we can decide what we want to, to, to have. But yeah, we basically, I think that makes sense. Like basically the first step is to basically get ChatGPT to give us a script to push all that stuff to Mongo.

For this session, I think like to, to build a product, I think like it would be You know, a huge win for this call if we were able to like complete the code to dump it into Mongo, render it in a table, and at least toss the like the PNG into the view. And that's a big one because it wouldn't take long for me to like, you know, add a logo, add a module to add salaries, store the salaries somewhere. Yeah, it's like a couple hours.

So awesome. Yeah, let's try to see how far we get.

Cool.

Um, so where I left off just before we hopped on was, uh, so I asked ChatGPT to basically import the CSV. There's a couple errors. I did install like MongoDB DevTools. It told me I need to like update the schema, so I just asked it like, will you tell me how to update the schema? It asked for a row of sample data, gave me some code. My hunch was like, there might be some cases where the state is null and in some cases where, you know, I want, I want some sort of like required key. And so I had it fix that. Now I have basically Go back here, not the routes but my models. So I have the model correct, we have jobs referencing that same data model, and so I think the next step is to connect to the DB and actually— now that the schema is updated and the MongoDB command tools are installed, now I actually need to import the CSV.

So here we are.

Okay, now that I've installed, you can use import command. Next, open a terminal or command prompt, run the following command.

Is that just— I need to run this command where this is my connection.

No, you probably don't want to be doing that in your .env file.

I'm just doing it to copy and paste.

Oh, got it, got it, got it.

I'll eventually do it in my terminal.

Then my path to CSV, the path to CSV is this. Copy path.

Do I need the entire thing or since I'm already in job scraping, do I need job scraping?

No, if you're in that folder, then you can just get everything except the file name.

Yeah. Okay, perfect. So I need the slash.

I, I think you can even get rid of the slash.

Yeah.

Nice.

Okay.

Yeah, super clean.

Cool.

See what happens. I love how it's like one line of code. It's like not even any, like, I thought it was gonna add, like, write a Python script.

I know, pretty, pretty straightforward. It gave me the option. It's like either you can do one or the other. Okay, so it says imported the documents and zero failed. So I guess let's go over to the database, browse the collections, go to my test jobs, and here they are.

Okay.

And then close. Yeah, I mean, so, so, you know, these two that you were the ones that we added prior, right? I mean, you can easily delete them. Yeah. But you know, if you were— yeah, there you go.

Easy.

Love Mongo. Gotta love Mongo.

Yeah.

Now let's see. So we just changed the database and it's all of a sudden uploading. Okay. What is rendering on the front end? Okay, so we just had job compensation. So we need to update this code to, I guess, render all of the data and—

Yeah, like write HTML from, you know, Mongo collection. HTML table. Yeah.

—file folder.

So it's, it's kind of guessing, but it's basically doing the same thing, right? It's just editing the bad— that thing at the bottom. It's instead of a list, it's just going to do an HTML table. How does it know? I guess it knows from the top. So yeah, that's awesome. I would just probably just copy that table and just replace it with the table. Oh, really? That easy? I think, I think so. So yeah, I think that should work. I mean, it, it, it guessed, I think, at the column names, so it might be off a bit, but we'll see. It'll probably just like have some weird, you know, nulls or undefined data, or it nailed it. Who knows?

Yeah, I just asked it just before, so yeah, got—

seems like we got them. Awesome. And then in something like this, if you have it run— like, if this is just front, uh, front-end changes you're making, so if you run it, if you go to the README and you just— I think we have the the logic to just run the server, the frontend server, then you can even test this like super fast without having to deploy anything. Oh, it didn't even work anyway.

Oh, I'm still on job scraping. So really?

So I can just go here?

You'd have to run it locally, but yeah, you could do— you wouldn't have to deploy even. So this is on the server, but if you go to your README, Yeah, here you go. Uh, yeah, so if you just do npm start, will it have— there you go, will have the data. Yeah, it should in theory. I mean, it's, it's connecting to exactly the same place, right? Um, so yeah, it should have the— it should have access to the data. So if it does— if it doesn't, that means the code is probably just incorrect, um, is my guess. Yeah, so I mean, I don't think you'd have to update any code in the backend, right, to get it to— for the new data. So yeah, I mean, I think you can just render the front end and it should go, you know, should be getting the data properly from Mongo. Okay. The backend would only be if you're now, if you're looking to add additional functionality, like a new route, you know, like a button that has like some, like a new API request, right? A new API method. Yeah. Which we'll do, may do later, but.

So you're saying then this suggests that, is it like saying?

There's something wrong with this, yeah, jobs.map. So I would do some— like, there's— yeah, basically there's some reason this jobs is being set to nothing. So normally, yeah, just like console.log the jobs variable. I would console.log data in that fetchJobs function. And that way we know, because basically jobs is just being set to data. So yeah, you can just do data. Yep, exactly. And that should basically return that, you know, that table. It's logged in the browser console, so you would go to Chrome, refresh, and then it should be in the console. So yeah, there you go. Array of 234. So there, so that, that, that just proves that the data is there, right? Right, right. So now the only issue is effectively in that rendering. And this is like basically 99% of engineering. It's just like basically like where's the bug? And just narrowing down the possibility for where it could be until you've like found it basically. And so I see this whole code into, um, yeah, I would say that, sure. And like, why is this not showing any jobs or whatever?

Nice.

Okay, this is my So it doesn't think you're doing anything wrong.

How do we— I want to know how we accessed it before. Did you say we can look at like the previous, like the previous code here?

So you see on the right you have an unordered list, and that list is, you know, has a bunch of line items in it, right? So it's looping through the jobs and doing this like li versus on the left, basically the same thing except it's creating table rows with key instead of index. So basically the difference is that, you know, you don't, you have this, you only have job on the left versus you have job and index. So I would just add index and, and make them the same and change the key to job.index or index. Yeah, instead of job.id, just make it index just to mirror, you know, what we, 'cause we know what we had before was working right in terms of rendering those 3 or 2 jobs. And so yeah, this should work. If it doesn't work, then my guess is that it's sort of— and then we might need to just refresh one more time just in case. So if you open up the console, weird. I would maybe do go to your DOM. And like go to like elements and like, yeah, view the, view the tbody and oh, there, there they are. They're created. So you just have to, it's just that those, those strings, see, this is like, it just, this is what software engineering is, right? It's just like figuring out what the bug really is. Uh, there's all of these potential culprits for it. Actually none, like so far, basically like none of the code is wrong. Uh, so yeah, basically instead of, uh, yeah, you change title to job.title, so it should just be job.title. Uh, and I would just make sure, I mean, you could probably just tell, this is maybe a good thing for ChatGPT to fix if you just say, you know, this is the old code, this is the schema update, because basically it just, it's just not accurate.

Yeah, this is the old scheme.

I think the new scheme is, let's see, yeah, it is job title. We're good. Yeah. Okay.

So going back, you could print in a, in one of those TDs, like just job and it should just print like a JSON object. But at least that way you can, I think if you just said, yeah, job. Yeah. And I think Is that like this? I think that works. It's— yeah, sometimes I just try a gazillion things at once so I only have to do one refresh. Uh, well, yeah, there you go. It's definitely getting the— you know, it's a, it's a, it's an object with keys, etc., etc., etc. So it's definitely working. You know what, it's just interesting that it They, it looks like the keys have spaces in them. So my guess is that, I mean, this is a good one for ChatGPT, I think. Like if you, cuz it'll know what you're trying to do. Okay. Like print, print job and then it'll, it should, it should fix the code to do it. I don't do a lot of React, so I'm not sure how you do a lot of this finance fancy like console logging. Probably 6 months from now, all this stuff will be built into Copilot too, which will be nice.

I, I finally tried Copilot and yeah, I wanted a little bit more out of it. I wanted more of what I'm getting out of ChatGPT.

Yeah, ChatGPT is definitely more helpful in my experience. But won't be long until they're more closely together.

Yeah. Browser says Boom. Simply remove this.

Job list.

I knew to cut out the headers relevant. Oh, it just removed. Yeah, see.

What I've been doing to just like kind of learn and sanity check like what I'm see— what I'm getting back is I'll come over here and I'll just come— I'll copy on the right like from ChatGPT and just compare what exists today. Oh, fine. I mean, what's actually changing?

The only thing it changed is it took out that job, did it?

Yeah, that was it.

Which is annoying. Yeah, I would say print job object. Like you want it to print the job object, so I would just ask, ask it to. Yeah. And that pre is just like, it's just HTML for like code basically. But yeah, that's awesome. That should do it.

I'm gonna move this more and more towards the middle. There we go. Okay.

I mean, so you've confirmed that the data is definitely there. Right. It's just job.title. Yeah, it's not— it's not— but that's because you've converted it into JSON at that point, so that might be why.

The job object is reading the column names and not job title instead of job title.

Yeah, it's using— it's not using the schema in the CSV, or sorry, it is. It's not using the schema in that file, the schema file.

I see. Yeah, you're right.

It's—

Mongo didn't store the schema.

This is like the beauty of Mongo, right? Just takes your data and shoves it in and won't try to—

I assumed it would like somehow store like the, the table name and the schema key, but all right.

Yeah, normally if you wanted that, then you would need more than that one line of code, right? You'd have to have like a mapping basically, right? Um, and, and that's that sort of deterministic software engineering job of like, yeah, you'd have code that sort of says this row, you know, this column in the CSV goes to this or translates this way for each one, right? Um, $61,000 a month.

Oh yeah, this has been fascinating just to look into, uh, some, some compensation data for, uh, yeah, it's insane.

Okay, so clearly we need to fix some of this.

Okay, so I'm gonna remove some of these fields. Like we don't need job description, we don't need state, we don't need URL. We should probably, you know, link the title and the URL together. In the meantime, let's remove all the rest of it.

So compensation is good, employment type's good, settings good, created date, special I think that's a good, a good table. And let's see what ChatGPT says.

No open, no refer. Something's off when you delete the, the— you need to delete the headers as well.

Yes, job title to our theme chart.

All right, we have a table.

We have a table.

Okay. Let's say, perfect. How can I make the table bigger?

Do you have any recommendations on how to render or make tables better looking?

I would just say with inline CSS just to start, or with CSS, and we can see what approach it takes. Yeah, let's see what— how it determines prettier. It's a very vague— could be more readable or something. We'll see what it does though. It'll add some borders, add some padding, add some colors. It might do some odd, odd and even coloring in the background.

Okay, I guess what's in the source file.

Jobless. Boom, boom. I would say, I mean, it's a, you know, create React app. I guess it's using dark mode, but you might wanna just sort of set the background of the, of the, of the, of the whole HTML to white or—

That's like 80% of design, isn't it? Just to no whites, no blacks.

Yeah. I love, I love using white and black, but Lots of designers give me shit. It's fun. It doesn't exist, black.

You started as a designer, right? Yeah, yeah.

I was never very good, to be honest, but I have preferences, strong preferences, uh, for other people's work, I guess. Boom. Not bad. That's pretty darn close to, uh, maybe delete the React bits. Just learn React and all that.

Yeah. Where is, where is all this?

It's probably in your index.js. Yeah. Or nope, it's in your app.js, right?

Oh, there it is. Okay.

You could listen to it and add that H1.

There it goes.

Yeah, let's see how far, uh, do it like a P and see what it would do for a P if you added like— it would have guessed. It's funny. Yes, this is— oh no, button or link maybe. Nice button, funny. Yeah, I mean, you could use that button for, you know, like, uh, add, add job or whatever.

Nice, we got an input field, we got a, we got a job.

Yeah, we could do that. I mean, that's really easy to do, to be honest. You could probably just ask ChatGPT to do like real time, you know, add— you would just copy that whole thing and just say like add real time. You'd probably want to move that to the job list itself, is my guess, that jobs list, uh, file, those, those two, the input and button.

But yeah, let's see, you mean like here, take it from here and—

yeah, move it to the job list itself.

Yeah, exactly, move this above the table like that. Or what do you mean?

Yes. Yeah, exactly. You're gonna have to wrap the whole return, oh, in a div, I think, because you can only return a single element. You can't return like a list. So you just have to do everything in a div, I think.

Yeah, there we go. Okay.

That should do.

It might look weird, but yeah, there you go.

Okay. I'll add a— should we add a filter or do you wanna move on to that?

Yeah, honestly, it probably will take like not, not too long. So yeah, let's just do it now. I think just copy that whole thing and just, I would, I would copy the whole file and just maybe even in a new window so it has more context to use. But you could even just, yeah, just say like add real, real time, add frontend you know, JavaScript search filtering. It should know exactly what you're referring to, is my guess. This is the kind— this is the kind of feature that I really think in the next few weeks there'll be, you know, Auto PR. I just saw something yesterday that you just, uh, can run it on your repo and it'll just turn all your GitHub issues into— it'll just try to write code for them. Yeah, you don't even need that search button, I guess, because it's just doing it in real time.

Oh, nice.

What else is all changing here? That search useState—

is this like some React stuff?

Yeah, it's all it's doing is adding those two functions, search, handle search and filtered jobs.

Predicting my errors. Okay. Print everything. Sahil Lavingia.

Yeah, so it's only searching for the job title. Oh, it is? Okay. But if you wanted to, you can change it. You know, we can make it so that it's doing a job title and location. Job title. I assume those two are the most common anyway. Maybe specialty as well.

But Anything else? Uh, let's just do specialty.

This is why I think code is going to beat no-code. It's just like stuff like this where you want to be super specific about the UX. It's only like one line of code, you know? It's like not that much code to actually do.

Uh, frankly, like, I've tried out some of these no-code builders, like Even for this, like, the very first, uh, attempt at this was, uh, is it Bubble?

Bubble, yeah.

Um, and like, yeah, I could not figure it out for the life of me. Like, I still had to go through like the kind of like mental gymnastics of like building out a data model, which, yeah, I already had like an idea for. Um, but it's like using ChatGPT to code so far way easier than trying to use Bubble and do it all manually.

Well, there you go. filterJobs, that function, I think is just the only thing you need to replace. Two methods down. Oh, here, what's up? So this is a good one to just do a comparison probably and see what it actually—

like in the git diff Either way, now we know.

Yeah, nothing has changed. Cool. Where'd it go now? Sahil Lavingia. There we go.

That's sweet. Nice. Okay. I say, kind of going back to our Figma, let's like render this image and call it a day.

Depending on the library, it might be possible that the JS library itself is able to do that magic transform of the, the data, right? Like it might be that you can just pipe it in. And so that's kind of what I would ask ChatGPT is like, given the data, how would I, you know, display it in the front end? You know, using JavaScript, you know, React, you know, as a bubble stack chart or stack bar chart or whatever this is called.

Yeah, it's just a—

I don't, I don't know, this is the more PM-y than—

but yeah, I think we're pretty close. Yeah. So you were thinking of actually like trying to get it to render in the front end?

Yeah. All right. Yeah, just a JS library. I mean, what is this? Matplotlib. Yeah, basically, you're trying to replicate this, you know, but with JS.

Why don't I just ask it? So this is the— I was just using this like an hour ago.

Yeah, maybe just say, you know, I have a website. That, you know, da da da da, and see.

Website that uses, uh, See how far we go. Frontend, stores, probably within the stores, gallery chart. It's in the wrapper. First install all the packages, probably just install them on the frontend, right? Oh, it's still—

yeah, it's kind of slow. Sometimes I would just kill it and start again with a Ctrl+C. I don't know, sometimes it just is weird. It should normally not get stuck that long. That's weird. Is npm down or something?

Okay. No, nothing weird. Kind of a bummer that this is getting hung.

Yeah, I would ask ChatGPT about this. Meanwhile, maybe I'll look into this other library and maybe, maybe see if they have a stacked bar chart too.

Follow the steps to resolve the issue. Clear the cache. Okay.

Probably means there's something to do with your internet connection is happening. Actually, maybe not. Let me try my end if I just npm install some random thing. Hmm. Oh, it seems to be working. It did, it did hang there for a bit, but it's working now on my end.

Okay, hey guys, uh, so as you just saw, um, npm just got hung up and we had to end the recording. Uh, we couldn't figure out why exactly that happened, but, um, the solution was to just restart my computer. Um, but unfortunately Sahil Lavingia and I couldn't continue with the recording. So I want to conclude this YouTube video and part 3 with a video showing that what I did in the couple weeks, a few weeks after Sahil and I met. So just as a refresher, this is the, the minimum viable product that I set out to build with Sahil. This is where Sahil and I left off. Well, we tried to implement the salary chart component, and this is actually the, the finished product with the salary component, so the salary chart component. So I'll share for a quick second how I got that to work because it actually ended up being the most difficult aspect of this entire project, and I think it resulted in some kind of clever ways that you could use ChatGPT that I learned. So as an example, you know, as you guys saw in the video, I already had working Python code. So my approach was to just share that Python code and then get ChatGPT to put this into a JavaScript, like a vanilla JavaScript product. Finally got that to work, but for the life of me, I could not get ChatGPT to just convert plain JavaScript to the React code. So here's what I actually did to solve that. I basically gave ChatGPT the working JavaScript code and I had it, I basically said, okay, just enumerate the steps one by one. So everything from how we process and consume the input data to how we actually post-process the data and feed that data into the salary chart.

So just gonna scroll down.

That basically had— the result of that was ChatGPT gave me a bunch of requirements, and then all I did was feed those exact same requirements back to ChatGPT and asked it for code, you know, line by line, segment by segment. And finally, we got it to work. So that was a really interesting hack that, you know, that took me probably 2 days of going back and forth trying to get it to work. But having ChatGPT tell itself effectively how it should go about converting this code was a really interesting win. So with that, I will go ahead and walk through some of the rest of the features that I put together since this YouTube video. Now, we'll call out, I ended up writing an entire blog about this whole process and a whole tweetstorm about my experience working with Sahil Lavingia. So we'll link these in the YouTube description. Yeah, this is the final product. So obviously added some styling, a working chart component with kind of hoverable interactions, allows users to submit their compensation and has all the proper error handling and shows all of the compensation data once users actually provide it. So that's the finished product. It's now working live at outlier.care. So thanks so much.