Gionatha

Posted on Dec 1, 2022 • Edited on Nov 22

How i build a modern full stack application | 2022 Edition

#webdev #architecture #design #tooling

Development workflow
Nextjs
Typescript support
Nextjs as a Frontend Framework
Chakra UI
Nextjs as a Backend framework
tRPC
Data Persistence
Prisma
NextAuth
Deployments
1. Vercel
2. Planetscale
Monitoring
Marketing
1. Product Hunt
Conclusions

In this post i will talk about the modern web technologies i personally used for building and deploy a modern full stack application.

Hi, my name is Gionatha and i'm the founder of Featbacks.

Featbacks is an open platform where you and your audience can discuss about different aspects of your side projects.

If you are searching for a free platform for collecting or sharing ideas, questions, announcements, reporting issues about your side projects, Featbacks is the right place to do it.

So be sure to give it a try at featbacks.com

Development workflow

First off i want to talk about my development workflow, which i follow when i'm building a full stack application in solo..so without the collaboration of other people or a being in a team.

Starting with the frontend 👀...

I usually i start by building the visual part of the application i want to create, which is often called UI or Frontend.

Starting from the frontend, helps me to better define all the requirements that the application needs.

In this way i'm assuring that all the data that the frontend need to display to the end user, will be stored on the backend as well.

...then the backend 🚀

Once i've built a mocked version of my application i can start working on the backend system of the application.

The backend is like the engine of the application itself, so it contains all the business logic for handling multiple events..
In terms of Featbacks this means the process of creating a project, creating a discussion, voting a reply, reply to a discussion, etc..

Building the backend generally means dealing with data persistence into database, manage users authentication, check user permissions, manage error reporting and so on.

So it's fair big world! 🌍

Nextjs

Since i use React and Typescript for building my applications, i tend to choose NextJS for building both my front and backend system.

In my opinion Nextjs is one of the best framework available nowadays for building new React-based application from scratch.

Typescript support

For example Nextjs supports Typescript, so it comes without the need to configure Typescript completely from scratch.

And this is awesome, because i always work with typescript in all my projects, because it permits me to have a type-safety approach while i'm coding

Using typescript permits to unlock the full power of the code editor that i'm using (VSCode).
I'm talking about Intellisense support, code completion hints, error detection at static time and much more..

This crucial for me, because it boost my productivity.

Eventually i know that i will be at least 2 times faster using typescript rather than not using it.

So my advice is to always use typescript for your personal projects.

NextJs as a Frontend framework

Other cool features that Nextjs brings when it comes to frontend development are:

a File system based Routing: Nextjs has this directory called pages where the files inside are turned into web pages available from our application. So creating a new page it's very easy and straightforward.
Multiple Data Fetching methods: Nextjs provide different method to render a specific pages, for example we can choose to server side rendering the page or generate a static version of that page that will consequently be cached inside a CDN or even decide to just client side rendering the page if for example the SEO is not relevant and the page content tend to change frequently
NextJs has also an integrated compiler called SWC that automatically transform and minify our code for production. So we won't need to install and configure third party tools such as Babel for example

So these were the main features of NextJs when it comes to frontend development, but of course it comes out with many others feature as well like: Fast-Refresh, Image Optimization, support for internatinalization and many more...

ChakraUI

Since most of the time i work in solo, i usually use React component based library, because it saves me from the problem of implementing most the most common ui components from scratch (such as menu, dialogs, buttons, layouts, tooltips, etc..)

One of my favourite library, which i also used for developing Featbacks is ChakraUI.

The reason why i choose ChakraUI it's because it's very easy to use and especially it's easy to customize.

In fact all the components that Chakra provides can be easily customized thanks to the style props feature.

Essentially given a specific component such as a Text, you can add your own style to that component by specifying the attributes you want to customize.

  <Text
     ml={2}
     textTransform="uppercase"
     fontSize="sm"
     fontWeight="bold"
     color="pink.800" 
  >
     Verified &bull; Cape Town
  </Text>

In addition to this, all the components that Chakra provides are already wrapped up with all the accessibility attributes that every component should have, so you won't need to think about this.

