Skip to content
Swizec Teller - a geek with a hatswizec.com

5 apps with the modern web stack

We've been talking about the hyper productive modern web stack and let's be honest: It needs a better name.

Naming is hard, my friend. One of the 2 most difficult things in software engineering: Naming things, cache invalidation, and off-by-one errors.

MggFX7u

Today I wanted to show you some apps I built while researching this new stack for over a year. Best practices are still changing and we're just starting to see what's possible, but patterns are beginning to emerge.

That's the perfect time to jump into the future ✌️

ServerlessReact.Dev course platform

Starting with my new course platform – great example of feeling pain and solving the problem.

My ebooks used to live on Gumroad. Great checkout experience, just enough tools for creators, poor UX for consuming.

So I switched to Teachable. You buy on Gumroad and a Zapier integration gives you a Teachable account with the right permissions.

Teachable's authoring UX is terrible.

Markdown is my jam so I spent thousands of dollars on engineering to make Teachable work with markdown. Yes I legit hired an engineer to help me.

The thought of making another course on Teachable filled me with dread.

Looked around and Podia made me 😍 ... until I learned it doesn't do markdown, supports only 1 video per lesson, can't embed CodeSandbox, doesn't support random iframes (for graphql playgrounds :P), etc.

"Hey wait a minute, we just built an amazing platform for Serverless Handbook! Why don't we use that?"

Serverless Handbook started life as the Rebass Docs. I love Rebass and I love their docs. So I stole borrowed their open source Gatsby code.

MDX support (markdown with React), fast loads, mobile design, static builds, even has themes for different colors 😍

I CAN DO EVERYTHING THE POWER IS MINE

power giphy

What does a course platform need that a free book doesn't have?

Authentication and authorization.

Sat down over a couple livestreams ... and it worked

Click through for source
Click through for source

Click through for source
Click through for source

You buy on Gumroad.

Gumroad pings a serverless lambda function.

Lambda function creates an Auth0 account. Gives you the Student role.

You go to ServerlessReact.Dev and click Student Login.

useAuth redirects you to the Auth0 login page.

You come back and voila, access to the course.

rock_on giphy

And THAT's what I want to teach you with ServerlessReact.Dev {% if subscriber.first_name != blank %} {{ subscriber.first_name | truncatewords: 1, "" | capitalize }} {% else %} my friend {% endif %}. Spot a problem πŸ‘‰ create the solution.

H43WagD

TechLetterApp

InwptHv

You've seen this one before. It's the 24hrstartup challenge app that first made me excited about this modern new stack.

Pat Walls posed a challenge in November 2018:

Can you build & launch a startup in 24 hours? Do it live on stream!

Pat is crazy. There's no way.

Fuck it let's try.

Click through for source
Click through for source

12 hours later TechLetter.App was born. 😳

Write email in markdown as usual. Paste into box on the left, get rendered HTML on the right. Nothing special, just some markdown parsing and rendering.

Now here's where it gets cool πŸ‘‡

This app uses an AWS Lambda to take screenshots of tweets, make youtube and instagram thumbnails, and make beautiful screenshots of code samples.

I used to pay someone \\\$500/month to do that for me.

You see the power of TechLetter.App every time you read my emails πŸ˜‰

Yes I've fixed many bugs and added tiny little features since that first 24hr challenge. Even bought a domain to fully productize, but haven't.

ThreadCompiler

This one died a prototype. You either die a prototype or become that code everyone hates to use.

I realized I was playing catchup with Twitter's UX and that's a losing proposition right there. You can still try it out tho πŸ‘‡

ThreadCompiler is an offline-first React app built with Gatsby. UI renders at compile time and becomes static. On page load the React app takes over and you can do whatever you want.

In this case that's a combination of markdown parsing and rendering, talking to Auth0 to authenticate users with Twitter, and using another AWS Lambda to publish tweets.

All built with JavaScript front and back. No databases, just Auth0.

Shared grocery list

Yawn, a grocery list right? It's just a TODOapp.

BUT THIS ONE IS REALLY COOL!

Check it out πŸ‘‡

  • Gatsby-based offline-first React UI
  • Initial list compiled into the app at compile time with GraphQL
  • On page load, uses GraphQL to ask a Serverless Lambda for current state
  • Refreshes the UI
  • All interactions sync right back to the Serverless Lambda with GraphQL
  • Global list stored in a simple DB

Server with user data, accessible by all, without writing a single specific API. No REST routes to manage, no servers to keep up, just a Lambda that responds to GraphQL queries.

This was the example app for my sold-out workshop at Reactathon in March 2019. I'm doing another one this march.

Spark Joy

Spark Joy is where I really pushed this stack. We pushed this stack. It was built during a live video series experiment mid 2019.

You can try it out with the thumbsup/down buttons at the end of this email πŸ˜›

I like feedback. I really like feedback. On everything.

That's why any time you buy something from me the first thing you get is a question: "Why did you buy this?"

And why my emails used to have ugly typeforms: "Hey did you enjoy this?"

That shit got tedious so I built Spark Joy. A simple thumbsup/down widget that gets all the info with much less friction.

Where emails used to get 10, maybe 20, responses, they now get 60 and more. That's hella more feedback I can use to improve.

It's also where the prototype for useAuth was born. ✌️

Spark-joy creates a new static page for every type of widget you create and triggers a Netlify build+deploy.

So when you vote the page loads fast. None of that slow TypeForm crap.

And this is just the beginning my friend. This hyper productive new stack blows my mind. So much is possible that wasn't before

I'm excited to see what you build.

Cheers,
~Swizec

PS: you can learn behind-the-scenes lessons of these projects and others in ServerlessReact.Dev. The \\\$100 launch discount ends on Friday.

PPS: much of my excitement for this stack comes from lessons learned while building a 7-figure business from scratch on Rails, moving towards SinglePageApps, now JAMStack and Serverless at my day job. ServerlessReact.Dev really does include lessons from practice :)

Did you enjoy this article?

Published on January 29th, 2020 in Side Projects

Learned something new?
Want to become a high value JavaScript expert?

Here's how it works πŸ‘‡

Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet πŸ“–right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

Start with an interactive cheatsheet πŸ“–

Then get thoughtful letters πŸ’Œ on mindsets, tactics, and technical skills for your career.

"Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. πŸ‘Œ"

~ Ashish Kumar

Join over 10,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

Have a burning question that you think I can answer?Β I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

Ready to Stop copy pasting D3 examples and create data visualizations of your own? Β Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first πŸ’° on the side with ServerlessReact.Dev

Want to brush up on your modern JavaScript syntax?Β Check out my interactive cheatsheet: es6cheatsheet.com

By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❀️