Building Our First JavaScript App with my 40-Year-Old Dad Student | Senior Dev (No CS Degree)

So I want to kind of make like this more real world example.

Okay.

So I'm not going to change your code, but I want to run it in Node instead of running it in Live server and I'll do that today. Is that all right?

Yeah.

And then later on when you want to make it like a real project and stuff, like, because I remember in the call I was like, oh, this is not running in Node js. I don't have access to a lot of node module libraries. Right. FS where so kind of like we're going to make this a real project now as our first project.

Okay. Yeah, that's cool.

So I'm going to put this in GitHub. We're going to call this email generator two, I guess. Is that all right?

Yeah, that works.

All right, we're going to make. So in this here, make this bigger. We have this project.

I want to make an S Projects.

All right, now CD Email Generator two.

Yeah, Email Generator two. Oops. All right, cool.

We're here, right? We have an empty folder. We just started a project. So like if you don't have like paper and pen or something, you're not taking notes. This is like how you would start a node project right here. So I'll make read me first. I'll make readme here. So we'll make a readme. So let's first explain. Let's call this now email generator 2. Let's make description. So you want to write a description of what this is actually going to do.

The plan is to what it's currently doing or like what hopefully someday it.

Will be doing, what you hopefully someday will be doing all the, all the system requirements that we need because we don't want to just go in blind, you know, set in stone what we're gonna do and then hit all those.

Goals, man, I guess big picture, like at the end of the day for any business or any person who like has to send out these emails that are like that, they continue to have to send out daily, on a daily basis to make it so they can build a template on their own and allow it so they can easily identify like repeated information almost essentially make their own or like kind of make their own form for it. Like, so if, you know, like let Phil is going to send out, blast out like 15 different emails, you can be like, oh, I want to. I need my name and I need the time and who's this going out to? And then you start working on. Start typing in your template and then. Or typing in the Standard stuff and then identify. Easy to identify the variables that are going to change.

Okay, so high level description in one sentence.

Template builder for something that saves it, I guess like email template builder.

Right. Okay. What else? Email template builder, flexible. Can add inputs. Right?

Inputs. Maybe like date stuff. Because I know right now it's only copying if you type in whatever. It's not going to actually be a time. If you said your session was at xyz, that's what's going to show up. Because it's not actually a time.

Okay.

I'm just trying to think about how we can scale it up from just, you know, like this kind of like. Wait, where is.

Where did we make our thing?

Email generator.

Right. Oh, changed it.

All right, we can make CAC name, client name, instructor session time.

Yeah, so be like. It'd be instead of like a CAC name, just be like from who. Who's writing this? Because it's going to be at the beginning and closing from. And to maybe instructor and time.

What's dates, Dates and from to. Cool.

And then in the end we probably want this program to be able to send the email too. Right? Right.

Yeah, yeah, I know like the mail to thing and I, I was looking at that because you showed when we were hanging out in the lounge and like so that was pretty dope. Just hitting the button and having either the. Your default email or even like I was looking up for Gmail. You can toggle a few things on your gmail so the mail 2 actually works for your Gmail.

So we'll be able to send emails straight from our app. So there's something that I want to teach you while we build this project. Because I foresee this project. It won't finish today, it won't finish next time. It won't finish. Yeah. You know what I mean?

Yeah, I figured it'll grow.

So I use this thing called nodemailer a lot. Right. It's a mail gun for the back end. And you set up your SMTP so you're going to learn a lot during this project.

Okay.

You're going to know how to make a Gmail and you're going to be able to make it an SMT email. Email. And you're going to be able to allow other clients to send mails from there. It'll be sick. So we'll be able to like send emails straight from our app from email generator too. And then what else can we do from here? Flexible. Can add inputs, extra inputs. Let's say like, oh, I need like I Don't just need from, to, from and to. I don't need just session time. Maybe I need sign contract date, deadline. And you can. And you can add. Yeah, right. And it'll become. And then maybe in the end maybe even text. Maybe we can generate something with chat, GPT or something and then it can automatically be there headers and footers.

Because like, I was thinking like, you know how canva has made a lot of things like really easily drag and dropping on stuff. And I know if you said like, hey, I do need this contract sign thing. Like, oh, I need a new input. It's contract sign date and then you drag it up to the top and then it's like the squares may be like a blue square if you want to add it to the email somewhere. And you could kind of drag it and drop it over the text maybe. So it's like you can. The user can visually see it where that date's gonna go.

Were you on a drag and drop feature for?

I. I'm not entirely sure yet because I think it could happen also with like Mark. Yeah, I think you can address the issue with, with css. I'm just not like, I don't know what the best way is. I'm thinking of.

