The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development

Rate this content
Bookmark

This workshop will guide you through the product development life cycle of creating a real-world web application. You will learn about React Server Components, building a design system within Storybook, and using frontend development to approach becoming a full-stack developer. The workshop will cover increasing confidence in your application with unit tests and implementing authentication and authorization. You'll have the opportunity to work through product features and examine a real-world RedwoodJS project, gaining valuable experience in real-world product development. RedwoodJS makes it simple to approach full-stack development, and this workshop will give you the skills you need to create your own real-world web applications.

Amy Dutton
Amy Dutton
160 min
16 Nov, 2023

Comments

Sign in or register to post your comment.
  • Andrew Arnold
    Andrew Arnold
    New York Public Library
    Maybe this? https://gitnation.zoom.us/j/84052720570?pwd=GtX30KPC2rotjpEVXeaRkxf6Cnhwbm.1
  • Kaitlyn Higgins
    Kaitlyn Higgins
    E.W. Scripps
    Can you drop the zoom link with correct meeting ID here perhaps Isa? I'm seeing tons of channels on Discord, but none of them say troubleshoot. A bunch of the channels look like they're from a past summit.
  • Daniel Cha
    Daniel Cha
    Resilient Coders
    ty for the discord link

Video Summary and Transcription

Today's Workshop focused on RedwoodJS, a full-stack framework that makes it easy to develop web applications. The Workshop covered topics such as setting up a Redwood project, installing Tailwind CSS, using Storybook for component development, writing tests, setting up database relationships with Prisma, using GraphQL to access the database, and exploring React Server Components. The Workshop also showcased demos of creating links, refreshing pages, and using React Server Components for AI integration. Overall, the Workshop provided a comprehensive overview of RedwoodJS and its features.

Available in Español

1. Introduction to RedwoodJS and Brazilian Nut News

Short description:

Today, we will be talking about going from a front-end developer perspective to more of a full-stack developer perspective. We'll be looking at RedwoodJS, where I am a lead maintainer there. I first was introduced to Redwood a little over a year ago. I co-host a podcast called Compressed FM. We talk about web design and development. So one of the things that I really appreciate about Redwood is that it makes storybook and just JavaScript testing library. It takes Prisma, GraphQL, React, and makes all of those first class citizens and offers support out of the box. The actual project that we'll be working on is called Brazilian Nut News. The app that I mentioned is the Brazilian Nut News. And the name is just a fun name for this because Brazilian nuts automatically rise to the top in a jar of nuts. So this is what we're going to be working on. This is the completed repo. Hopefully as part of this workshop we'll work through some stuff and you'll have the ability to create pieces and parts of it and then if you want to revisit the content, there'll be plenty there that you can use this as an example repo to continue to build on and incorporate features. So let's actually take a look at the Redwood docs and we'll get a project up and running. So by default, you're required to have Node version 18 and then a version of yarn greater than 1.15.

Thanks for joining us today. Today, we will be talking about going from a front-end developer perspective to more of a full-stack developer perspective. We'll be looking at RedwoodJS, where I am a lead maintainer there. I first was introduced to Redwood a little over a year ago. I co-host a podcast called Compressed FM. Actually, it may be two years ago. Anyways, co-host a podcast called Compressed FM with James Q. Quick. You can check that out if you're interested. We talk about web design and development. Then we stay with a little bit of zest. but we had as a featured guest we had David Price here on episode 54 and so he is one of the co-founders with Redwood and he came on the show and just started talking about Redwood and really sold me on the entire concept of Redwood and just their opinions and how they've put the framework together so spent some time going through the tutorial on their website and it's still there So if you go to redwoodjs.com slash docs, and I'll include a link in the chat, there's a tutorial here that you can work through that goes through all of the content.

So I spent the weekend going through that and was just totally sold. So one of the things that I really appreciate about Redwood is that it makes storybook and just JavaScript testing library. It takes Prisma, GraphQL, React, and makes all of those first class citizens and offers support out of the box. And so you'll see when we get started that they've bundled all these things together, and it makes it really easy. So you're not trying to deal with configurations or trying to figure out settings and support so anytime any of those pieces are updated, we handle all those updates for you so you just run an update script. You don't have to do that yourself. You don't have to figure out, okay, why did my app break and then kind of dig through all kinds of documentation to we'll be using this. If you're looking at this and like, okay, this stack is interesting but maybe I just want to focus on React, it's still React. It's a full-stack React framework and the nice thing about it is it has a distinct front end and a back end layer. So we'll be working through all that.

So the actual project that we'll be working on is called Brazilian Nut News. And I can include a link to this particular repo. All this has in it is a read me. It has the agenda for how we'll work through the content. What we'll be focusing on. There's a few quick links and commands that you can use. And I'm going to try and make use of the breakout rooms and have some exercises so that hopefully I don't go too fast for you, but the things not too slow. I want to make sure that it's interesting. So please make use of the chat and I will try and keep my eye on it. The app that I mentioned is the Brazilian Nut News. And the name is just a fun name for this because Brazilian nuts automatically rise to the top in a jar of nuts. And so that's kind of how Hacker News works, right? So you submit a link, you can vote on the link, and then the best, supposedly the best links rise to the top. So this is what we're going to be working on. This is the completed repo. And there's a link to this within the readme. And you can interact with this. This is deployed on Vercel. The database itself is with Supabase. And so I'll show you how to use all that. But the main page here is our feeds page. And then you can see when you scroll down, you have access to the navigation. But you can also look at the latest feed. So this particular page is sorted by points. So for example, when I can't vote right now, because I'm not logged in, but if I log in, we'll say Amy at Redwood js.com. And log in with my password. You can see now I can vote. And if I vote up, say on Google, then this page will reorder and put it puts Google at the front because it now has one point but it was also added I think um more recently than say Apple in this article right here so if I click on latest this one is all based on time so the Redwood JS docs link was added most recently 13 hours ago and so that one appears at the top you can also submit a link once you're logged in so I could submit one for React Summit and grab the link for that and then you should see that appear in the list so now if I go to latest React Summit is at the top of the list I can also go to my profile and so you can see the links that I've shared and I also have an account set up under just Amy so if I type that in as Amy I haven't shared any links so that's currently empty but then you can also go to comments and see all the comments that I've made on links. You can see any link that I've marked as a favorite and then you can edit your profile. So don't get too overwhelmed. We'll just break pieces of this off and we're not going to build the entire application but I do have a link to the full repo if you want to check that out. Hopefully as part of this workshop we'll work through some stuff and you'll have the ability to create pieces and parts of it and then if you want to revisit the content, there'll be plenty there that you can use this as an example repo to continue to build on and incorporate features. So I want to make sure, is everybody good? We'll make sure we don't have any questions before we get started the actual meat of the content.

