Level Up as a Developer Through Practice

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone. And welcome to another episode of Learn with Jason. Today on the show, we have Shem, I didn't ask how to pronounce your last name, I'm gonna get it wrong. Shem Magnezi, am I right?

SHEM: Pretty good!

JASON: To make sure that I did, can you say your name so they don't mispronounce it if I did.

SHEM: Yeah. Shem Magnezi, if you know Hebrew or Israeli, it's easy, for the rest of us, MaKenzie, whatever you like.

JASON: All right. Perfect. Thank you so much for joining us. You and I met at a conference and spent a little time together. But for those who aren't familiar with you and your work, do you want to give a little bit of a background on yourself?

SHEM: Sure. I'm Shem, I'm a software engineer for, I don't know, the past 15 years. I started in small start ups around like backend stuff, data engineering, big data. Then I moved to the dark side. A little bit of user interfaces. Started with mobile and iOS and Android. And then moved to web apps, mostly React. I have been, as I said, a very small startup. Then I moved to big ones, AVG in Israel. Then WeWork. And then Meta, Facebook. And then a year ago I started with a couple of my friends, Wilco. And I'm the CTO and co-founder of Wilco. I think this is like the main thing that we're gonna invest time here. And this is a very cool tool that we have spent a lot of time to let other people, engineers, to practice their skills and to grow and upscale in a very, very fun way as you can see in a minute.

JASON: Yeah. So, before we jump into how it works, I want to do a little bit of understanding of the problem space. Because at first blush, it's easy for me to say, I don't get why we would need this, right? Because there's so much material. And I'm intentionally setting up. I actually do see a use for this. But it's easy for me to go, I don't know. I don't know if we need another Dev training tool. Because there's so much we have bootcamps, we have so many tutorials, there's courses, there's all this educational material. And it's all geared toward making people -- helping people learn development, right? So, what is the specific need that Wilco fills that's not being filled by all of these other resources?

SHEM: First of all, I agree. There is tons of material and there are great, videos, streams, tutorials, workshops. And in front of a class. Wilco is like not for learning of the code. But it's more to upscale yourself. We assume you know the basics. But now you want to level up. You want to explore new things. You want to try and practice how to develop features in high load systems. How to fixing bugs in a very complex network mesh. How to work on production environment and fixing production issue that while there are users and stuff like this. And those real tasks. Like mimic real environment. Are somehow missing.

JASON: Yeah. Yeah. So, that's definitely something that makes sense to me. Because if I think about like most of the materials that I find are teaching you a new skill kind of in the -- in the academic sense. Like you're going to work through like what are the concepts, how do they fit together? How do I put this stuff together? But you're right, there's not a lot of material that is, okay. I'm in the midst of a mess, right? I just joined this company. There's a ton of legacy code that I haven't had a chance to review. We've already got people who pay us for things. We can't just turn it off and figure out how it works, we can't just start over. How do I solve problems in an environment that I did not build or I'm not familiar with? That's interesting too because the other thing is most of us build that skill-set on the job. Right? So, I know that for me, I have a very specific set of skills because I worked at a very specific lineage of companies. I worked at IBM. So, I worked on UI problems for cloud-based companies. And then I worked at Gatsby so I have a lot of skills around working inside of GraphQL, working inside of React codebases. I've worked at Netlify so I have a lot of skill around like deployment of frontends in various fashions. But I've never worked in like a microservices like deep microservices architecture or dived into a legacy, you know -- like I don't know. Some kind of like backbone app that we're trying to incrementally migrate to a new stack. Those are skills that I kind verify by proxy doing this for 20 years. I've never done reps. You're saying Wilco is that?

SHEM: Yes. Even if you and me worked in the same company, but we went to different teams. And your team is working on a very cool product and you're growing like crazy and you have tons of users and you got like two senior engineers that mentor you. And I went to a little different team. Okay? And we are working mostly on bugs and maintenance and stuff like this. So, we are working the same company, but opportunities are different. We want to create some kind of sandbox. Like training ground for me and you and everyone to practice. Whether it's high load, very, very intensive tasks, or working in huge, huge, huge codebase and fixing legacy code.

JASON: Gotcha. Okay. And so, this is really exciting. And so, the intention, then, is like I would use Wilco if I'm the -- the CEO or the CTO of a company and I want to provide educational materials so that my engineers aren't just getting better at our codebase, they're getting better at other types of codebases that we might become. So, it's sort of like if we're a scaling startup, we haven't hit those super high load issues or things like that. We're new. But we know it's coming. Because we're seeing growth and know in another 6 months, if we keep growing at the rate we're growing, we're going to have tens of thousands of users or whatever load based on the type of data that we have. I want my engineers to go learn in a way that doesn't require us to learn by accidently breaking production. Or by missing a delivery date.

SHEM: Yes. For example, I work in Angular. And we know we want to migrate to React.

JASON: Okay.

SHEM: For most of the use cases, go to React curves, do a to do list app, play with this and come back. But it's not a rewrite, right?

JASON: Right, right.

SHEM: Do some questing, React, play with real codebase, real API and see if it fits.

JASON: Got you. Yeah. Okay. So, that's exciting. That feels like the sort of thing that it's always been missing in my career because it's not a thing you can go do easily. You learn that by consulting. That's certainly not accessible to everybody. You learn that by having lots of spare time to go work on open source or go volunteer at other companies, nonprofits or something. But like not all of us have that kind of time. Some of us have families, some of us have other obligations or we just don't want code to be our entire life, but we want to level up. This is a way to use the education budget and level up on the job using that 20% time or something like that. That's really exciting to me because it gives me an opportunity to level up on the job in a way that won't happen in a lunch and learn. Or in one of those other spaces. You can learn it by pairing with people, but that's assuming that you're not the most senior person on the team, or they're a good teacher or has a lot of time. Some of them aren't. They are super-slammed because they have made the mistake of being the most capable person in the room. Yeah. Okay. So, this is exciting. So, what -- how did you land on this? Where did this idea come from to start this?

