Build and launch a Modern WebApp - workshop by Swizec

modernwebapp.dev

Swizec teaching at Reactathon 2019

Hello friend 👋

Welcome to Swizec's Build and launch a Modern WebApp workshop.

Today you're going to learn a bunch of stuff. Some of it in detail, some of it just enough to get stuff working. Our goal is to build an app together and leave with enough knowledge to bring your ideas to life from scratch.

The pitch ⁉️

The web has never been so productive. You can build and launch a whole new app in just a few hours. It’s crazy! You can build what huge teams with large budgets could only dream of a few years ago.

  • Beautiful UI? Got that.
  • Great SEO? Yep. Easy.
  • Amazing lighthouse speed scores? You got it.
  • Running heavy code on the backend? Done.
  • Saving user data? Yepp.
  • Works on
    • mobile? Of course.
  • What about an offline PWA? D’oh.
  • Makes money? Yep got that too.

Maybe it’s not your job to do all that in your company right now. The bigger the company, the smaller your area of expertise. But wouldn’t it be awesome, if you could do all of that?

What if next time you have an idea for a great feature, you just build it? Own the whole stack from start to finish. You’d be a superhero!

Or maybe it’s just for you. Great idea for a project, an app, a painful problem you want to solve? Now you can.

Stuff you should know

To get the most out of today's workshop, you should be familiar with 👇

  • React
  • stateful/declarative rendering
  • JSX
  • modern ES6+ syntax
  • component lifecycles
  • some familiary with styled-components
  • we're using hooks so familiarity with those will help :)

But fear not!

I am here to guide you. We'll go through everything together. :)

Here's what we're gonna build

Our goal today

Think of this as our setlist 🤘

  • 🕵️‍♀️ how to set up a static webapp with Gatsby
  • ❓ why that's important for SEO and speed scores
  • 🎨 how to build good-enough looking UIs without design skills
  • 🎓 how to move some functionality to the backend with serverless
  • 📚 how to use serverless to store data
  • 🔧 using GraphQL to query your data
  • 🔧 using GraphQL to update your data
  • 🗃 uploading files to S3 from the browser
  • 🎣 React Hooks

You’ll leave this full-day workshop knowing some of the most powerful (and fun!) technologies that make web development in 2019 so amazing.

Swizec Teller

Hi, I’m Swizec Teller, a geek with a hat. I help programmers become software engineers.

You can find out stuff about me, if you ask Google. But generally speaking I have:

Let's get down to business

This is an interactive workshop. If you have a question, ask. If something doesn't make sense, ask. If something is confusing, ask. If I'm not making sense, ask. If your code doesn't work, ask.

You will write code today. Some code will live on your computer, some in the browser.

We will take breaks.

Code you'll write today works with React 16 and uses modern ES6+. We'll assume a development environment created with create-react-app. This gives us some special powers. I will point them out.

Some stuff I've built with this stack

Here's our setlist for today 👇

Setlist

🎊 Fin

Before you head out

Please take a moment to answer a couple questions. Helps me improve, makes you feel good.

Cheers,

~Swizec