Pokedex

Deployed here: 🔨 Pokedex 🔧

NOTE: API is mocked using MSW and currently only works for Gen I Pokemon

About + Designs

Fun little project to test out some ideas using the PokeAPI GraphQL API.

Designs

Contents

• Prerequisites
• Quick Start
• GrapQL Console
• Server
  • Codegen GQL TS types from Schema
• Client
  • FE Codegen GQL TS types from schema
• React + TypeScript + Vite

Prerequisites

• Follow the docker compose steps for: PokeAPI
• Place the PokeAPI project one directory out at: ../pokeapi
• Finally, ensure the docker engine is running on your machine

See the npm run docker:start script for more info

Quick Start

1. npm i
2. npm start

GrapQL Console

1. ensure docker is running
2. npm run server
3. npm run server:console - opens the apollo-server GQL console

Server

Codegen GQL TS types from Schema

Followed this: Generating types from a GraphQL schema and this Codegen Resolvers

Uses schema.grapqhl to generate server types. In order to add more resolvers etc modify schema.graqphl

"codegen:server": "graphql-codegen --config ./server/codegen.ts",

Note: Extra types are included incase I want to extend the functionality later.

Client

FE Codegen GQL TS types from schema

Note: using a custom apollo-server config now so this will get changed.

Uses: GraphQL-Codegen

  "codegen:client": "graphql-codegen -w",

Instead of import { gql } from apollo you import the generated version from "./src/__generated__/gql.ts".

• To make this easier I have aliased it as "gql": ["./src/__generated__/gql.ts"] in tsconfig.json. This also requires the vite-tsconfig-paths plugin to work.

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Todo

• basic designs
• pagination
  • server
  • client
• search?
• 3d pokemon viewer