So my final thought is that React component libraries are particularly useful especially if you don't need an highly specific design system for your UI.

NextJS as a Backend framework

As i said before, NextJs can also be used as a backend framework, thanks to one of the coolest feature i've seen in a while in a framework, called API Routes.

API routes essentially are REST endpoints that are exposed directly from the underline Nextjs server.

So you can basically write your own API without creating a new dedicated backend application such as a NodeJS Express application that you have to build from scratch.

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

And this is awesome, because you will get also the benefit of being able to share code between the frontend and the backend like models or functions.

And this believe me saves me sooo much time, because you will be able also to deploy your frontend and backend as single instance of Nextjs application.

tRPC

One library that comes in handy when building a backend system, especially using Nextjs Api Routes is tRPC.

tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.

All that this library does is wrapping your Nextjs project and particularly the API functions that you write, and automatically generate some react hooks or a client that you can use within your react components or inside the data fetching methods that we have mention before.

And everything comes out with fully typescript support.

So if you change something on your Api functions, your changes will be immediately reflected on your frontend, without relying on some third party tools to generate api contracts for example.

This let me say it's AMAZING! The time that this library saves me as solo developer is invaluable.

tRPC has also different adapters for most of the modern popular framework, so it doesn’t rely specifically on React or NextJS.

Data persistence

When it comes to backend development we cannot talk about data persistence and especially databases.

There are different ways to store our data regarding on our use cases.

We have relational databases or SQL databases, such as MySQL or Postgres
We have NON relational database or NO-SQL databases, such as MongoDB
And we also have Key-Value store databases, such as Redis.

Obviously each of those paradigm have their own pros and cons and their own specific use cases.

One will perform better than another regarding what we need to deal with.

I'm not going to dwell on this topic because it's very broad and there are plenty of informations about it.

What i can tell you is that while developing Featbacks i need to store mainly relational data such as users, projects, discussions, replies, votes and to do so i used a MySQL database.

Prisma

One of the most useful library that i came across when dealing with databases was Prisma.

Prisma is a next-generation typescript ORM, that make easy working with databases.

The workflow of Prisma is very easy to understand:

You start by defining a schema using the Prisma syntax. In this schema you will define all of your application domain models and relations between them.

model Post {
  id         Int        @id @default(autoincrement())
  createdAt  DateTime   @default(now())
  title      String
  published  Boolean    @default(false)
  categories Category[] @relation(references: [id])
  author     User       @relation(fields: [authorId], references: [id])
  authorId   Int
}

From this schema you can then run the prisma client that will automatically generate all the type-safety models of your application and it will also generate a query builder client from which you can run your database operations.

// Find the first user that contains Ada
const userByName = await prisma.user.findFirst({
  where: {
    name: {
      contains: 'Ada',
    },
  },
})

In addition to this prisma provides also a tool called prisma migrate that basically read your schema and generate a migration script that can be applied to your development or production database
Finally it also provide a nice user interface called prisma studio to view and edit your database data.

Obviously Prisma has different adapters both for both SQL e NOSQL databases so it's the perfect fit for the majority of the databases available out there.

NextAuth

One common piece of a backend system usually is dealing with authentication.

Authentication means having a system that permit users to sign in or sign out from the application itself and also figure out who is trying to do a particular action like creating a discussion or voting a reply (this latter part is often called authorization)

Fortunately there is a library called NextAuth, which is an open source authentication solution built exclusively for Nextjs.

Some key points about NextAuth are:

is designed to work with any Oauth Service (like Google, Github, Microsoft, Twitter and so on)
Supports email with passwordless authentication
Supports both JSON Web Tokens and database sessions
is designed for Serverless environment ( Nextjs Api functions, AWS Lambda, Docker, Heroku, etc…)

NextAuth can be used with or without a database. For example in Featbacks i choose to store the user sessions inside a dedicated database table.

The great thing about NextAuth is that it comes out with an adapter for Prisma.
So once you've configured NextAuth with your Prisma instance you'll have a database authentication system ready to go.

From there you will need only to set up your authentication methods like email and password or third party oauth services like google or github and Nextauth will take care of the rest.

