Working with Redwood

Working with Redwood

RedwoodJS is a full-stack React framework. Whether you’re a beginning dev or a seasoned veteran, Redwood is a fantastic way to build web applications. — Granted, they’re sponsoring this project, but it really is my favorite way to write code. As we start building our project, I think you’ll quickly see why.

The tech stack is superb, taking the best in class JavaScript libraries and frameworks. It handles all the setup and configuration so that you can focus on the actual building.

There’s an unparalleled attention to detail and the developer experience. For example, it provides first class support for Storybook, which is where we’ll be spending a majority of our time.

Any details you need, should be covered in the solutions, but if you’re looking for more, check out:

  • RedwoodJS Website

  • Redwood Documentation, more specifically, the tutorial which walks through a majority of the features Redwood has to offer.

  • I’ve also been working on a YouTube series, where we build a Hacker News clone.

Advent of CSS 2023

Buy nowLearn more

👋 Welcome

  • START HERE!2
  • Setting up your Project2

Challenge #1 - Building An Icon Component

  • Challenge #18
  • Project Files
  • Solution #16

Challenge #2 - Building an Avatar Component

  • Challenge #2
  • Project Files
  • Solution #25

Challenge #3 - Form Fields and CSS Only Validation

  • Challenge #34
  • Project Files
  • Solution #35

Challenge #4 - Show / Hide Password

  • Challenge #4
  • Project Files
  • Solution #4

Challenge #5 - Login Layout

  • Challenge #5
  • Project Files1
  • Solution #5

Challenge #6 - Slide up Footer

  • Challenge #6
  • Project Files
  • Solution #6

Challenge #7 - Hamburger Menu

  • Challenge #7
  • Project Files
  • Solution #7

Challenge #8 - Slide Out Navigation

  • Challenge #8
  • Project Files
  • Solution #8

Challenge #9 - Dropdown Menu

  • Challenge #9
  • Project Files
  • Solution #9

Challenge #10 - Interior Page Layout

  • Challenge #10
  • Project Files
  • Solution #10

Challenge #11 - Custom Checkbox

  • Challenge #11
  • Project Files
  • Solution #111

Challenge #12 - RSVP Pages

  • Challenge #12
  • Project Files
  • Solution #12

Challenge #13: Invite Card

  • Challenge #13
  • Project Files
  • Solution #13

Challenge #14 - Invite Group Form

  • Challenge #14
  • Project Files
  • Solution #14

Challenge #15 - Modal

  • Challenge #15
  • Project Files
  • Solution #15

Challenge #16 - Create your wishlist

  • Challenge #16
  • Project Files
  • Solution #16

Challenge #17 - Slide Out Panel

  • Challenge #17
  • Project Files
  • Solution #17

Challenge #18 - View Your Wish List Layout

  • Challenge #18
  • Project Files3

Challenge #19 - Expanding and Collapsing Accordion

  • Challenge #19
  • Project Files

Challenge #20 - Dashboard Page

  • Challenge #20
  • Project Files1

Challenge #21 - Pairing

  • Challenge #21
  • Project Files

Challenge #22 - Thank You Note

  • Challenge #22
  • Project Files

Challenge #23 - Spinner for the Loading State

  • Challenge #23
  • Project Files

Challenge #24 - Light and Dark Theme Switcher

  • Challenge #24
  • Project Files

Appendix

  • Getting Help and Support
  • Working with GitHub
  • Working with Gitpod2
  • Working with Storybook
  • Working with Redwood
  • Testimonials
  • Want more? Where to go from here?