SHEM: So, like it's a long process. Like it's not like one night some of us think about it and in the minute -- in the night and text each other. I think me and my co-founder are engineers. Like we are doing a lot of engineering work. Some of us led big groups. Some of us build side projects and stuff like this. And we asked ourselves how we become such knowledgeable? How we learn new stuff? How we know how to build those kind of products? And we always say, okay, we have side projects. We landed in an amazing team that just started from scratch. We had an amazing mentor that took us and help us how to -- and show us how to fix bug in production by let us doing. Not just lecture us. And you always say that learn by doing, by doing this. Like watching on your hand, fail, fail. Breaking production one after another. You know how to -- you learn what's wrong. You know -- you got -- you create some links, you understand how to integrate new things. You learn a lot of new things by failing and trying. We want to create some kind of training ground to try and try and try and play and do it in a fun way. We always have like side project in our head. But side project in open source contribution has some problems, right? You want to build stuff. But there is a lot of boilerplate and no one knows how to start. Then you get to a certain place where it's just too hard for you and you want to create some kind of scaffolding for these side projects that you can learn and jump between stages. So, it's more like the collective idea is that we rolled between us for a couple of months.

JASON: Got you, yeah. That totally makes sense. Well, cool. So, the mentoring piece here, is that in Wilco as well? I know we're jumping into a real codebase and we're gonna get practice in something that's a little more scaled up or advanced or just a different niche than we usually code in. How do you handle that mentorship thing? Where you need someone to kind of walk you through this new thought process.

SHEM: So, we have a couple of processes. One of them is more automatic way.

JASON: Okay.

SHEM: And you will see. You get some kind of guidance for a couple -- from a couple of bullets right away. And you are able to ask for hints. And you are able to -- to read some material around it. And we have the community. We have Slack. We are Discord server where you are able to ask some questions and encourage people to help you and give you some help. So, you are able to help to others and get some help. And in the future, we are planning to be able to play some kind of multiplayer. So, you are --

JASON: Cool.

SHEM: You open tasks, do PRs, do some stuff. You are able to invite people from your company, whether you are a senior engineer. Or other people that you don't actually know. But they are able to help you and you are able to progress throughout the world.

JASON: Yeah, yeah. Okay. This is very cool. So, let's -- let's see. All of my other questions are about like actual functionality. So, I'm gonna swap us over here. And let's go into pair programming mode. Camera two. And so, now what I want to do is get this off the screen because that's gonna be -- for some folks. Instead, a quick shoutout to our captioning. We've got Amanda here with us today from White Coat Captioning, taking down these words so it's more accessible to anybody. That's on the site, Learn with Jason.dev if you want to follow along. That's made possible through our sponsors, Netlify, Nx and Backlight, and getting finalized with New Relic, so, thank you to New Relic. And we're talking to Shem today. Go and give Shem a follow here on the Twitter. And we're talking about Wilco. Now, Wilco is currently invite-only. So, I have gotten a special invite so that I can get in here. And this is the first step of the flow after I authenticated with GitHub. This is as much as I know about Wilco. And let's maybe look at Wilco.com. This is the home page of Wilco. Let me share this with everyone so you've got a link if you want to go request access, you can do that. Shem, what should I do first?

SHEM: So, this is our morning, okay? You sign up. And this is what you show. So, let's see.

JASON: Let's see. I'm gonna say intermediate. That feels right.

SHEM: Okay. That's interesting.

JASON: So, I know React, I know Node.

SHEM: So, actually, this is like what -- we are building the system right here. Okay? You're gonna get a production-ready system. So, do you want this production system will be written with React and Node? Or React and Ruby? And we're gonna add a couple of more languages soon, very soon. One of them is already in A/B test. But this is like what you choose. Like this system. This thing that you're gonna join is working on Node or Rails? Okay? This is what they -- or this is the onboarding.

JASON: Right. Yeah. I've only written enough Ruby to get myself in trouble. So, we're definitely gonna stick with Node. I know Node and Express. With these, this is how it's deployed.

SHEM: Yeah.

JASON: Am I jumping into Kubernetes config?

SHEM: So, you will get -- definitely gonna get Docker setup.

JASON: Okay.

SHEM: And those will affect what quests you're gonna get or recommendations for quests, at least in the beginning.

JASON: Gotcha. Okay. So, maybe I'll say containers. Because I know enough Docker -- or actually you know what? Let's learn. I want to learn Kubernetes.

SHEM: Okay. We are not sure we are gonna get to Kubernetes. It's very advanced. But...

JASON: We can do Kubernetes and CI/CD. That seems okay?

SHEM: Yep.

JASON: Okay. Hit next. I want to learn we'll say frontend and backend. Someday I would do these things.

SHEM: That's cool.

JASON: This is probably where I'll get the most value in my day-to-day right?

SHEM: Yes.

JASON: Oh, yeah. Communication. I like that.

SHEM: You can see, there are not only hard skills. There is also communication. How to communicate problems. How to write the documentation, how to debug some problems. How to set up your environment and things like this. So, it's not only learn Rails or learn how to deploy Docker container.

JASON: I love that. I think that's great. Is there one that I should pick because you love the way that it works?

SHEM: Let's pick documentation because this is like counterintuitive.

JASON: Okay. Let's do it. Here we go. Meet Anythink. This is my company now?

SHEM: Yes, exactly.

JASON: Are you familiar with Anythink. You're probably not, as it doesn't exist. It's also your new workplace. Don't worry, it all makes perfect sense. Facing real-world challenges that require real-world tools to solve is better than anything. You will use Snack, our totally original corporate messenger which isn't anything... love that. Okay. Go in and get ready to get things. Okay. Wilcoins are currency for support. Those I are use to ping somebody for help or hints?

SHEM: Yeah. Example, you want to buy hints skip some guests, buy some swag. We have coins, achievements, experience points. Everything you know from your regular games. And now we get into the actual scene, okay? It's very quest-like.

JASON: Love it.

SHEM: We want you to feel like you enter a world.

JASON: Okay. So, we're gonna dive in. We're gonna get into our corporate messenger. Set up GitHub and then we get quests. All right. Here we go.

SHEM: All right. Are you ready for your first day at Anythink?

JASON: I'm ready. Oh, my goodness. I love this. You're now connected to Snack. Okay. Good.

