Thread by @rwieruch, When I released the rewrite of my "The Road to React"-book, I [...]

When I released the rewrite of my "The Road to React"-book, I published it on my very new course website

https://courses.robinwieruch.de Super proud of the result!

For anyone who is interested, I want to share what went into this new website

1/n https://twitter.com/rwieruch/status/1237769938267525122

Previously https://www.roadtoreact.com was the entire course website. Now it's only the landing page built with @gatsbyjs which shares the same theme with my personal website

https://www.robinwieruch.de This applies to all my other course landing pages as well.

2/n

Previously https://www.roadtoreact.com was the entire course website. Now it's only the landing page built with @gatsbyjs which shares the same theme with my personal website https://www.robinwieruch.de This applies to all my other course landing pages as well.2/n

My new course website https://courses.robinwieruch.de started as open source project and still is open source. I think it's a great example showing the dynamics of a growing tech stack:

NextJs by @zeithq

GraphQL with @apollographql

Firebase

TS

3/n https://twitter.com/rwieruch/status/1217469031550259200

Just cloning the project doesn't suffice anymore, because there are a few moving parts:

Stripe

PayPal

Coupons

Firebase Auth & DB

S3 for File Storage

Sentry Tracking

Automated Slack Invite

..

Trying to keep everything documented in the README though.

4/n

The entire authentication is powered by @firebase It's just amazing how all the essentials are covered by it.

Sign Out

Password Reset

Password Change

Email Change

Firebase is used on Next server-side though.

5/n

Why Firebase on the server-side?

1) Lightweight client
2) Authorization on a GraphQL level
3) Makes potential migration to PostgreSQL easier

Essentially that's https://firebase.google.com/docs/auth/admin/manage-cookies the guide I followed to get FB from client to server.

Rel. PR: https://github.com/rwieruch/nextjs-firebase-authentication/commit/5df46ad4e4a11470153244396c22db3a1580c628

6/n

On the Next.js server-side I use Apollo Server by @apollographql with Micro by ZEIT. It's the first time I used Micro: Everything works as expected, but it can become a burden if you hit a problem and can't find the solution to it, because it isn't super widely used yet.

7/n

Apollo Server goes with the schema-first approach. Which is fine until you want to introduce TS. When I eventually decided to go with TS, it still worked out with GraphQL Code Generator.

8/n https://graphql-code-generator.com/

GraphQL Code Generator · Generate code from your GraphQL schema with a single function call

Generate code from your GraphQL schema with a single function call

https://graphql-code-generator.com/

GraphQL Code Generator turned out to be a blessing once it had been set up properly. All types for backend and frontend are generated on the fly.

I had no chance to check out TypeGraphQL yet. What do you think about it?

CC @benawad

9/n

A few days ago I introduced PostgreSQL with TypeORM powered by @digitalocean as replacement for Firebase DB. I migrated all data over and I am keeping the data in sync with both DBs for now. The next week will show whether I stick to FB or PostgreSQL.

10/n

PostgreSQL

TS support with TypeORM

no FB lock-in

career-wise better to know SQL than FB queries

SQL > NoSQL

https://twitter.com/rwieruch/status/1242735242512928768

Firebase

Still using it for Auth...

I guess FB can be used like a SQL if hierarchies are kept flat with foreign keys

11/n

https://twitter.com/rwieruch/status/1242735242512928768

In terms of authorization I use graphql-shield instead of graphql-resolvers with combineResolvers.

Generally I dont like the indirection graphql-shield introduces. But it integrated nicely into my GraphQL TS code. What's your opinion here?

Rel. PR: https://github.com/rwieruch/nextjs-firebase-authentication/commit/f90e2233a99807410b90d5a256d200b519946a6d

12/n

graphql-resolvers to graphql-shield · rwieruch/nextjs-firebase-authentication@f90e223

https://github.com/rwieruch/nextjs-firebase-authentication/commit/f90e2233a99807410b90d5a256d200b519946a6d

All file downloads, in my case book downloads, go through NextJS API with GraphQL to @digitalocean Spaces. If you have used AWS S3 before, you will recognize the API.

13/n

The React application uses @AntDesignUI It's the 1. time I am using it and so far I can only recommend it. Previously I've used Material UI and Semantic UI.

Still wanted to check out Chakra UI, because @thekitze is raving about it!

Didn't optimize for mobile yet

14/n

The React application uses @AntDesignUI It's the 1. time I am using it and so far I can only recommend it. Previously I've used Material UI and Semantic UI.Still wanted to check out Chakra UI, because @thekitze is raving about it!Didn't optimize for mobile yet 14/n

