DennisKo

import { type AppProps } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { api } from "@/utils/api";
import "@/styles/globals.css";
import AppLayout from "@/components/AppLayout";
import type { ReactElement, ReactNode } from "react";
import type { NextPage } from "next";

export type NextPageWithLayout<P = object, IP = P> = NextPage<P, IP> & {

DennisKo

Performance anaylysis of axo.dev

Preface

This should act as a demo of how we would tackle performance analysis of a web page/app. It is obvious that axo.dev is a VERY simple site and would not need this kind of deep analysis in a real situation (yet).

First Audit (Lighthouse)

Perform a Lighthouse audit to create a report and to get a general feel for the performance of the site. We can do that in Chromes dev tools. Make sure to run it in Incognito mode or disable all extensions that would interfere with the page.

DennisKo

Here are 2 blog posts with an accompanying code example that I wrote which shows how I would start writing a component library and how to test stuff in modern web apps:

https://dev.to/denniskortsch/build-test-and-release-a-react-component-library-with-storybook-13d6 https://dev.to/denniskortsch/develop-and-test-react-apps-with-react-query-msw-and-react-testing-library-1n7e

DennisKo

service: myQueue
app: myQueue
org: dennisko
provider:
  name: aws
  runtime: nodejs12.x
  stage: dev
  region: "${env:region}"
  apiGateway:
    minimumCompressionSize: 1024

DennisKo

import { NextApiRequest, NextApiResponse } from "next";
import * as AWS from "aws-sdk";
import uuidv4 from "uuid/v4";

AWS.config.update({
  region: "eu-central-1",
  accessKeyId: process.env.AWS_ACCESS_KEY,
  secretAccessKey: process.env.AWS_SECRET_KEY
});

DennisKo

class Database {
  private connectionManager: ConnectionManager;
  private readonly options: ConnectionOptions = {
    type: "postgres",
    host: "localhost",
    port: 5432,
    username: "postgres",
    password: "postgres",
    database: "pony_dev",
    entities: [Item],