SHEM: So, introducing Ness.

JASON: This is horrifying. Great. Okay. So, I read your personnel file last night. Securely impressive. That's great. I lied on half of it. One thing that was missing on your file, an oversight on the part of our investigator is your drink preference. Oh, yeah, I want coffee.

SHEM: Cool.

JASON: All right.

SHEM: So, Ness in the end of the day is your team lead, okay? She welcome you. She will help you throughout those quests. Whatever we choose. And as you can see, there is the word marketplace. Click on the link. What we are working on in this company?

JASON: Nice, like the wave.

SHEM: This is what the company works on. Some kind of e-commerce. We do it with product, right? And you're gonna circle back to those products and you are able to investigate it. Like this is a real like never-stop-rolling the dice. And there is users, there is stacks, there is product page. And we're gonna build features. We're gonna fix some bugs. We're gonna re-architect this system.

JASON: Gotcha, okay. Okay.

SHEM: Okay? So, this is anything?

JASON: So, I have a DM from Navi. DevOps team lead. Got it. Okay. Write your GitHub username. And we'll add you as a contributor.

SHEM: Okay. Cool.

JASON: Navi is maybe the most responsive DevOps engineer I've ever worked with.

SHEM: Yeah. We're gonna work on those delays. We need to increase to make sure it's really.

JASON: I'll get to this sometime between today and next month. I'm very busy.

SHEM: We actually created a persona for each bot. Our product manager that's working a couple of escape rooms created a page for each person. Like what is they like? Where do they live? What kind do they use? Everything in between. It's very, very inspirational to see this work behind the scenes. So, as you see --

JASON: That's really fun.

SHEM: As you saw, you right now have a GitHub repository dedicated for you. The frontend contained a React app. The backend contain the Node app, right?

JASON: Yeah. And then I'm going to do one of these. We'll do a GitHub repo clone. All right. So, now I have my repo here. And I can open this up. And let's make sure that this is not missing any pieces. Okay. So, that's good enough. We don't -- copilots started asking for money. And I feel like copilot, we might have broken up. All right. So, we've got a backend, we've got a frontend. Okay.

SHEM: And remember we said we need some kind of sandbox. So, this is your sandbox. Don't be afraid to -- we are able to behind the scenes re-create it, reshuffle, make it stable. Don't be afraid to ruin it. This is what I'm most passionate about. We give people the opportunity to fail, to break without losing their minds. Okay?

JASON: Got it. Got it. Okay. All right. So, talk to Navi, and now officially prepared. Let's see... Carter. Let's look at our first project.

SHEM: Now you get to the Wilco feed. You can drop this. Not now. Right. So, you finished the tutorial. You didn't even notice. But you finished your first quest. The first quest --

JASON: Love it.

SHEM: And I guess you get a couple of Wilcoins and achievement, and stuff like this, right?

JASON: Great, great. Okay. So, on to my next quest.

SHEM: Yes. So, this is the internal portal. Got it?

JASON: Got it.

SHEM: The first thing to do is set up your environment. Make sure you are able to make it work. And you are able to see messages right now, okay?

JASON: Yeah. This... there's really good soul trolling all over this app, this is well done.

SHEM: Yes, all the Easter eggs and stuff like this. We are investing tons.

JASON: Good, good, good. Let's see... so, first set it up. Let me know once you're ready. All right. Probably don't need two of those open. So --

SHEM: Okay. Just when you're ready.

JASON: I'm ready.

SHEM: Cool.

JASON: Okay. Dibs.

SHEM: All right.

JASON: Excited to meet Ben. Anyway, the dib. Let's see, we need Docker. Docker lets us run things locally. We've got that. So, let's install Docker. And I'm pretty sure I already have it. Let's check. Oh, no. All right. Let's install Docker.

SHEM: Okay. It will take a minute or so.

JASON: I got the apple chip. And I also have the fiber Internet which is gonna be a big bonus for us right now.

SHEM: Yep.

JASON: Okay. So, here comes Docker. And now I can open that up. All right. There it goes.

SHEM: And here we like use docker to make sure people will be able to make it up and running as fast as possible. We are working on a couple of more things. For example, you don't have to install Docker. You can use it like your own tools. Run React, run Rails. But we believe Docker is an easier way because we chose Kubernetes and containers before. And you also work on other stuff like Get and instance environment instead of installing Docker if you get a machine with Docker installed and everything.

JASON: Gotcha, gotcha, yeah. And, you know, I think that's a decision that a lot of companies make because DevOps is hard. Like setting up all of the different services and make sure you've got the right versions and everything is plugged together. It's just challenging. Giving somebody a Docker container, we configure this. All you have to do is turn it on.

SHEM: Yes. And you always think about what it would be in real life. If I'm a CTO, how my first -- my employee first day will look like. Yes. They have things called Docker and GitHub and everything.

JASON: Right. Yeah, yeah. And this is also what, you know, this is the sort of thing that like you see this and you go, oh, no. Oh, what does this mean? Docker desktop needs privileged access. You will be asked for your password. Okay.

SHEM: And you also see, we worked with a couple of bootcamps, they write Python script, what is for loops, what is variable, what is a web page. But they don't know how it's like to work with a team. How it's like to work on GitHub. What it's like to set up an existing system from scratch.

JASON: Right.

SHEM: People only know like a blank canvas. And what it's like to join a real company, a real team.

JASON: Sure. I don't know if we just had a lint of a network hiccup. I don't know if that's because Docker is doing a bunch of stuff in the background or if your Internet is rebelling a bit. But I think we caught most of that. Yeah. So, we are waiting for the Docker desktop to start. And while we're waiting for that, we can go back here and look at our chat. Okay. When we're done installing Docker, which we are almost done doing. Let's see. I'm done with that. And okay. Now it says it's done. So, I'm gonna just -- I'm gonna go back and say I'm done.

SHEM: Yes.

JASON: And I'm using my official work persona where everything ends in an exclamation point to show I'm not a jerk. You can verify Docker is running, great. Let's do that. Docker v. There it is, hey! And then we wanted to run Docker Compose up from the project root directory. So, that's where I am. So, I'm gonna do docker-compose up. Love this semi-transparent thing so I can see through to the command.

