Kitze
K
Hi, I'm Kitze! I made Sizzy, Twizzle, JSUI, OK Google, Lucky Retweet etc. I founded React Academy to teach React & GraphQL around the world. I also make YouTube Videos and stream on Twitch.

From Hello World to a production app: The magic of Blitz

You already know that I'm pretty frustrated with the way we do things on the web. In order to fetch a list of things and display them as rectangles on a webpage, we need to jump through 1938137 hoops. What is this, Circus Charlie? Anyone? Remember that game??? I'm old 😭

 
Cover image by
@art_maltsev

The problem with our current stack

The process of making a web app is so unnecessarily complex and so many people are going for a SPA even when it's not needed. GraphQL makes working with an API easy, but it still involves building that API, and writing a lot of boilerplate. You might not mind all of that until someone removes the layer for you. And that's Blitz.

 

"Damn, I just want to fetch some data directly from the database and display it!" - You, probably

 

"You can do that with PHP and raw SQL..." - Someone on HN, probably

 

"LMAO" - You

 

"Well, why don't you use Rails?" - Someone on Reddit, probably

 

"I only know JavaScript and I want to use React" - You, probably

 

"Welp, too bad there's nothing similar to Rails in the React world..." - Someone on Twitter, probably

 

"Hey, what if there was a Fullstack React framework, similar to Ruby on Rails?" - Blitz, if it could talk, probably

 

Meteor crying in the corner, probably

 

What is Blitz?

Blitz "removes" the API layer in a very clever way so you can directly call functions from your backend, which completely changes the game. Actually, this is not the best way to describe what it does, so you better read the docs. TL;DR: it's magic.

 

What I like about Blitz is that it builds on top of already solid solutions like Next.js, react-query, and Prisma. I already used them in other projects, but I love the way Blitz glues all of them together and it magically works.

 

The ability to get whatever you want directly from the database, with the nicely typed API from Prisma, and then just display it, is a pretty wonderful experience. It makes me feel that for years we had no frickin' clue why we did things the way we did them, until finally someone realized that we don't have to do them that way.

 

When generating a new Blitz app you get all the authentication boilerplate generated for you and I all I have to say is fucking finally. It's 2020, I don't want to build the authentication layer again, and again, and again, and again. Hey frameworks, just let me get me the current user with const user = useCurrentUser() and don't bother me with anything else.

 

I can't even describe how fast you can ship a product when there is no API layer and boilerplate involved.

 

There are similar frameworks to Blitz which go in a completely different direction by rebuilding most of the stack. Personally, I'm tired of the React community constantly reinventing things that don't need reinventing. Next.js is already amazing, so just imagine how much code we'd be able to reuse if we all agree on using it by default. More reusing, less reinventing, please.

 

Launching a production app in a few days

I already did two streams with Brandon, the creator of Blitz, and I couldn't wait to actually try Blitz on a real project. The problem is, I needed a real project because I didn't want to waste my time on some demo gibberish which is never going to see the light of day.

 

I got frustrated by the app that I was using for writing changelogs for Sizzy, so I decided to sit down and write my own tool with some more advanced features that will make the process easier.

 

I livestreamed the entire process from "hello world" to deployment and I couldn't believe that it only took me only 5 days.

 

Actually, the majority of the work was done in only 2 days, which is crazy. Someone commented "my boss shouldn't see this" on the stream and the credit for that goes to Blitz. You can definitely ship faster than a team of people who would argue about the modeling of the API, raw SQL queries, and whether to use redux-saga or RxJS for fetching the data.

 

Hey Kitze, if you finished most of the things in 2 days, why did it take you 5 days?

 