Deployments

When it comes to deployments there's a ton of cloud based services that could be used to achieve what we are trying to do here.

In my case what i needed was to deploy both my frontend and backend system along with my database instance.

Vercel

Since i used NextJS, one of the easiest way to deploy a NextJS application is to use the Vercel platform.

Vercel is the company that developed NextJS and they also developed a platform that permit to deploy a Nextjs application (but even other popular frameworks different from Nextjs) in a very straightforward and easy way.

Essentially what they need is the access to the github project that you want to deploy, in order to set some CICD pipelines.

From there, each time you push something on your main branch it will trigger a new build of your application and therefore your app will be automatically deployed on their server.

This remove the needs of having a person that manage this kind of tasks (they are often called DevOps engineer).

Planetscale

Of course we need also to deploy our database in some way.

When it comes to Featbacks, my option fell on PlanetScale.

Planetscale is a serverless database platform, built on top of MySQL and Vitess.

Vitess is a clustering system for horizontal scaling a MySQL database. Essentially Vitess automatically scale your MySQL database by using a technique called sharding.

Sharding consist in splitting the data inside your database into multiple database instances in order to avoid to overload a single or a few database instances.

Planetscale is also very easy to integrate with Prisma and Nextjs and there are plenty of examples that shows you how to setup it with this latter technologies, so i think it's one of the best pick available out there, if you are looking for a MySql database instance.

Monitoring

After you have launched a first version of your application, it's very important to have something that permits you to monitor your application.

The most important aspects to monitor are, in my opinion:

Error detection or crash reporting
Tracking user engagement

Sentry

When it comes to acknowledge if something went wrong in your application, one of the best tool that i came across is Sentry.

Sentry is a crash reporting platform that provides you with real-time insight into production deployments with info to reproduce and fix crashes.

It notifies you of exceptions or errors that your users run into while using your app, and organizes them for you on a web dashboard.

Reported exceptions include stacktraces, device info, version, and other relevant context automatically; you can also provide additional context that is specific to your application, like the current route or user id.

One of the most cool feature that i found in Sentry is that it permits to send you a notification via email or even via a Slack notification message when a new error occur or if some other criteria are met.

And this is awesome because you will immediately know if something is going wrong in your app.

Google Analytics

When it comes to tracking metrics such as daily users, new users, average session duration, page views, events or conversions, one the best free tool available is Google Analytics.

Google Analytics helps you collect all of these user engagement metrics that gives you insight about the application user experience.

So in this way you can understand what part of your application is more used and which one are less used.

Tracking these metrics will also help you to better understand what parts of your application need improvements or if there is like a particularly critical section of your app.

The main advantage of Google Analytics is that is completely free, but i don’t quite like the user interface, because i don't find it very intuitive.

But apart from that it does the job pretty well, and it is also very easy to setup into NextJs.

An alternative to Google Analytics: SplitBee

I also came across with an other platform for collecting analytics called SplitBee and their user interface is insanely good and intuitive.

Since Splitbee is a Freemium product, i eventually decided to opt in for Google Analytics, but in the future i would like to migrate to Splitbee because as i said their UI is so simple and clean rather than Google Analytics.

Marketing

In the final part of this long post, i wanna briefly talk about another important aspect of launching an application such as Featbacks, and that's Marketing.

Product Hunt

Although i'm not an expert in marketing, i found a very good platform for sponsoring your app that is called Product Hunt.

Product Hunt is an online platform to share and discovering new tech products.

The app is both for the creators whose come here to launch their products, and for consumers that come to find the latest and greatest products in tech.

The best part about Product Hunt is the community element.

On the homepage, new products get ranked by their popularity. This popularity is determined by the upvotes from fellow community members.
If you like a product, you upvote it, simple as.
The more upvotes a product has, the higher on the homepage it sits.

Conclusions

Alright we've just arrived at the end of this long post.

I hope that sharing my experience and insight about building a modern full stack application such as Featbacks in 2022, might have help you learn something that you were unaware of.

Let me know if you are using any of these technologies for building your personal projects, or if you're using something that i've not mentioned.

Cheers 🍻