SHEM: Definitely.

JASON: That iTerm stuff. Love configuring these things.

SHEM: So, what's happening now, we make the system work locally on your machine. Because as a developer, you need to develop your code locally, make sure it works. So, there is gonna be, as we mentioned, a React app using an API from Node. And Node using MongoDB I guess for the database. And you have a full production system. Okay?

JASON: Yeah.

SHEM: It will take a couple of seconds, I guess. Again, this is the first setup. You only needed to do it once. As -- as in a new day, in a --

JASON: Yeah. And again, this is a very efficient thing. Like when I was working at IBM, it took -- it took people weeks to get to the point where their whole Dev environment was set up. Because it was -- this step was here, but then there was also a follow-up step where somebody had to figure out who had the environment variables and you had to ask them and prove that you work there and then ask for them to DM you the plain text of all of the sensitive data that the company had so that you could paste that into your environment variable, your .env file. Most out of date, copy and paste the whole thing, it's 6,000 lines.

SHEM: I don't want to ruin it for people. But we have a talk a quest, everything is working. But you have a secret or an API key that you need to get from someone from the company and you have the whole company structure in the workflow, in the snack, and you need to find it out. This is a quest that we're playing with the idea for this. Because, again, mimicking real life.

JASON: Yes. Right. This is the whole thing, right? You think that development is about skill. And you think that advancement in a career is about being able to just do the hard technical code stuff. But I swear, 95% of this stuff is how do I get somebody who doesn't want to do something to give me that one thing that I can't get myself so I can do the task that I have? How do I convince somebody that what I'm trying to do solves their problem in a way that gets them to approve it instead of saying no, no, no, this needs to be my idea. So many advanced skills are just about communication, the politics of the office, the knowing where to look, knowing what to Google. Knowing even what patterns are so that you can dive in and figure out what's going on inside of your own company.

SHEM: Yes. And I always say, like the senior mindset. Like when you have a bug, fixing the bug, this is the -- the easier part. This is the easiest part to change the line. Like when you are working in a team, you need to understand the impact for the users. Where exactly does it fail? How to write the test that this bug won't happen again? How to communicate again to the support what happened exactly and how to solve those issues? So, it's a lot about development. Software development is not just writing the code.

JASON: Yeah. Absolutely. I see that definitely not Ness has joined the chat. And I'm suspicious.

SHEM: Nice one. [ Laughter ] So, it's working, right?

JASON: Getting close, getting close.

SHEM: Okay. Building first. Just I think that React --

JASON: Start. Here we go. Dev server. Almost. This is the -- feels like it's gonna be the last thing before we see this thing running.

SHEM: Yes. And let's see what Ness is asking us to do. Just for the context.

JASON: If docker is working correctly. Let's try it and see if it's happening. API pinged. Okay. That worked.

SHEM: Okay. That worked. Yes. No?

JASON: If everything is working properly, you'll be able to create a new user on the frontend.

SHEM: So, we detected that the API is working, right?

JASON: This is also really clever. So, you have some way of when I clicked my local host, it's communicating through Docker ping back to your Snack chat so that I don't have to go back and do a, I'm done! I'm done! I'm done!

SHEM: Exactly.

JASON: And there's validation here. I imagine if this was broken, there's maybe a troubleshooting loop that you have.

SHEM: Definitely. Let's ask Ness for help. Like, help me, I'm stuck. Something like this.

JASON: Oh, nice. Okay. Gets right back with it. Yeah.

SHEM: Yes.

JASON: That's great.

SHEM: Yes.

JASON: Okay. Do one of these, one of these and we'll sign up.

SHEM: Okay. Now we have localhost, backend. And Ness detected that you created a user from the frontend.

JASON: Okay. So, let's see. We can run all scripts in the next quests on one of the containers created by docker-compose up. And you can use docker exec to run commands on a running container. My environment is ready. Maybe the fastest Dev environment I've ever had with Docker. So, excited about that. Everything just worked. I'm happy. Let's update the README style and submit a PR. Okay. All right. I can do that. So -- gonna tell me what to do? Automated response.

SHEM: Yes. So, you just need to --

JASON: Okay. So, let's see. So, we want one of these to set up to do -- all right. So, can go do that. I come back here -- no, I already have this open. Over here. I'm going to go to the README. And I'm going to say... let's see... 1, install Docker. And we've got Docker over here. Run Docker. Check that it works with Docker v. cd into the root of this repo. Run docker-compose up. Okay. So, that goes in here. And the ask was to do README files submitted PR. I'm going to do that. I'm going to open a new tab over here. Move into -- okay. And let's see. We've got a README change. So, I'm gonna get -- check out a new branch and we're gonna call this. I don't know. Use my own setup here. So, initials followed by what I did. So, README-install-instructions. And then we can get add everything, great. Get commit. We'll be docs. Add setup instructions. And then I'm gonna push. And I'm just gonna origin, this -- there we go. And I'm gonna use the GitHub CLI because I'm lazy and I'm gonna do GitHub PR create. And I've already written a good thing. Oh, we've got a pull request template. All right. Let's use that. And the description... oh. I choose -- what have I done? Okay. I'll just say, let's see... added setup instructions for local Dev. And then we're gonna do control X, I guess. Good. And then I submit.

SHEM: Yes.

JASON: And now I have opened my first pull request.

SHEM: Yes. And Vanessa already checked this out.

JASON: Vanessa is all the over it.

SHEM: Yes. And she already approve it, nice.

JASON: All right. Let's do... it's already... oh, so fast.

SHEM: Yes.

JASON: Great. Get it merged.

SHEM: Okay. But pay attention to what we did here. Like most of the tutorials or the workshop that I did would end up setting up the system locally. That's it. Okay? But we really want to teach people best practices, okay?

JASON: Right.

SHEM: We got a new system, why not make the README better? The documentation better? Remember, you chose documentation, communication. This is a crucial part for every engineer that no one teaches you in class, right? So, we do need to investigate things that might be hidden on your day-to-day or things that you don't pay attention to on your day-to-day. And we think those kind of skills or these kind of mindset is so important. Okay? That's why we want to have a dedicated task to change the README. Or update the README.