Great question, reader.

 
  • Day 3: Polishing the design and adding extra features
  • Day 4: Deployment. I deployed the database to DigitalOcean without a problem, but I had a problem with deploying the Blitz app to Vercel. Turns out, the problem wasn't with Blitz or Vercel and it was ... TypeScript. Yup, I couldn't deploy the app because TS was being a pain in the ass, and the Vercel logs didn't show that. I had to dive deep, find the problematic files, and fix everything, so that took most of the day.
  • Day 5: CSS. Of course. You can put as many layers as you want on top of CSS, it's still CSS at the end of the day. I literally lost an entire day on centering things and making sure the fixed header and sticky footer layouts work in Safari on iOS. Oh, by the way, fuck Safari. We finally got rid of the pain that's IE pain, but Safari is here to replace it.

Why another changelog app?

I would never make an app if there wasn't an actual need for it. There are tons of Saas products for making changelogs, but I had something different in mind.

 

I was using a popular solution for writing the Sizzy changelogs for 1.5 years. However, the changelog was a huge markdown document, so we had to use Notion boards to plan the work as individual cards, and then collaborate on them with the Sizzy team. When we were done, we'd export markdown from all the cards and merge them in a giant markdown document. In the past 3 months, I'm working on the changelog alone, so I decided to directly write the giant markdown document. Aside from being an overwhelming experience, I also lost my 3 hours of progress by accidentally closing the tab.

 

So I said: fuck it, I'd rather build a proper changelog app instead of writing this changelog again.

 

I wanted to improve the process of collaborating and publishing a changelog, and in the process, I came up with a bunch of ideas that will hopefully change the changelog game. Wait... was there ever a changelog game? If not, there is now. Boom 🎤

 

Wait, the mic should actually drop.

 

🎤

 

There.

 

Introducing Fungarzione - The Changelog Of The Future

Instead of publishing a giant markdown document, a team of collaborators would start working on individual entries. The editor supports Markdown, but also MDX, with a set of custom components that would make the changelogs way better.

 

Creating a changelog entry is super simple, and it's not as overwhelming as starting a giant markdown document.

 

 

Individual entries can then progress from Draft to Ready For Review, to Published. Team collaboration features like assigning people and commenting on the entries will be available when registration is open to everyone.

 

 

After creating a bunch of entries, a changelog is created by combininig individual entries, as well as adding a list of small bug fixes and improvements, which will appear grouped at the end of the document.

 

 

Then, the draft changelog is moved to "Ready for Review" and it cannot be published, unless all of the entries in that changelog area already published.

 

 

Users can leave feedback individually for each changelog, as well as subscribe to get an email when a new changelog is published.

 

 

Fungarzione is live

I already ported the last 10 changelogs for Sizzy to Fungarzione and I'm already in love with the publishing experience. It's not that overwhelming and I can work on the changelog in chunks.

 

self high-five

 

Also, to be honest, even with my mediocre design skills, it already looks better than some of the popular changelog apps out there 🙈

 

taps myself on the back a bit more

 

If you're interested in signing up you can leave your email here and you'll get a notification when public access is available (hopefully soon).

 

I'm also looking for people who'd like to port their changelog now, so I can get some feedback on the editor experience. You just need to have a production app with an established user base, as well as an existing changelog. Just shoot me an email and we can discuss.

 

Conclusion on Blitz

I still have to explore Blitz a bit more to figure out all the downsides, but I think that I'd definitely pick Blitz for most of my future apps, unless I have a really specific reason not to. Brandon said there will be a way to reuse the same Blitz client in React Native apps, so you won't miss the actual API layer.

 

Fungarzione

I know what you're thinking right now.

 

Fungarzione?!

 

FUNGARZIONE?!?! What the hell does the name mean, Kitze?

 

Fungarzione comes from the word Fungangarzione. And the origin of Fungangarzione is really a long story, so I guess you'll have to hang out in my stream to find out 😜 I'm planning to live stream the rest of the work on this app, and trust me, there are too way too many things that I'd like to do. If you have any ideas or suggestions you're more welcome to join my stream! 🙌

 

I want to give another shout-out to all the people on Twitch who helped me while I was building this app (even though they're credited in the footer of the page).

 

There's no way I would've shipped it in such a short time without your help 💜