DonHuskini

import * as React from "react";
import useSWR, { SWRConfig } from "swr";
import { ErrorBoundary } from "react-error-boundary";
import axios from "axios";

// grab it with Swagger instead of manually write
interface PokemonDTO {
  abilities: {}[];
  base_experience: number;
  forms: {}[];

DonHuskini

interface Pokemon {
  id: number;
  name: string;
  height: number;
  types: { id: number; name: string }[];
}

type GetPokemonSuccessResult = { isOk: true; data: Pokemon; error: null };
type GetPokemonErrorResult = { isOk: false; data: null; error: string };
type GetPokemonResult = GetPokemonSuccessResult | GetPokemonErrorResult;

DonHuskini

import { useEffect, useState } from "react";
import { getPokemonDetails, PokemonDetails } from "services/pokemon";

export const usePokemon = (id: PokemonDetails["id"]) => {
  const [data, setData] = useState<PokemonDetails>();
  const [error, setError] = useState<string>();

  useEffect(() => {
    (async () => {
      const { isOk, data, error } = await getPokemonDetails(id);

DonHuskini

// for sake of simplicity, I'm adding all things in this file but 
// I recommend spliting them into their respective files as suggested

const url = 'https://pokeapi.co/api/v2'

const getIdFromUrl = (url: string) => {
  const splitted = url.split("/");
  const id = +splitted[splitted.length - 2];
  return id;
};

DonHuskini

import { useEffect, useState } from "react";
import { getPokemon, PokemonDetails } from "services/pokemon";

var Cache: { pokemon?: { data: PokemonDetails[]; storedAt: number } } = {};

export const usePokemon = () => {
  const [data, setData] = useState<PokemonDetails[]>();
  const [error, setError] = useState<string>();

  useEffect(() => {

DonHuskini

large desktop 1920
small laptop 1280
large tablet 1024
small tablet 768
mobile 410
small mobile 360

DonHuskini

const pathIds = ["p1", "p2", "p3", "p4", "p5"] as const

function Fn() {
  let data: { [K in typeof pathIds[number]]?: { x: number, y: number } } = {}

  data['p1'] = {
    x: 10,
    y: 20
  }
}

DonHuskini

1. Add the font on the /public folder. Just .woff2 extension is good enough https://caniuse.com/?search=woff2
 1.1. If you have a problem regarding vertical alignment, use https://transfonter.org/ and select "fix vertical metrics" 
2. Import the font with CSS @font-face like below:
```css
@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/BebasNeue/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

DonHuskini

const api = axios.create({
  baseURL: "xxx/graphql",
  method: "POST",
  headers: { "Content-Type": "application/json" },
});

const CategoriesQuery = (first: number, after: string) =>
  JSON.stringify({
    query: /* GraphQL */ `
      query Categories($first: Int!, $after: String!) {

DonHuskini

class User {
  id = undefined;
  username = undefined;
  following = [];
  followers = [];

  constructor({ id, username }) {
    this.id = id;
    this.username = username;
  }