Everything you need to know to build a full-stack JavaScript application in 1 workshop.
This is a FREE, hands-on workshop for beginners and intermediate developers wanting to learn full-stack development using modern JavaScript technologies.
Everything you need to know to build a full-stack JavaScript application in 1 workshop.
This is a FREE, hands-on workshop for beginners and intermediate developers wanting to learn full-stack development using modern JavaScript technologies.
Overview
This is a step-by-step, live coding workshop where you’ll learn everything you need to know to build a Hacker News clone within three hours.
Curriculum Outline
This comprehensive workshop is designed to take you through the entire product development lifecycle of a real-world web application.
We'll start off with a high level overview of what we'll be building. We'll get our project up and running with Tailwind and Storybook.
We'll build a design system within Storybook. We'll learn how to use RedwoodJS's generators to create components, pages, and layouts.
Tests give you confidence that your code works as expected. We'll discuss all the different types of tests: unit, integration, and end-to-end tests. We'll use Jest to write unit tests for our frontend components.
We’ll create a Postgres database. Then, using Prisma, we'll set up a schema that defines our data structure and relationships. We'll use database migrations to manage schema changes over time, and learn how to seed our database with initial data.
We'll discuss the differences between REST and GraphQL. (Spoiler alert: GraphQL allows for more efficient and flexible data fetching.) We'll use the GraphQL playground to easily generate queries and mutations, providing hands-on experience with this powerful API query language.
We'll query our database and display data using RedwoodJS Cells. Cells are a powerful feature unique to RedwoodJS that simplify data fetching and rendering. We'll learn how to create a cell that handles different all the various states: loading, empty, error, and success. This approach ensures a smooth user experience by displaying the right content at the right time.
We’ll use RedwoodJS's form helpers, which leverage React Hook Form for efficient form management. Then, we'll use GraphQL mutations to create, update, and delete records in our database. Under the hood, RedwoodJS uses Apollo Client to handle GraphQL operations, providing a seamless integration between our frontend and backend.
Authentication within RedwoodJS is straightforward and built-in. Set up is as simple as running a couple of commands in the terminal, allowing developers to quickly add secure user authentication to their applications without the need for complex configurations or third-party services.
RedwoodJS integrates seamlessly with Resend for email functionality, providing built-in mailer functions that simplify the process of sending emails from your application. With RedwoodJS Studio, developers can easily create and test email templates locally, ensuring that emails look and function correctly before deploying.
Background jobs in RedwoodJS allow developers to schedule functions or defer longer-running processes. This improves application performance and user experience. This feature is included in RedwoodJS, out of the box, and is easy to set up.
Lastly, we’ll take a look at React Server Components and the cutting-edge features that are still under development. We'll demo the new APIs and discuss how this technology will shape the future of RedwoodJS applications.
We'll conclude by deploying our application to production using Vercel, RedwoodJS's hosting solution. Vercel simplifies the deployment process to a single line of code, making it effortless to take your application live.
Who is This For?
I help designers and developers build with confidence so they can take their projects and careers to the next level.
I have over 24+ years of web experience and have expertise in product design and fullstack development. I have built hundreds of websites and products for enterprise companies, startups, and even major recording artists. I’ve developed multiple courses like Everything Svelte, KeystoneJS, and Advent of CSS and JavaScript. My podcast, Compressed.fm supports thousands of frontend developers wanting to become full-stack with design and engineering tips.
I currently live in Nashville, TN with my husband, 3 kids, and 2 dogs.
Benefits
When You Register
You'll receive a confirmation email containing all the essential details about the workshop, including the link to join the live session and any preparation steps you might want to take. This email will ensure you're fully prepared for the Freaking Full Stack experience.
Don't keep this workshop to yourself! Learning is always more enjoyable when you're part of a community, so invite others. The more participants we have, the richer our discussions will be, leading to a more dynamic and interactive learning experience for everyone.
Mark your calendar for October 31 and join us live. By attending the workshop in real-time, you'll have the opportunity to ask questions and participate in live coding sessions. The real-time environment allows for immediate feedback and clarification, ensuring you get the most out of every minute of the workshop.
This workshop is free thanks to the generous sponsorship of RedwoodJS. At RedwoodJS, we’re committed to supporting the open source community and providing valuable educational resources for developers. We aim to:
We believe that by investing in developer education, we’re not only helping individual developers grow but also contributing to the advancement of the entire web development community.
To participate in this workshop, you’ll need the following tools and software:
If you have these set up before the workshop, it will ensure a smoother experience.
Yes, there will be a recording of the workshop. After the workshop concludes, we’ll post the recording for all registered participants.
If you’ve registered for the workshop, you’ll receive an email with details on how to access the recording. You can review the content at your own pace or catch up if you’re not able to attend the live session.
While you can attend the workshop if you’re not familiar with JavaScript, it might be challenging to follow along with the more advanced concepts. This workshop is designed for those with at least a basic understanding of JavaScript. However, if you’re eager to learn and don’t mind a steep learning curve, you’re welcome to join. We recommend familiarizing yourself with JavaScript basics before the workshop to get the most out of the experience.
No. You don’t need any prior experience with RedwoodJS or GraphQL. We’ll cover everything you need to know about these technologies during the session. The workshop is designed to introduce these concepts from the ground up, making it accessible for those new to RedwoodJS and GraphQL.
To get the most out of this workshop, you should have:
Having these prerequisites will ensure you can follow along with the hands-on portions of the workshop and maximize your learning experience.
[ ]
Yes! This workshop is suitable for beginners. We will make every effort to make the concepts as accessible and beginner-friendly as possible. While some basic understanding of JavaScript is helpful, we’ll explain each concept thoroughly and provide context for more advanced topics. The workshop is designed to guide you step-by-step through the process of building a full-stack application, ensuring that even those new to full-stack development can follow along and learn effectively.
No, you don’t need to know TypeScript beforehand. We’ll be using TypeScript in the workshop, but we’ll explain all the TypeScript concepts you need to know as we go along. The workshop is designed to be accessible even if you’re new to TypeScript, and we’ll provide clear explanations for any TypeScript-specific features we use.
No, we do not provide a certificate of completion for attending this workshop. The focus is on practical learning and skill development rather than formal certification. However, you’ll gain valuable hands-on experience building a full-stack application, which can be a great addition to your portfolio and demonstrate your skills to potential employers or clients.
This workshop is hands-on. We’ll be doing a substantial amount of live coding throughout the session. While participants aren’t required to code along in real-time, we strongly encourage it for several reasons:
Participants who follow along locally tend to have a better overall experience and are more likely to retain the information. However, if you prefer to watch and take notes, that’s okay too. The recording will be available afterwards, allowing you to code at your own pace later.
This workshop is completely free. There are no hidden costs or upsells. Thanks to the sponsorship of RedwoodJS, we’re able to offer this high-quality, full-stack development workshop at no cost to participants. You won’t be asked to pay for any additional materials, software, or future access. Our goal is to provide valuable education to the developer community without any financial barriers.
By the end of the workshop, you’ll have everything you need to know for building fully functional Hacker News clone using JavaScript. This project will demonstrate your ability to create a complete full-stack application, incorporating:
This hands-on experience will give you a solid understanding of how to build modern JavaScript applications, from concept to deployment. You’ll gain practical skills that can be applied to a wide range of web development projects beyond the workshop.
While the recording will be available later, attending live provides a more engaging and interactive experience.
Yes! Check out the official RedwoodJS Tutorial. This tutorial is a Masterclass in how to build a Full Stack application and the best way to get started.
