Swizec Teller - a geek with a hatswizec.com

Senior Mindset Book

Get promoted, earn a bigger salary, work for top companies

Senior Engineer Mindset cover
Learn more

    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. 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 :)

    Published on January 29th, 2020 in Side Projects

    Did you enjoy this article?

    Continue reading about 5 apps with the modern web stack

    Semantically similar articles hand-picked by GPT-4

    Senior Mindset Book

    Get promoted, earn a bigger salary, work for top companies

    Learn more

    Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.

    Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.

    Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help 👉 swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.

    Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers 👉 ServerlessHandbook.dev

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

    Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections

    Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog

    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 ❤️

    Created by Swizec with ❤️