The Holy Grail of full stack development

Hey Full Stackers 👋 Frontend, APIs, styling, testing, deployment, DBs and infrastructure under control?

The world of software development can be quite confusing: What was the best front-end framework again, what was the optimal testing setup and what was the name of the tool for ORMs? Is there a "Holy Grail" of full stack development at all? Or do we all have to find our own cup?

I have a few suggestions that I would like to recommend to you. Maybe there are a few new treasures that you don't know yet! 💎

Next.js + Vercel === ❤️

First of all, I am Team Reactespecially in combination with Next.js. Once you understand how to use Client Side Rendering (CSR), Server Side Rendering (SSR), Static Side Generation (SSG) and Incremental Static Regeneration (ISR) effectively, these techniques bring huge benefits. Next JS is a super sexy feature cannon: API Routes, Typescript Support, Image Optimization and above all: Zero Config.

But that's not all. Host your Next.js app at Vercel and you get automated deployments, preview environments, serverless functions, edge functions, auto-scaling and analytics. 😍

Does your app still need authentication? Use NextAuth.js and build your login in just a few minutes.

Next.js and Vercel are used by us, among others, for Domicura or Spilo for use.

Paint frontend with Tailwind CSS 👩🏻‍🎨

CSS is not your world? And design in general somehow not either? Then Get magical design superpowers with Tailwind first. And because there are always others who deliver even better designs, it's OK to get involved with Flowbite, Tailwind UI, Tailwindcomponents or daisyUI to take a look. 😉

Instead of writing individual CSS rules, with Tailwind you simply use utility-first classes to quickly and easily change the appearance of elements.

You need a blue button?

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Click me!
</button>

How about a green text block with a shadow?

<div class="bg-green-500 shadow-lg p-4 mb-4">
  Ich bin ein grüner Textblock mit Schatten!
</div>

Or would you prefer a picture with rounded corners and a red frame?

<img src="smarties.jpg" class="rounded-full border-2 border-red-500" alt="Viele Bunte Smarties">

Tailwind first generates all possible utility-first classes. You can use them however you like. You can also extend them, change them, overwrite them or add your own.

Because you still want your website to be as lean and fast as possible, Tailwind shakes your tree so that all the bad apples fall down. With the "Purge" option, you start the so-called tree shaking process during the production build. Everything that is not needed is removed.

Want to see what an application with Tailwind looks like in action? Our own Website or Zubi are just two examples of many in which we use Tailwind.

ORM shield🛡: Avoid database disasters with Prisma

Have you ever experienced the adrenaline rush of accidentally deleting something from the production database instead of the supposedly local database? It works better than a double espresso! ☕️

With a ORM and a code first approach, you can avoid this. Or at least significantly reduce the risk. Simply have the schema migrations generated. They are then automatically executed on the production database during deployment. This means you never have to interact manually with the production database again.

Prism makes your life easier. Whether you use MySQL, Postgres or even Microsoft Access, Prisma does the hard work and communicates with the database for you.

Cloud databases: simple, fast, scalable!

Operating databases yourself is no fun. Cloud services like Supabase, AWS RDS, GCP Cloud SQL or Firebase are just the thing. You can set up a production-ready, scalable database with just a few clicks 🚀.

In the project LearnFox all data is securely stored in Cloud SQL. We don't have to worry about losing anything - Cloud SQL has everything under control!

Goodbye cloud chaos👋 : Why you should use Infrastructure as Code (IaC)

Do you remember when you created a load balancer, a database and a server on AWS for a project a year ago? But now the UI looks completely different and you no longer know exactly where the resources are? Even for small projects, it's worth mapping all cloud resources using IaC frameworks such as Terraform or CloudFormation to manage. Not only do you have more security, but you also always have a complete versioned overview of all resources and can quickly undo changes if something goes wrong.

You would like a AWS EC2 Create an instance? No problem!

provider "aws" {
  access_key = "ACCESS_KEY"
  secret_key = "SECRET_KEY"
  region     = "eu-central-2"
}

resource "aws_instance" "My Bitcoin Miner" {
  ami           = "AMI_ID"
  instance_type = "t2.micro"

  tags = {
    Name = "My EC2 Bitcoin Miner Instance"
  }
}

Did you know that for the project Zitadel manage the entire cloud infrastructure with Terraform?

From unit test to E2E test: With Cypress or Playwright through all levels

Testing 🥱 - who likes writing tests? But have you ever Cypress or Playwright tried out? They offer tests on several levels: From unit tests to component tests to E2E tests, which actually open a page via a URL in the browser to run tests on it.