I. I don't even know how to do the drag and drop feature, but we'll figure out it together. So I mean, I want to make like a header builder. I'm just trying to think like if we build this email generator too, right? And someone like you try to go actually sell it, what are people going to actually need? And we should like kind of build that project and like make everybody want to use this email generator too. You know what I mean?

Okay. Yeah, because I was just thinking like if you said I want this input, I want to add this input, but then at some point you have to say where I want this input to go.

Right.

In a templated email. And so in one sentence, I already have the sentence and now I'm going to drag it down to where it, where it goes within the sentence or something else can trigger that. Like, like whenever I type in hashtag closing date, it automatically puts the spot in there. That would be crazy.

But okay, you can try. Nothing's impossible. Right? All right, so we do need to make some checklists, right. About what we're going to do. So the first step is set up Node JS server.

Right.

We'll do then set up public directory to serve HTML set up. We'll just keep adding to this. Okay. Okay. And we do need to make a Trello and we need to. And we do need to make a draw IO. So I will. Let me open up my screen real quick. Trello dot com. So I'm going to create a new board for us.

Email generator two.

Great.

All right. There, think.

Oh, there it is.

Hello. I like Trello because it's so flexible and lightweight. More so than Jira or I mean we could do GitHub too. But let's do Trello for now and then maybe move it over to Git.

Okay. No, I think I'm somewhat familiar with Trello like.

So let's get back to the project.

And action.

All right.

We're gonna set up this email generator to Trello board. So it's very common. You know, it's like a Kanban board. They call it a Kanban board whenever you hear this. It means Trello, Jira, GitHub projects Kanban board.

Yeah, I'm familiar with it. There's a long time ago we used one like a physical one. So that's how.

Right. How old I am Easy to on post. Its Right. Yeah.

Yeah. We had like a huge board with like magnets all over it and all this kind of stuff.

So this week is the fifth to the ninth.

Right.

So we're gonna make. We're gonna kind of keep track of what we did this week. Week for week. And then we're gonna call those little sprint sprints.

All right.

They're usually like a little bit longer, but I kind of wanna, since we meet a lot. Right. Just want to kind of like keep track and I don't want to let like tasks pile up too much so we cannot find it later. And then we'll do the 12th to the 16th and let's see what we get done. All right, so we have this and we have to do. And then we have something like a. I call it a skeleton, like an app skeleton. And then we'll put in like front end tasks, back end tasks. I don't know, we'll think about more things like later. But we'll just kind of separate the front and the back end for now.

Okay.

We'll call it green for the front end. Then we'll do yellow for the back end. And before we get into this. Right. I like this website called Draw IO. It's a flowchart maker. Have you ever used this before?

A long, long time ago. But I know like when it's using it for database stuff. And then like I've used it for like, like who's in Control of what? Like for like when people have multiple hats, I guess, in business. And we use that for like who's actually in charge of this thing.

Cool. So the way I use it is I just like to make a diagram of like what we're actually going to build. So how many screens do you think we're going to need? We're probably going to need a login screen, right? Because if we're going to market it towards other companies, you're going to need more users, right? You need login. If you're going to have a login screen, what can a user do here? You're going to need a sign up screen, right? So from login you can probably go to sign up, right? All right. And then, and then if you sign up or whatever.

Oh crap, this is the square one. We're going with this.

Then we're going to have like some kind of home screen.

Right.

And, but basically from here, if you sign up, you'll probably go home. If you log in successfully, you'll probably go home. Right? Cool. So then from home, what is home going to have on there?

Probably like my current templates. Create a new template type of thing.

Okay, so some kind of navigation screen, right?

Yeah, yeah, navigation screen.

Maybe like a profile thing, I guess, if, if you want to have.

All right, cool.

So then you'd have something like from home you could say. What did you say? You have my templates, what else do you would you have?

Create it. Create a new template type of thing. All right, create new.

Oh, cool.

And then maybe like, I don't know, like public, I guess, if people wanted to like, I don't know, like, kind of like just like the show and tell type of stuff. Like, hey, I made this template for people who are like in the baking business. And I don't know, I don't know what is. But maybe it's like so you, you'd have.

Okay, so from home you can go to my templates, right? From home can you go straight away to create new template or do you have to go to my templates and then go to create new template?

You could pro. Go straight to it from home because like that way it's like, okay, I can start immediately once I, once I log in.

All right, and then you can probably go to. From my templates you can probably go to create new template, right?

Yeah.

All right.

And then what else do you think we, what else do you think we need to make the feed screen where people share templates?

Maybe I, I just, I don't know, like, I think for business wise, I. I wouldn't care. But at the same time, you would want to see how powerful the thing is and you might need to see that through somebody else's work. Does that make sense?

