Project App Tour

[00:00:00]
>> Scott Moss: All right, so let's get started actually getting into our application. I'm gonna walk you through what we're gonna be building first and then what the finished product will look like and what's expected. And then we're gonna go in and write the mutations and queries in GraphQL to enable that experience.

[00:00:18]
So let's do that. I think I have it fully running here. No, I gotta start it. So if you are on the main branch of the repo, you'll have the fully functioning app, and you can run it by doing npm run dev and you can check it out.

[00:00:37]
But we're gonna be working on the client branch because that branch has all the client code removed. But the main branch is a great resource for you to go back and check out to see how I did it the first time I built it because when I build it here now it might be different, but you'll have a version there.

[00:00:55]
So I'm just gonna run the main version here, and I'm gonna start this up. And for me, for you as well it should just redirect it to some sign in or signup page. I'm just gonna do a signup right quick. So I'm just gonna go to /signup, you can put whatever you want here.

[00:01:17]
>> Scott Moss: Doesn't matter.
>> Scott Moss: And then I'm gonna hit signup, okay? And then it'll bring you to this page here where it's gonna be an Issues page, you're not gonna have any issues. So basically the whole point of this app is called Parallel. It's a play on one of my favorite apps I'm using right now, called Linear, which is a productivity tool which you can keep track of all your tasks and things like that.

[00:01:40]
I really love Linear, so I made a very slimmed down version but heavily inspired by Linear called Parallel, so that's what this app is. And so if we wanna create an issue I can click the Create Issue button. I can give the issue a name, I'm teaching a course, that's what I'm doing today.

[00:01:59]
Teaching client side ql, and then I can create this issue and then it'll show up here, right? And that is the whole point, I can make another one. Hello, I can create that, and you'll get all these issues that pop up, they have a issue ID. And then you can click on this status ring here and you should be able to change it, no, change the status from whatever it was, so changed this to Done.

[00:02:25]
I can change this to In Progress. And we need to enable that, so that seems like if you build apps before, this is not too difficult. We didn't really do anything crazy, it's a simple CRUD operations. But within that whole flow from sign up to being able to edit these issues, there's probably five queries or mutations we need to make in GraphQL to enable this experience.

[00:02:50]
And then there's some setup we have to do inside the repo to even make the GraphQL work in the first place, so there's a couple things that need to happen. So we're gonna explore that setup. We're gonna talk about the different patterns of how we create the queries, where do they go, how do we bring them in, how does it glue together with React?

[00:03:09]
How does all that work? That's what we're gonna do now, but I wanted you to see the experience. There's also some other links on here, we won't be covering any of this other stuff. I left this here for people who want to build further and expand on this app after they've integrated with GraphQL, and they wanna take that knowledge and actually add some more features.

[00:03:29]
You can totally do it. But, yeah, I left that there for extra credit, but there's not enough time in this course to cover all of this stuff, and it's mostly just more of the same of what I'm teaching you. So you won't be learning anything new, you'd just be getting more reps, and you can get more reps on your own time.

[00:03:45]
It's not probably a best use of your time here. You're not gonna be building any UI stuff, no CSS stuff, it's all just GraphQL. You won't even be touching JSX, a small smidge of JSX. I really wanted this to just focus on GraphQL and not let's go make an app, right?

[00:04:03]
So if you're worried about no, I'm a fraud, I'm not good with Tailwind, I'm about to be found out, no, that's not gonna happen today. It's okay, nobody's good with CSS, unless you're really good with CSS, there's no in between. We're only gonna do GraphQL. So I'm gonna stop my server.

[00:04:20]
I'm gonna check out to client, so I'm gonna check out to client/0. So the way I'll do the branches is every time I do a specific topic or whatever, I'll cut a new branch on the client side. So this one will be client 0. When I make a new checkpoint, it'll be client 1, I make another one, it'll be client 2.

[00:04:39]
And I'll keep pushing those branches up so you can go back and look at them on GitHub if you wanna see what we just did. If you wanna see the full complete app, like I said, you can just check out Main, the full code front and back is done on Main.

[00:04:49]
So if you're curious and you wanna see what's happening on the backend, you can check it out, it's all there. But we're gonna start here on client 0, which, if you were to run this, I think the app still runs, you just can't do anything, so let's see.

[00:05:04]
But yeah, it should still run, I just think it's broken. I think I'm gonna have to sign out, though. So to quickly sign out, I'm on Arc, which is basically Chrome. I can open up my dev tools, go to application, and I can delete this JSON web token out of local storage, that'll sign you out, so I'm just gonna do that.

[00:05:22]
And if I refresh, it should redirect me back to, there we go, sign in. So that's how you sign out. Again, that button wasn't in the budget, so that's how you have to sign out. So yeah, if you're on the client 0, you should see this page. If you try to sign in or sign up, it's not gonna work.

[00:05:39]
There's no client-side query happening here, so it just won't effectively do anything. I don't even think there's even a handler for the function at this point, so it's just effectively not gonna work. But we're gonna work through the app from a UI perspective. So first, we need to get the authorization part enabled, so we got to write the queries and mutations for that, and then we'll write the stuff for the issues.