it('contains the expected footer text', () => {
  cy.visit('<https://smartive.ch>');
  cy.get('footer').should('contain', 'Beam me up Scotty!');
});

Pro Tip: Combine E2E tests with the Vercel preview environment and automatically execute E2E tests in the preview environment with every new pull request 🤯.

name: 'Run Cypress E2E tests in Vercel Preview Env'
on: [deployment_status]
jobs:
  e2e:
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Run Cypress
        uses: cypress-io/github-action@v4
        with:
          env: baseUrl=${{ github.event.deployment_status.target_url }}
      - uses: actions/upload-artifact@v2
        if: failure()
        with:
          retention-days: 1
          path: |
            cypress/videos

Also in the project ZWEI Wealth some bugs have already been found and fixed thanks to Playwright.

Discover the magical powers of SonarCloud 🧙‍♂️

SonarCloud is a web-based service for monitoring and analyzing code quality. It helps to automatically identify security vulnerabilities and errors in code and improve code quality.

5 reasons why you and SonarCloud will become best friends 💖

1. Because with SonarCloud's security scanner and bug finder, you no longer have to check your code manually for security vulnerabilities and bugs.
2. Because your code quality is improved and your development time is shortened.
3. Because you no longer have embarrassing code reviews and instead find the more obvious errors in the code automatically before you present them in the review.
4. Because you monitor your test coverage and evaluate the quality of your commits.
5. Because your code will be so clean you can show it to your grandma! 🧹

Renovate Bot: Your personal dependency butler 🤵

Are your dependencies not always up to date? Then check the Renovate Bot out! It automatically makes pull requests with dependency updates. You can even configure it to automatically merge minor versions, for example. (Of course only if your tests also run!)

Among other things, the Renovate bot already has various dependencies in the project Migipedia updated.

Sendgrid: The ultimate wingman for your emails 💌

Are you looking for a tool to help you send, track and analyze emails? Then Sendgrid just right for you! With the npm package from Sendgrid you can easily send emails with just a few lines of code. It also offers templates, automations and integrated spam filters so that your emails look professional and reach the recipient safely.

How do you send such an email with Sendgrid?

import * as sgMail from '@sendgrid/mail';

sgMail.setApiKey(process.env.SENDGRID_API_KEY);

const msg = {
  to: 'recipient@example.com',
  from: 'sender@example.com',
  subject: 'Hello, world!',
  text: 'Hello, plain text world!',
  html: '<p>Hello, HTML world!</p>',
};

sgMail.send(msg)
  .then(() => console.log('Email sent successfully'))
  .catch((error: Error) => console.error(error.toString()));

Have you ever received an e-mail from Kaspar& received? Then it probably also came from Sendgrid.

Code helper GitHub Copilot: Your new code buddy 👨🏻‍✈️

«If I uninstall Github Co-Pilot, everyone will find out that I'm really just pretending to be able to program.»

Source: Prefers to remain anonymous.

Have you ever heard of GitHub Copilot heard of it? If not, then you're about to discover your new favorite tool! 🙌

GitHub Copilot is like a little helper that supports you in programming. It uses machine learning to make code suggestions as you write. It analyzes your code and compares it to similar code it has analyzed in the past. In this way, it can make suggestions that are tailored to your specific code and programming environment.

But GitHub Copilot is more than just a code completion tool. You can also ask it questions by writing directly in the editor, for example:

• "How can I resolve this merge conflict?"
• "What does this function do?"
• "Which package should I use for XYZ?"
• "What is the best way to handle errors in this code?"

He will answer your questions in the best possible way and help you to work faster and more effectively.

One of the best things about Copilot is that you can generate entire functions by simply entering comments 🤯. For example, you can write directly into the IDE:

• "Give me a recursive function that generates the Fibonacci sequence"
• "Check if this email is valid, otherwise throw an exception"
• "Generate a function that sorts a list of integers in ascending order"

However, you should always remember that he is not always right and sometimes makes suggestions that can lead you completely in the wrong direction. It is therefore important to always check the suggestions carefully and make sure that they are actually suitable for your code and your requirements. ☝️

Huh, and where is the Grail now? 🏺

Unfortunately, it's not like Indiana Jones. In software development, there is not a single "holy grail". It always depends on the project and the requirements and goals. Therefore, it is important to choose the right tools and technologies for the specific problem and to adhere to good software development practices to be successful. 💪

Curious how all these tools can be thrown together? 🧐

For my diploma thesis at ZBW I have done exactly that. I have developed an application that combines all these tools. Have a look at the Github Repository on!