JASON: Yeah. That totally makes sense. Okay. So, we got our changes approved. And then nobody told me how to do it. So, I'm gonna squash and merge because that's what I like.

SHEM: Okay. Your call.

JASON: Okay. I'm going to...

SHEM: You can delete. Up to you.

JASON: Delete the branch. Clean it up. I'm going to -- let's talk to Ness. Click here when I'm ready to --

SHEM: You crossed the last div. Perfect.

JASON: Click in here. Man, I'm already loaded. Did everybody see that? Got like 870 Anythink bucks.

SHEM: Yeah. If you press the X to dismiss it.

JASON: Let's continue. Show me my invites? Okay. I'll do that later.

SHEM: Okay. You get Wilcoins. You have some kind of achievements. You can hover over them and see what it is like. You gotten toes of stuff --

JASON: I'm killin' it! Killin' it!

SHEM: Yes, you have all the squeals.

JASON: Setup store, level up. Communication, doing okay. Backend, frontend, database. We have stuff happening. This is great. Love that.

SHEM: And you can see -- yes. So, this is the next quest. It's a little bit harder. So, let's --

JASON: Okay.

SHEM: Okay.

JASON: Okay. We're gonna go here. All right. It's me. Run the following command on your repo. Okay. So, let's give that a shot. I'm just gonna get back to our main branch here. Here we go. All right. And so, now I'm going to run that actual command which was... start quest.

SHEM: Actually, start quest behind the scenes, pulling it up. You did it.

JASON: Okay. Great.

SHEM: Remember how I said that we have the ability to re-fix everything you do with your repo? So, this is the magic. Like every time you move between quests or between dives, we are able to put it in the right spot.

JASON: Nice. Nice, nice. Cool. So, let's... go ahead and add a single product to the DB, then get to its page in the system online. So, that would be not this one, this one.

SHEM: Yes. The local.

JASON: Let's go to the marketplace. Okay. So, I need to add a database.

SHEM: Yes.

JASON: And my database is empty, add a single page to the DB. So, my database surface is where? Settings. URL of profile picture. Okay.

SHEM: So, this is kind of a quest. You need to understand where it is.

JASON: I got to understand how this works.

SHEM: Yes.

JASON: So, in order to add this, I'm going to look at the code.

SHEM: What you would do as a developer, right?

JASON: So, I see, Next.js, not gonna bother that. This is an express app, go to routes. API, that seems right. I want to add an item. So, router brands with -- param, okay. Can I add a new one, though? Get auth.optional. All... feed... posts. auth.required, posts. Payload.id. And I want to send a new item. And my item needs to have item created and then maybe we can... they need here for the model. This is what an item looks like. All right. And probably I could find some way to dig in here and make all that stuff work. And let's see if I can... that should be authed already, right? So, I should be able to find my auth code. Here. Am I overcomplicating this?

SHEM: No. This is exactly -- and there is no one way. There is like a couple of ways. Some of us will dig the backend and see what is the request and maybe use, I don't know, Postman, to create a post request. Some of us might feel more comfortable with the frontend. And we'll travel the frontend app and see if there are a specific page or a specific API call to this specific post request. And that's okay. In the end of the day, what we're gonna change -- what you're gonna check as Wilco is if you are able to create an item. And we just want you to travel around the application, get familiar with the code, and understand that when you get to a new team and you get to a new product, you just need to explore what are the options. No one gonna tell you and walk you through the code and the product and the pages, right?

JASON: Okay. So, we've got item. Not found, right? So, that's the expectation. Is that it's not found. But I need to be able to post to this. And what I want to post to it... I have -- let's use that. So, I'm gonna open up --

SHEM: And we do want people to like Google out how to send a post request. This is what we want people to do.

JASON: Okay. We are at post request. I need to figure out how to actually do that. I need my item, which is gonna be one of these, right? Ref ID, probably need that off. Seller, I'm probably gonna need my own user ID if I can find that --

SHEM: Let's do the other way. Let's assume we worked through and you probably figure out, like Postman API and the body field, right? This is like you nailed it from the API standpoint. Let's go to the other way around. Let's see how the frontend look like and maybe figure out from there.

JASON: Okay. Let's go to frontend. Got my source. We've got index, which gives us routes, and then the app. See if there are more components in here. Item list, item preview. Let's see... editor. That might be something. Item submitted. Let's see... so, this is that editor page, field. Item title. All right. That looks promising. So, maybe... just add another route. Okay. So, I'm going to...

SHEM: Let's see where are the routes.

JASON: The routes here?

SHEM: Yes. And in the app, there are a couple of routes, right?

JASON: In the app, there are a couple of -- I only see this route. In app there are routes.

SHEM: Yes.

JASON: Oh. Okay. I got too deep here. Let's see... item ID, editor. All right. I can just go to editor. Okay. So, we need 3001 just over here. Look at that. That was way easier than what I was about to do. So, we can say let's go with -- we'll go with Corgi Pants. And we'll need a -- an image. So, we'll go to Unsplash and just get these. That one seems fine. Get the image link. Head back over here. And... okay.

SHEM: Nice. So, again, there is no right way or wrong way. You can go throughout the backend or throughout the frontend. And that's okay. And you learn throughout the way. Okay. So, you have an item in the system and that's fantastic. But would you put cargo pants in 89, your first choice? So, we detect. We have all kinds of hooks throughout the way. So, we know exactly where you're stuck. Mainly about if you're stuck and when you're stuck so we are able to help you. So, you know how to add one item.

JASON: Got it. And then I need to look at seeds. Which was in the backend.

SHEM: Yes.

JASON: And that runs yarn seeds. Which tells me to create a seeds file. Okay. So, I'm gonna run it and let's see what happens. Using script, I went through the script. Script seeds. So, I can run Docker exec backend/seeds.

SHEM: Docker exec. I think anything backend, you have docker exec. Means minus IT Anythink backend.

JASON: Oh, I see.

SHEM: Format it.: Is the bash included?

SHEM: You have the bash or you can run aspecific commands like yarn seeds.

