Challenge #1

Challenge #1

Welcome! This is Day 1 of the Advent of JavaScript! WOO HOO!

If you haven’t already, I’d encourage you to look around Podia. I’ve included several resources for working getting started, working with GitHub, Storybook, Figma, and Redwood.

Over the next 24 days, we'll be building a full-stack application.

Secret Santa Application

It's a Secret Santa application that will allow users to create an event, invite their friends and family. Once a user has accepted the invitation, they'll be able to add a wish list, making shopping easy. After everyone has RSVPed, the application will match everyone with a Secret Santa.

For today's challenge, we’ll be setting up our Database 🙌

UML Diagram

UPDATE: December 11, 2023

The UML diagram pictured above is slightly different than the one used in the challenge. In Challenge #5, I changed the UserStatus table to be called Invite. I also added 2 additional columns (email and name) and added an owner column to the Event table.

You can use the same diagram used within the Solution content and make the changes, when you get to #5 OR you can work from the updated diagram now. Your choice.


Brief

In today’s challenge, we’ll set up our database and all of our data models.

If you’re using RedwoodJS, like I am, use this repo as a starting point. It includes a library of frontend components so that you don't have to worry about CSS and and can focus on JavaScript as much as possible.

Getting Started

  1. To get started, download the UML diagram. This outlines all the database tables and their relationships. If you're new to backend development, a UML diagram is simply a picture of what the database and all it's tables look like. You can almost think of it like a glorified Excel Spreadsheet. The arrows show how different pieces of data are related.

  2. Take a look around. Look at the project's Figma file to see exactly what we’ll be building and how the data will flow through the application. If you don't have a Figma account, don't worry, you can set one up for free. If you’re not familiar with Figma, I’ve recorded some help videos and posted them on Podia, within the Appendix section

  3. You’re more than welcome to use any framework you’d like. However, the solutions I’m providing are within Redwood. If you want to follow along, you can use this repo as a starting point. — More details on how to use this code and Redwood can be found in the Appendix section of Podia.

  4. Happy coding!

  5. Once you're finished, share your work using #adventofjs

Taking your Project to the Next Level

  • If you want to make this extra challenging, don’t use the data model I provided. Try mapping everything out yourself.

FAQs

  • Can I use libraries / frameworks on these projects?

    • Of course! We're working with RedwoodJS, but you can use whatever tools and frameworks you'd like.

  • Oh no! I'm stuck!

    • Check out the RedwoodJS Discord. We’ve set up a specific channel: Advent Challenge.

    • Join Maker Hour on Wednesday. I’ll be there!

  • Can I use this project in my portfolio?

    • Sure! But, be honest about the work that you did

Merry Coding,

Amy


Special Thanks to Our Sponsor

Thanks to the generosity of our sponsor, RedwoodJS, I’m able to offer all the content for free.

Advent of JavaScript 2023

Buy nowLearn more

👋 Welcome!

  • START HERE!26

Challenge #1 - Setting up the Database

  • Challenge #12
  • Project Files
  • Solution #1

Challenge #2 - Set up an Authentication System

  • Challenge #2
  • Project Files
  • Solution #2

Challenge #3 - Styling the Login Pages

  • Challenge #3
  • Project Files
  • Solution #42

Challenge #4 - Creating a Group / Event Form

  • Challenge #4
  • Project Files
  • Solution #4

Challenge #5 - Invite Page

  • Challenge #5
  • Project Files2
  • Solution #5

Challenge #6 - Edit the Event

  • Challenge #6
  • Project Files
  • Solution #6

Challenge #7: Send an Email Invite to a Friend

  • Challenge #7
  • Project Files1

Challenge #8 - RSVP Page

  • Challenge #8
  • Project Files

Challenge #9 - View the Wish List

  • Challenge #9
  • Project Files

Challenge #10 - Create Wish List

  • Challenge #10
  • Project Files

Challenge #11 - Update the Wish List

  • Challenge #11
  • Project Files

Challenge #12 - Dashboard Page

  • Challenge #12
  • Project Files

Challenge #13 - Match Names Together

  • Project Files
  • Challenge #13

Challenge #14 - Automatically Trigger Matching

  • Challenge #14
  • Project Files

Challenge #15 - Thank You Page

  • Challenge #151
  • Project Files

Challenge #16 - Create your wishlist

  • Challenge #16
  • Project Files

Challenge #17 - Archive of Previous Events

  • Challenge #17
  • Project Files

Challenge #18 - Role Based Access

  • Challenge #18
  • Project Files

Challenge #19 - Seed the Database

  • Challenge #19
  • Project Files

Challenge #20 - Custom Upload Field

  • Challenge #20
  • Project Files

Challenge #21 - Delete an Invite

  • Challenge #21
  • Project Files

Challenge #22 - Send Event Reminders

  • Challenge #22
  • Project Files

Challenge #23 - Outstanding Pieces

  • Challenge #23
  • Project Files

Challenge #24 - Deploying

  • Challenge #24
  • Project Files2

Appendix

  • Getting Help and Support
  • Working with RedwoodJS
  • Working with Storybook
  • Working with Gitpod
  • Working with Github
  • Want more? Where to go from here?