Okay, I'm going to keep going, but again, please use the chat and I will continue to check that throughout the workshop. Okay. So this particular repo, and again, I've shared a link to this within the chat. The first thing that we've already talked about what we're going to be building. So let's actually take a look at the Redwood docs and we'll get a project up and running. Oh, thanks, Isa. Or I think that's how you pronounce your name. I really apologize if you, if I butcher your name. I'm going to try my best. It looks like there may have been some trouble. I think we still have some support from React Summit in the room. It looks like there was an issue with the Zoom link. I know that this is being recorded. And so people will be able to view it after the fact. Cool. So here is the React website. I mean, sorry, the Redwood.js website. And you can click on this Docs link and come to Quick Start. So by default, you're required to have Node version 18 and then a version of yarn greater than 1.15. So I'm happy to support if you guys need a little bit of help getting those installed on your machine in order to get Redwood up and running. If not I've also included a link in the repo for Gitpod and I'll show you how this works. So this is a starter repo and if you look at this it looks pretty slim but if you click on you can either fork this repo to open it or you can just say open in Gitpod. And so Gitpod is pretty great. It allows you to work within VS Code within your browser. You can also sync it with the version of VS Code on your machine. So I already have an account. I encourage you to create an account with GitHub if you're going to go this route. But you can click on – you can just – you can start from scratch. So I will also show you how to run this in the terminal. I just want to show you this in case you have any trouble with Node or Yarn. This is probably the easiest way to get up and running just because you don't have to worry about installing those dependencies. But if you're comfortable installing Node and Yarn, or if you already have them, you don't have to worry about this particular step. But I just wanted to show you that once you open this, you can see that it creates a Redwood project and you can just work directly within the browser. So it's still installing all those dependencies with Yarn. As it's going through the flow, it'll also add some plugins that we've recommended for working with Redwood that just make it a little bit easier. And I'll try and point those out as we kind of come up on them.

2. Creating a Redwood Project

Short description:

I'm going to create a Redwood project using yarn. The project will be named React Summit. I'll override the Node version and continue with the installation. I'll use TypeScript and skip initializing the repo. After running yarn install, I'll start the Redwood project by running yarn RW dev. Let me know if you encounter any issues.

I'm going to exit out of this because I'm not going to be working in VS Code. If you, I mean, in GetPod, I'll be working in VS Code. But if you do want to sync this, I'll show you. Once it comes up, actually, I'm getting ahead of myself. There's a Ports tab here. And once it's up, you can load port 8910 and 8911, which we'll be looking at. So I'm going to exit. I'm just going to stop the workspace here. And I'm going to go ahead and just delete this for now. Okay, so what I'm going to do since I already have node, I'm actually running node 20 and then yarn. I'm going to copy this line of code. I'm going to open up my terminal. So this particular terminal is warp. It's warp.dev. It's a free terminal, but you can also use the terminal in VS Code or Hyper, iTerm2 that are all great for working with projects. So I'm going to paste this line in. And what this is saying is I'm gonna create a Redwood project using yarn. And this is the name of my project, my Redwood project. I'm gonna change this and I'm gonna call this React Summit just because I already have a project on my machine called Brazilian Nut News. Maybe you want to call yours Brazilian Nut News. But I'm going to say I want to create a project called React Summit. And this will get everything loaded. And you can see it's saying, hey, you have a version greater than Node 18. You can override this and continue to work with Redwood or you can adjust it. So if you want to change the version on your machine, I really encourage using MBM. You can see a link here on how to do that. So I'm going to go ahead and say override and continue install. I'm going to use TypeScript. If you're not familiar with TypeScript, that's perfectly fine. I'll kind of walk through some of the nuances of that. Don't get overwhelmed by that. You can also initialize your repo if you want. I'm going to say no for now. And now it looks like we are up and running. So I'm going to cd into my directory. And then I'm going to run yarn install. and that might take a minute as it's trying to get everything up and running i lost my there's the window perfect so now i've run yarn install and so to get a redwood project up and running all you have to do now is say yarn RW, which is Redwood for short. And I'm going to say Redwood dev. And so from here, it will open up in my browser, open it up in a different window, my Redwood splash page. So you can see here, there's a command for generating pages and that kind of thing. So the first part of today's workshop, let me know if you have any trouble in the chat, because I want to make sure that you guys are able to get up and running because otherwise I'm afraid you'll be lost. I don't want you to be lost for the whole workshop. That would be terrible. I'm going to keep kind of going. I think there's a lag, but I'm happy to circle back if anybody has trouble.