JASON: I want to run yarn seeds.

SHEM: Yep.

JASON: Couldn't find a package JSON. STUDENT: Oh, maybe seeds backend and then you have the seeds. Let's go with bash. Because I'm not sure what exactly the right path. Okay. And then --

JASON: So --

SHEM: Where we are now.

JASON: So, we can go with --

SHEM: Backend.

JASON: Couldn't read -- couldn't find a package. Okay. So, I'm just gonna move in here.

SHEM: Yes.

JASON: Okay.

SHEM: Yes.

JASON: Please create seeds file.

SHEM: Okay.

JASON: If you have that.

SHEM: So, we need to start with creating 100 users, 100 product, and 100 comments. So, this is what we need to create with our seeds.

JASON: So, in my seeds file, I would... let's see. It's gonna run yarn seeds. Yarn seeds is going to run whatever I want. Let's see if there is a... let's see... tests, maybe? This isn't built for me, is it? You're gonna make me write a script.

SHEM: Yes. You're gonna write a script.

JASON: Okay. All right. So, I'm going to do something like in tests. We could do a -- there's probably a better way to do this. But I'm gonna do fixtures and db-seeds.js. And then we could do something along the lines of I want to users. And we'll do like array.fill, 100. And then we can map. And get the item. And we'll do... I don't know... like... the user type is? We've got a valid dater. Which means schema, methods, that password generate. There's not like a fake. So, I could install something like fake here, but I feel like I don't want to do that.

SHEM: Whatever you like.

JASON: Yeah. I think what I'm gonna do, because I have this in front of me here. I'm just gonna grab this. Come back out here. And we're going to straight up fake this with an iterator number. So, we can do something like lower case and unique. And we will do something like fake. Fakeuser. And then we number. Email, we can do the same thing. Where we can do fakeuser 1, @anythink.com.

SHEM: And i, not 1. This is why we're doing pair programming, right?

JASON: Right. Bio, just say test bio, image. We need something. So, let's grab another Unsplash image. And we will just say, Person. Great. You look like a person. And then we can open the image in a new tab. We want this to be square. I think we can just do that if we do... width or -- we'll just do like a 400. And height 400. Is that gonna do it?

SHEM: Actually, let's do a fun stuff. There is like Lorem Ipsum. Like random text. There is Lorem Ipsum for images. Okay?

JASON: Okay. What are you feel something

SHEM: Lorem Ipsum images. I think. Yes. So, Google Lorem Ipsum images. And you will get -- yes.

JASON: Okay.

SHEM: Yes. Take something like this. And you will get a random image every time.

JASON: Okay.

SHEM: Let's pick one of them.

JASON: Got it. Do we have a category where I can say people?

SHEM: I'm not sure. I would love to have a dogs category.

JASON: This is fine. We'll do this. Okay. So, we'll throw these in there.

SHEM: Yes.

JASON: And roll everybody's a user. We don't have any admins in the system. Favorites, we can make empty. Following we can make empty. Hash and salt, I'm leaving. I'm going to make the assumption that this will generate on its own. Okay. So, that should be our users. And let's start by just console logging this.

SHEM: Yep.

JASON: Make sure that it does what we expect. So, please create seeds file. I have to actually run it. That means that I have to do Node... call that -- but backend. No. We're in backend. So, tests, fixtures. Tests, fixtures, DB seeds.js. One more time. Array.fill! Oh, no. I'm bad at JavaScript. Let's figure out how that works. JS create array with 100 elements.

SHEM: You feel like if people will have access to my Googling, Google history, they will understand how much I don't know how to program. Like I am Googling all the time how to, like, form an object.

JASON: We didn't actually need this. Try that one more time. I think this will do it. 100 empty items. No! What? Array from... that do it? Here we go. Okay. So, here's all of our fake users. So, now we have a hundred fake users. We can do the exact same thing for our other types. So, we'll do items and the other thing that I needed was... and 100 comments. All right. So, comments. Okay? So, leave that. And then we want to change all of these fake comments. That actually -- so, let's go to the comment type. And we've got body, seller, item. The object ID is a user ID which I don't have. Which means... can I just type some object ID of the user?

SHEM: So, we need to, like save the user. And then we will get autogenerated ID, right?

JASON: Oh! Okay. Okay. So, we'll have to... and then in the items, items are up, we have schema. Which we'll drop in here. And why didn't that work? Item. There we go. All right. So, we've got slug. So, that slug can be fakeitem. Title will be... fake item i. Description, we'll just do test description. Image, we can do the same thing. Favorites count, we'll just default to zero. So, I'm gonna ignore that one entirely. Comments, we'll make empty. Tag list, we can do test. Tag. And seller, needs to be -- can I -- is it optional? Doesn't look like it's required.

SHEM: No. We need to save the user and then we will be able to have the user ID.

JASON: Okay. So, this needs to move up then. This will be a todo. This body will be -- this is a test comment. Seller, we need, item we need. So, TODO save items. All right. So, now that we have these, we need to put them into Mongo. Which means that we need to use our database which is -- how do we actually get to this? dB seeds. I need to save these products which I'm able to do through here. Let's see. How much time do we have left? 20 minutes, 25 minutes.

SHEM: Let's see app.js where we initialize some stuff.

JASON: App.js, give our secret production, get our models.

SHEM: No, a little bit up. Yeah, a little bit.

JASON: Mongoose connect.

SHEM: Yes. This is what we need. Mongoose connect, right?

JASON: Okay. So, we get one of these.

SHEM: Right.

JASON: And I also need to include mongoose, which will be up here.

SHEM: Right.

JASON: And do I need anything else? This is fine for now. Go up to the top. Do one of these... do one of these... all right. So, now that I've got mongoose, I need to remember how to insert things with mongoose which I can look for. Set. Okay. In here probably. Mongoose. Mongoose model, item. Okay. So, then probably gonna need these. How did we get these items, though?

SHEM: Yep.

JASON: Item, find one. So, just gonna drop these here.

SHEM: You probably have some kind of -- let's see the post request and see what's going on there.