All my courses complement the books I am writing about React and other tech stacks. There is a great landscape of video courses, but not so much material for people learning with books. I want to close this gap with this website which eventually opens up for more authors.

15/n

MDX (it's awesome!) is already used on my website https://www.robinwieruch.de and now I am using it with prism-react-renderer for the online book reading experience too.

An internal script helps me keeping book files (PDF etc.) and markdown in sync.

16/n

There are 3 bundles for each book:

Bare Essentials: Book as PDF, EPUB, MOBI

Essentials: + Book in Website

Professional: + Lots of extra tutorials.

If you decide for a smaller bundle, it's now possible to upgrade the bundle later.

17/n

There are 3 bundles for each book: Bare Essentials: Book as PDF, EPUB, MOBI Essentials: + Book in Website Professional: + Lots of extra tutorials.If you decide for a smaller bundle, it's now possible to upgrade the bundle later.17/n

The buying flow is done in 2 steps:

1) If you don't have an account, it asks you to sign in. If you are already signed in, you start at 2).
2) Payment with Stripe or PayPal.

Thoughts about the buying flow in next tweets

18/n

The buying flow is done in 2 steps:1) If you don't have an account, it asks you to sign in. If you are already signed in, you start at 2).2) Payment with Stripe or PayPal.Thoughts about the buying flow in next tweets 18/n

Thoughts

Step 2 without 1 would improve the conversation rate, but it seemed too much code hassle for now.

I had PayPal on pause for 6 months. After enabling it, sales went up.

Coupon for PPP https://purchasing-power-parity.com to support countries with weak currencies.

19/n

Purchasing Power Parity (PPP) API

Free API for Purchasing Power Parity (PPP); making products and services affordable around the world.

https://purchasing-power-parity.com

Thoughts continued...

PayPal sale happens on-site, Stripe (Checkout) on a separate website. Not sure if conversation rate for Stripe would increase if it would be kept on-site too.

20/n

Why NextJs?

1) I'm hugely inspired by ppl like @wesbos and @stolinski who run their platforms with NextJs these days. Since I am most familiar with React, NextJs was the the choice for me as well.

21/n

Why NextJs?

2) Historically I moved from (A) clearly separated client-server architectures, short term over to (B) Next with microservices, over to (C) _only_ Next with API.

A) still valid option
B) managing Microservices felt brittle as solo dev
C) everything at 1 place!

22/n

Now I've a few independent landing pages powered by @gatsbyjs for every book; which all share a theme.

Every landing page points to my course website which manages the rest.

Hugely inspired by @wesbos and his

Bos Monster!

23/n

Landing pages, course website, personal website and a few other APIs powering the platform are all running on one @digitalocean Droplet.

For most of them I've set up staging servers and automated deploys. Lots of little work

Outdated read: https://www.robinwieruch.de/deploy-applications-digital-ocean

24/n

Host a single or multiple applications on Digital Ocean - RWieruch

An extensive walkthrough on how to host your application on Digital Ocean. It showcases how multiple static websites can be hosted in one Droplet by using server blocks and how to deploy multiple...

https://www.robinwieruch.de/deploy-applications-digital-ocean

I will keep you up-to-date with new changes in this thread. Lots of features to come!

If you have any questions, opinions or suggestions, I'd love to hear them

I hope you liked this summary of what went into all of this

25/n

Today I finished the partner program

Partners can send referral links and earn a commission.

Partners can track their

* referral link clicks (visitors)
* sales
* monthly payments

Online: https://courses.robinwieruch.de/partner

Rel. PR: https://github.com/rwieruch/nextjs-firebase-authentication/pull/77

26/n

Today I finished the partner program Partners can send referral links and earn a commission.Partners can track their * referral link clicks (visitors)* sales* monthly paymentsOnline: https://courses.robinwieruch.de/partner Rel. PR: https://github.com/rwieruch/nextjs-firebase-authentication/pull/7726/n

Lots of people asked me about student discounts: Now I am able to create coupons for them

Handed out more than 30 today!

If you are a student or a teacher with students, ask me about the discount and I will hand them out

Rel. PR: https://github.com/rwieruch/nextjs-firebase-authentication/pull/78

27/n

Feat/coupon by rwieruch · Pull Request #78 · rwieruch/nextjs-firebase-authentication

as admin one is able to add custom coupons custom coupons are verified and removed after a successful payment coupons can expire. if new coupons are created, expired coupons are removed.

https://github.com/rwieruch/nextjs-firebase-authentication/pull/78

You can follow @rwieruch.

Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled: