Hey there! These are written notes, code demos, and video links for the workshops I (Matt, he/him) ran at QWER Hacks '21 - on React, Firebase, and the Education Track! Feel free to poke around if you're interested!

If you've got any questions, feel free to ping me - either as a mentor in the hackathon, or in general by email at [email protected].

• Workshop Legend
  • React
  • Firebase (Cloud Firestore)
  • Education Track
• FAQs
  • Where can I find videos?
  • What do I need to know to take X workshop?
  • I'm a bit stuck on my project during the hackathon. Can I get help?
  • I've got a question on a topic that's not directly covered in a tutorial. Where should I look for help?
  • Who is Matt?
• Resources and Thanks
• Licensing

This repository has a lot of stuff going on! For your convenience, here are all of the workshop materials, divided up by topic.

The React 101 core workshop; this is what you need to get your project up and running, and learn the basics of React! This is broken up into bite-sized chunks, where each chunk is ~ 5-8 minutes.

0. Setting up Node.js and a quick project tour (written)
1. Hello World with React and Create React App
2. Creating Your First Component
3. Hooks and State in React
4. Lists
5. Forms
6. Conditional Rendering
7. Using GitHub and Netlify to Deploy Your App For Free

Here's the YouTube playlist for the videos in order, for your convenience.

Some bonus content! Feel free to check these out if they interest you, but you might not need them for your project.

• Should I use React in my hackathon project?
• Using Firestore with React: the useEffect hook

The "actual" workshop; here, we take a simple vanilla JS app and integrate Firebase. Similar to the React videos, the workshop is broken up into small chunks!

0. Setting up Firestore and the Firebase Console
1. Basic Data Operatins (CRUD) in Firestore:
   • Creating Sample Data and Reading it
   • Programatically Creating, Deleting, and Updating Data
2. Cool Tricks with Firestore
   • Listeners
   • Batched Writes
   • Querying

Here's the YouTube playlist for the videos in order, for your convenience.

And an extra goodie:

• Using Firestore with React: the useEffect hook

I did the video intro for the education track! You watch the video or read a rough outline of my script.

There are two places you can find videos of the workshop! The first is on the Tikkl page for hackers (you would've received these links when you registered); the workshops are livestreamed at certain times in the day.

The second is on ACM at UCLA's YouTube channel. In particular,

• The React 101 playlist
• The Firestore 101 playlist
• The Education Track video

For both the React and Firestore workshops, I do assume that you've seen a little bit of HTML and CSS, and have used a programming language before. If it's JavaScript, that helps, but syntactically it's pretty similar to most other languages you might've encountered (e.g. C++, Python, Java).

If you haven't used HTML and CSS before, it's not the worst deal in the world, but we'd recommend that you brush up on those first! Check out Interneting Is Hard's Basic Web Pages and Hello, CSS tutorials for a quick read, or maybe ACM Hack's Intro HTML/CSS for a longer watch.

If the JavaScript portion of the React workshop confused you, it may be worth spending a bit of time catching up on that first! For a short-ish read, Javascript.info's JavaScript Fundamentals are solid, as is Lisa Tagliaferri and Tania Rascia's How To Code in JavaScript series; for a longer watch, check out ACM Hack's Intro to JS.

Yup! QWER Hacks '21 is doing mentorship through Discord this year! If you need help, bop into voice chat or text channels - a mentor (or quite a few) will be there to help you out!

Good question! Luckily for us, the internet has tons of great resources, including Google! If a quick Google isn't super helpful, consider:

• poking around the official docs: here are React's (which are quite solid), and here are Firestore's.
• skimming other tutorials: React has a great official tutorial, and Firebase's is alright too. Tania Rascia has a great React tutorial too!
• use StackOverflow! There's no shame, and it's likely that many others have run into your problem too!
• ask us! QWER Hacks has a mentor system through Discord, and quite a few of the mentors are experienced in React, Firebase/Firestore, and web development!

Glad you asked! I (Matt) am a third-year CS & Math-Econ major at UCLA, and the current president of ACM Teach LA. I'm really passionate about education, technology, and their intersection - which is something that I love doing at QWER Hacks and Teach LA! I'm also particularly passionate about making tech a more diverse and welcoming place, which is an issue that definitely needs some work. I spend a lot of time working on EdTech, training developers, and doing mentorship - feel free to ask me about that!

In terms of experience, I'm definitely not an absolute professional, but I've done quite a bit of web development over the years! I've worked with React in a variety of contexts - in a startup, in a mid-sized company, at a big tech company, and in personal projects. I've used Firebase (and Firestore) at ACM Teach LA and in personal projects. More broadly, I've done stuff all over the stack:

• web design with Photoshop, Figma
• frontend javascript: React, Angular, jQuery, typical vanilla JS, many libraries!
• backend-adjacent: webservers with Python (Flask, Django), PHP, Java
• databases: SQL, Firebase/Firestore/RTDB, some MongoDB
• misc: git(hub), CI/CD (GitHub Actions, Netlify, Travis CI, AppVeyor), Electron

If you've got questions about these things, or more broadly anything related to web development, feel free to hit me up through the mentor channels at QWER Hacks!

Matt has taught a few variants of these workshops before; past iterations include:

• QWER Hacks 2020's Intro to Web Dev with React and Firebase
• Learning Lab Crash Course: Intro to React
• Learning Lab Crash Course: Intermediate React
• Learning Lab Crash Course: React Hooks
• Learning Lab Crash Course: Misc DevOps
• Learning Lab Crash Course: Intro to Firebase

He'd also like to thank ACM Hack for Hackschool, which covers many intro to web development topics; he borrowed the BTS Twitter photos used in "Should I use React in my hackathon project?" from their Hackschool 2020, Intro to React Workshop.

The contents of this repository are dual-licensed under the MIT License and the Creative Commons Attribution 4.0 License; feel free to use whichever license suits your purpose better.

I'd love to hear if you found this helpful, or if you have any suggestions! Please send me an email at [email protected].