JASON: Yeah. And I've got save. So, here is our -- so, dot save. New Item with the thing. Okay. So, for each of these, we need to set up a loop. Then we can do something like forEach. No, we want it back. So, for each of these, we'll do user. And then we want to user = new User. And that should give us our user. And then we will set that which we can deal with later. And on to dot save. Then we'll be able to pass the item's ID out.

SHEM: Yeah.

JASON: So, we will then do... user.save. Did that wrong. Oh, user.save.

SHEM: Right.

JASON: Then we get our dbItem. And in here, we can do stuff, which would include doing what I'm gonna do which is just setting userId. I believe -- leave for now. And then we'll just set -- we can use one userId. We get into toJSONFor.

SHEM: We don't need toJSON. We have an object.

JASON: We can do --

SHEM: Yes. An ID. Or autoID.

JASON: Okay. This is one of those. We'll get the first userId out of there. That is done. Then what we'll be able to do is get our userId and drop that into here. Good.

SHEM: The problem is this is -- this is async.

JASON: It is.

SHEM: Right?

JASON: You are -- yes, it is. You are correct. So, we need a async function. SaveFakeUsers. And that... do one of these. And we want to -- broke a bunch of something. Okay. Now we get to remember how all of this stuff works. So, I have my async function. It's gonna do something async out here. Which might honestly just be easier to put into a for loop so I don't have to figure out the async mess.

SHEM: I agree.

JASON: Yeah. I'm just gonna switch this out to a for, user in users. And I think everything just stays the same.

SHEM: Yeah.

JASON: I can then await. And then... ta-da, I think! Is the chat freaking out right now? I think... I think this is working? Huh? I don't know. Okay. So, yeah. I think this will work. So, we got -- we got that working. And I should be able to then -- say again?

SHEM: Yep. So, let's get items into the -- after the loop. Right?

JASON: Yes. Get items after the loop. Oh, yeah, okay.

SHEM: Need to be async.

JASON: Yeah. We'll do the whole thing as one big function. That's easier than what I was about to do, which is string together a bunch of...

SHEM: Yeah.

JASON: We'll do save data. And then we don't really need that to be global. I'm gonna do it anyways. So, just stick an item ID in here. And then we're gonna do exactly the same thing for this.

SHEM: Yes.

JASON: And it will be... item in items. This is not gonna work the way that I'm doing it because we have a duplicate declaration. So, let me fix that. We'll change this one to user. As a shorthand so that I don't have to figure out how to break all my stuff here. That will be fine. And then down here we're gonna do the same thing. We will change this one to be -- we're doing that. We're doing that. Nobody look at me.

SHEM: And we need new item instead of the new user.

JASON: Okay. Put the item in here. And down here, change itemId to be -- that's scoped so that should be fine. And then we can change -- oh, I screwed this up anyways by calling it dbItem. I don't care. And then we'll be able to set that itemId and then come down here and do the same thing. One more. This one's gonna have the user ID. And one's gonna have the item ID. And we will -- on this same loop... except this will be... capital. All right. So, scoping --

SHEM: And we don't need the if for item ID.

JASON: That is true. We don't need any of that. So, we can do actually just one of these and everything is fine. So, then down here, instead of running that, we will run whatever I call this function. Which is saveFakeData.

SHEM: Then we need to somehow like after it's finished, we need to finish the script, right? Then system. Or exit or something like this.

JASON: In a Node script? It won't just complete?

SHEM: Yes.

JASON: Oh.

SHEM: saveFakeData and then system -- node --

JASON: It will be process --

SHEM: Yeah. Yes.

JASON: And then we can do like a catch error. And that will do a console.error. Because I have a feeling that I made at least one mistake in this. And then we will process.exit. So, let's give that a shot and see how we did. Did I change anything in here? I didn't change anybody here, did I? Okay. Let's run back here. And let's try it again. Fingers crossed, chat. Here we go. Don't screw it up. Schema hasn't been registered from model item. This was the part I was confused about. We were saying, get this thing going. So, in here, something happens that's registering our items in the app. So, let me close up the frontend. Let's go back to app. And we have mongoose, right? And so, in mongoose, we do all of these things. And then we require these. Okay.

SHEM: Right. Yes.

JASON: That's what was missing. So, let's get back up here. Do one of these and then try one more time. Cool. I'm missing...

SHEM: Okay. So, I think this is the -- the -- the pass. Like, slash, dot, dot, slash, dot, dot, slash. Because this is not in the same directory.

JASON: So, I'm in fixtures. That should get me up to models. That should work. Dot, dot slash, dot, dot, slash.

SHEM: Maybe source?

JASON: I think this is right. Let's see.

SHEM: Let's see.

JASON: Yeah, that's right.

SHEM: Cool.

JASON: So, let's run it one more time. Close we are closer. obj, to be document, must be object, got a zero. I screwed something up. Current URL parser.

SHEM: That's okay. That's okay.

JASON: And go to DB31, that's where I'm passing in an incorrect-object type. So, my array map should be clearing one of these and it's -- okay. So, this is because I'm doing for in, not for of. Uh! TypeScript. Okay. One more time. One more time. This is the one. I believe in us, chat.

SHEM: Let's see... looking good, looking good. Okay. Let's get back to our app.

JASON: Did I do the thing?

SHEM: Let's get to our app.

JASON: This app, this app, gotcha.

SHEM: Yes. Okay. Wow.

JASON: Ta-da!

SHEM: Nice one!

JASON: Look at us go! All right. Now we've done that. So, let's see where we are. Oh, I'm in Docker. Let's exit. Change. Okay. So, we're gonna add, great. And we will get checkout branch. And we'll call this one add-seed-data. Okay. And get commit. And we'll say, feature. Add seed data. All right. So, I'm gonna push. No! Add-seed-data. And then we will GitHub PR create. Add-seed-data. Pull request. Yeah. Local Dev.

SHEM: Yes.

JASON: Okay. Submit. And once again, we are off to the races. Where is Ness? There you are. All right.