Yeah, yeah, yeah, definitely.

And so that's like a whole feature, you know, like a template feed kind of thing. Share feed. Right, so template feed. Right. Or something like we'll call it feed for now, but. Okay, from home you can go to template feed.

All right, cool.

And then you probably just need some kind of settings screen too, right?

Yeah. Settings to like file or like even just like log out. I don't know if that's. I mean, most people just turn off their. I know I do. I just shut my laptop over an X. I don't think I've logged out of anything for a decade. It'll take care of itself.

All right, so I think this is enough for now. Right. This template part is going to be quite huge. It's actually a very huge feature and I'd rather, I'd put this like as a lower priority for now to be like a strong base for. If we're going to have login and sign up and stuff, we're going to need a profile and settings definitely where you log out and you reset password and all that, set your profile image and then our. Our big meat of the project. Right. The one that is different than everyone else's.

Right.

Is probably going to be the my template and create new template. So these two need to work for the. Everything else to like be our own app, I think so. I'll share this diagram with you for now and let's work on it together. And if I share this with you, you just need to. Stickers are amazing. All right, so we have this. We have. We're gonna build this out at least. Right. So we kind of have a skeleton. Right. So we have authentication, we have settings, we have the my, we have templates kind of stuff and we have our navigation. Right. So we're kind of skeleton. All right, so we have the email template stuff that we have to do. I know this is boring, but this is. We have to set a plan and set goals from the beginning or else the project will never end because we keep adding on to it.

Right?

No, no, no.

Yeah, it's not boring to me. It's just a part of like, I, I wouldn't like, I have an idea of how to set some of the stuff of my own, but I've never broken it down to this level. So well, it's good to see it how it's going to happen regardless, right?

Yeah.

So settings and then we have our home screen. We'll call it the navigation screen for now. So we have emit email template. We'll call it. We'll make it orange. Make that purple. We'll make that blue. And the home. Need more labels.

All right, we need. Let's do. Oh crap. Edit legs. Now we need.

Dude, I'm gonna go in there and change all these colors on you.

Go for it, dude.

All right, wait, Fuchsia. All right, there we go.

All right, so edit label. So you cannot change it on me. I'm just going to label the.

Label them back end email template authentication settings.

All right, so now we have kind of like a. A basis of like how are we going to tag our. Right. So we got to make sure. So then there's also like front end. There's also ui.

We'll just make UI too.

And we'll make him some pretty pink color.

Right? All right, cool.

We got to make up a login ui, right? So I'm just gonna make these like very simple for now and I'm not gonna. We're not gonna worry about CSS that much.

Okay.

But the login UI definitely needs to have an email or do we want to use phone number or some kind of. Do we need like two inputs in a button? Right.

I guess. And. And I don't know, like, it's like a personal grief of mine. So I don't know like how hard it is to set up like, like what kind of work I'm adding to this project that I haven't really done anything on. So stop me if I'm wrong, but I really hate any website that makes you log on first to like.

Okay, try it.

So in my mind it's kind of like if you don't log in, you get to like mess around with the template, but it doesn't save anything. Like it's just like a sandbox and it disappears. So I don't know if that's.

We can do that.

I have no idea what that entails.

I know. Kind of we'll make it a modal. Just chill for a second. Okay, now we need the sign up form UI and these. Front end task UI authentication. Front end task UI authentication. All right, now what else do we need? Let's look at our email generator too. We need our home screen, home screen ui. I'm sure we're going to have more tasks later. It's going to be a Front end task. We need our settings screen ui.

So when you have the tag that's for the backend. Is that like when you're talking about with the person's like profile or of them saving a template that's like the.

Back end part, right? Saving the template, signing up, logging in.

Okay.

Like maybe saving picture. Like. Yeah, like anything that needs to save anything.

Okay.

Say like, like I'll make one like setting up Node js, Node JS and Express. That's going to be a backend task. So that's what's going to run our, our basic app. Right.

Okay, let's back in. All right.

And then we'll have one more. We'll call it bugs.

All right.

Setting up node JSON Express, setting up.

Nodemon or save to refresh backend and.

Then we'll have like create template form be a front end task. I. I think we have our hands full for a little while.

Yeah.

Post template form, backend, endpoint. All right, Backend now, card backend, email template task. This can be email task.

All right, so I think we have our hands full for now. So we have a plan. All right, so first one that we're going to do together, setting up nodemon and setting up Node JS Express server. And we're going to have to pull the kit today because I'm going to teach you how to run the server.

Okay.

Okay.

I didn't know we're going to make the Trello board so fast. So let's just get rid of this here. My wife is home, so I'm going to close the door real quick.

I'm going to get some water.

All right.