Have you read the title ? Yes, It is not a joke ! Seriously, let me explain. You don’t need to learn Laravel (It is a nice framework, but I don’t know why it is too opinionated in Myanmar) just to build a to-do-list app. For some types of apps — even though there are a lot — you don’t need to use complicated things: docker, kubernetes, CI/CD, networking and so on. It is costly and super expensive to scale a full stack development. Trust me ! I have a regret after scaling and deploying one of my projects on AWS for the entire month. Another day, another whining on my blog. Well, good news ! Your projects might not need those complicated things. Welcome to the age of serverless and meta framework.

Writer’s Notes
I decided to write this blog thanks to Theo’s t3 stack. Here, feel free to check his youtube channel and subscribe to it: Theo - ping.gg.

What Are You Doing Right Now ?

Well, for example, let’s go with an ecommerce website with full authentication, databases and UI/UX. Here is what you might do: build API ( Flask, Laravel… ) from scratch; for frontend, you don’t like plain HTML, so, you might probably go with JS framework, and for databases, you might go with SQL databases. You got your project set up, but the problem now is deploying hell. Congratulations. Your overall hosting might cost you around $20 - $80 depending on the services even though you have no users. For a simple website like that, you don’t need to scale like that. Well, let me show you a solution.

Welcome To The Land Of Serverless

What is Serverless?

Serverless are cheaper — not better ( I will explain why later on ) — alternative for building an entire server. It might confuse you, but serverless is a server, but unlike a server, it only runs when you request data. For example, in server architecture, the server is 24/7 running, and requests and responses are sent instantaneously multiple times throughout the time. What serverless does here is when you make a request, it will run the program and send you the data and after that it will shut down the server back. That’s why it is cheaper.

If you are familiar with firebase cloud function, google cloud run and AWS lambda, then this might not be a big deal. So, serverless solves the issue? Nope. It got a thing called cold start. Essentially what it means is like: when you make the request if the server is shut down, it needs to run the container, and it might take like 1s-4s depending on the situation. This might be an issue for some of the programs like real time data like Uber,Foodpanda and Grab where GPS location is constantly needed to be fetched. But, there are some alternatives and cold starts problems can be solved with edge-functions.

Edge-function: Is "edge" computing really faster ?

Architecture

Well, now let's talk about architecture ( techstacks ). Also, let’s make subscription based websites a main example here. For right now, I am going to use NextJS + NextAuth + Vercel Serverless ( Lambda ) + MongoDB as my main techstack. And, if you become pro, you can use T3 stack

( trpc, tailwind and typescript ) — which is my favourite thing right now — for things like type safety, file routing and DX.

Here is a further breakdown:

1. NextJs is a meta framework, so what it is technically meant is it is built up with all the essential things like: static site generation, server side rendering, routing and mainly API routes.
2. NextAuth is an authentication library for authenticating with many providers + you can add like database sessions and have many features.
3. MongoDB is a document database that is really fast and easy to set up.

For this tutorial, I will go with Javascript for beginners who have never touched typescript.

Writer’s Notes Actually, I got a typescript error when setting up a MongoDB connection and I don’t want to spend time debugging the connection and I am kinda busy these days. So, I scrapped it and went with JS :3 . Also, this is not a full tutorial. Just an explanation about what to do and so on. I swear I will do a video when I am free.

Setup

Firstly, set up the Next JS: https://nextjs.org/

Here is Authentication: https://next-auth.js.org/

For example, I went with discord, but you can go with whatever provider you want. Nextauth only provides a basic authentication. It still doesn’t have any database connection. But next auth has support for many database connections. Here is for mongodb one: https://github.com/vercel/next.js/tree/canary/examples/with-mongodb

( Mongodb setup file is in lib/mongodb.js )

Here is my next auth setup:

To explain step by step:

1. It is a setup for JWT. Nextauth offers both session and jwt for authentication. JWT is useful if you want redirecting and role access before entering the page. You can do that with Session, too. But jwt did that in the middleware level, so it is technically faster. And less storage is used on databases. For more information, you can check Ben Awad who have full explanation on authentication: https://www.youtube.com/@bawad
2. Second is linking the authentication with the database, so it will store the data on mongoDB.
3. For subscription, we want to store extra information on users and for roles like premium, admin on every user.
4. It is for storing the information inside the jwt, so it can have redirects and responses at middleware level.

If you are all set, you should have this:

After Sign In:

Here is our mongodb data:

Create a new collection with any information you want:

Here is the middleware setup:

This middleware will run only on the /dashboard url and console log the token information. At token information, you can check like if req.nextauth.token.premium == false then, you can do like redirecting back to the sign in page or main page depending on your choice.

Here is api endpoint:

What these 2 does is for API, it fetches the data from MongoDB and returns the json data back to the page. With getServerSideProps, what this does is fetch the data from server side and pass down the props to the page level.

Now, we have done the main page.

Now with the same page with the dynamic page:

With the dynamic page, what it will essentially do is fetch the required props, and pass down the props to the page level. Here is our result:

Now Congratulations 🎉!!

You have now built a full stack subscription app with database, authentication and frontend.

Further Improvement

1. You can set up tailwind and other UI library to enhance the CSS
2. Nextauth has a credentials provider to add custom email, password verification providers.
3. If you want SQL database setup, you can use Prisma and Nextauth also has Prisma supports
4. If you love type safety and want coherence, you can integrate trpc.
5. For credit card setup, you can try Stripe and for payment services, there are like wavemoney API ( Myanmar ) .

Overall Cost

For this example, I will use vercel, but you can try like netlify, or other depending on your choice. Your Serverless charges you by execution. For example, if your website doesn’t have any users, then essentially it is free. 100GB bandwidth and 100 GB-Hrs doesn’t seem like a lot but to calculate, it is much cheaper and less time consuming than the hosting dedicated backend.

Well, I wrote this article just to explain that you don’t need a backend. And, I am now kinda tired. If you have any questions, feel free to ask from messenger, or message box ( if you are on medium ). That’s all. Cya Later.

🗃️ #Group_InternationalEdu

🗂️ #Category_Web development

🏷️ #Type_Info

📝 #cWriter_ Thar Thu Shan

📄 #cTranslator_

🖼️ #cGraphicDesigner_

©️ #Conceptians