SHEM: Let's talk a little bit about why it is important. Okay. Seeds data. I think that in most cases, like the experience of new developer. How fast she or he is able to work on product -- or work on local Dev that they are able to test. To play. And like the best experience for me was to get into a team where you just write the script that was I, write the script, you get production-like data. You are able to play with a product that is close as possible to production. I think that your local Dev is connected to the production database with some kind of safeguards. This makes me as a developer very, very happy and eager to work and easy to work. And the developer experience is something that you are talking a lot about is much better. So, this is what we want to teach here.

JASON: Right.

SHEM: Because we talked about setup and wording and what it's like to being a new team. And now what's happening behind the scene, we are running Wilco action to align your data and make sure that the databases actually have some -- some data there. So, it's not like a shallow checks on the files. But it also is running some scripts.

JASON: It's good that it's doing that. Because I did zero testing. Definitely didn't validate this worked. Looked at the page loaded and saw comments. Who cares about users or comments?

SHEM: Right?

JASON: I think actually if we wanted to validate that, go to the first product, fake item zero. Because that's gonna have all of the comments. Oh, but it doesn't.

SHEM: Fake item.

JASON: So, we might have actually broken our comments. And I guess we'll find out, right?

SHEM: Yes. Yes.

JASON: So, this will tell us.

SHEM: Check the deals. How many -- maybe refresh it. It should be ready in a sec.

JASON: Job is waiting for a host runner. That's always a bummer.

SHEM: Yes, GitHub.

JASON: So, it will happen soon enough. It looks like that's probably as far as we're gonna get today. We have about 10 minutes left. What else should we -- we have got a couple people in the chat who are sounding excited. Sounds like we have a lot of people in the waiting list for Wilco which is exciting to see. Chat, do you have any questions for Shem about Wilco, other than when will I get invited? Any requests or questions or what you want to learn. What are the things that you have a hard time learning when you're thinking about leveling up? And Shem, what's one of those for you. What's something that you wanted something like Wilco so that you can level up on?

SHEM: So, I think we have a couple of directions. One of them is more like the straightforward kind of quest. Like we factor this code and this feature. Move like take this React component from class component to loops. Move from, I don't know, context to Redux and all kind of like very specific stuff. The other one is more general for best practices. Okay? Let's write some tests. Let's get a bug from -- from the support. Write tests to make sure it won't happen. How to run tuning tests. How to write good encapsulation, obstruction, stuff like this. Very, very generic. Doesn't mean if it's Node or Python or stuff like this. The other one is more taking to the cloud. Okay? How to take your React app and deploy it to Netlify. how to -- how to make -- integrate observability tools. How to work on monitoring. How to detect button X with this -- with these tools or another. How to work with logs. How to set up and monitor alerts. So, those are like how to work in production environment. And the next level is once you have a production environment, how to handle load. How to detect bottlenecks. How to add index to the database. how to migrate from one another to another. Those kinds of quests are very, very hard to mimic or to explain when you have like very small setup. Once you are able -- we are able to create those kind of setup, very complex with data mesh. And network. So, we are able to take it to the next level.

JASON: Nice, nice. Yeah. Okay. Cool. We've got a question from the chat. Is Wilco paid? Is this that a service that I as a developer would pay for? Is it done by employers or developers? Is there a free tier?

SHEM: We have a free tier right now. We will sync every couple hundreds of people so they are able to play and it's free. You will also have a version for companies to play as a team, as a company, as a team lead you want to let your team or as a VP, you want to let your department to practice skills. You are able to see what they're practicing on. You have more voice there. And you are able to play as a group.

JASON: Nice, nice. This is very exciting stuff. I think this is -- this is really cool. It looks like GitHub's not going to let us finally finish this PR here.

SHEM: Maybe cancel. Or rerun.

JASON: Retry.

SHEM: Not sure what's going on with the PR checks.

JASON: We're gonna rerun failed jobs and see if it runs this time.

SHEM: Okay.

JASON: And let's see. That one worked. Let's get into this one, starting, job is waiting. It might just be that we're not going to get this for a little bit because GitHub is under load. And that's okay. You'll be able to follow along. Here we go. It's happening.

SHEM: Yes!

JASON: I'm going back out to my pull request. Something is off, make sure all the checks pass. Okay, cancel it. Now run it again. And hopefully, this is cool. Good that we get the feedback. Then... once that runs -- all right. So, while we're waiting for that to run, I'm to do another shoutout to our captioning, we've had Amanda with us all day. Thank you very much, Amanda from White Coat Captioning. And that is made possible by our sponsors, Netlify, Nx and Backlight, kicking in to make in show more accessible to more people. Check out the schedule, we have a lot of fun stuff coming up. Even more is on its way from the show. We're gonna do Script Kit. Developer productivity by writing JavaScript right on your computer. We're gonna do accessibility tests with Storybook. We're gonna learn more Motion One with Matt Perry. Rust for JavaScript developers, Auth0 Actions, fun stuff. Plus a few things I haven't even put up on the site yet. Make sure to go and add on Google Calendar. That will put all the episodes on your Google Calendar or follow on Twitch to get a notification. Or head over to YouTube to see when they're posted. And subscribe and ring the little bell because that is very important for my ego. Shem, anything you want people to go check out? I'm gonna drop the link to Wilco again. Anywhere else someone should go to get started?

SHEM: You can follow us on Twitter. We are really active there.

JASON: That's trywilco, right?

SHEM: Right. We love to hear your feedback. We hope to get everyone on the platform. We would love you to try it out. Really invested a lot of time. The team, tech. A lot of efforts there. I think -- yes. The PR already approved. And you are able to merge it, I guess?

JASON: Looks like I'm going to have my let's see. Refresh this?

SHEM: Refresh, I think. Refresh.

JASON: Right.

SHEM: And you already made it completed three quests. You have a couple of more if you want to play it. There is a whole category for stuff on the backend, on the frontend, on a database. Some of them are more easy, some of them are more advanced. And, again, we would love you to try it out. We would love you to play, give it a chance. And more than all, we would love to hear your feedback.

JASON: Absolutely. Chat, it looks like a couple of you are trying to get into the platform. Looks like I have some invites. Send me a message on Twitter and I can get you an invite. You can get in and try Wilco. Shem, thank you so much for spending time with us today. We're gonna go find somebody to raid, you all. Thank you so much for spending time with us. And we will see you next time!