Pokedex

This is Pokedex app built with NextJS, Typescript and Tailwindcss

!!! Attention: apps/pokedex-redux is page router and apps/pokedex is app router

Because the module next-redux-wrapper is only available for pages router of NextJS application, pokedex-redux is built with pages router and @mui/x-data-grid is used for first page

Run this project

This project uses [email protected] for package manager

You should install this by running this command before run the project

npm install -g [email protected]

Run the following command:

npm install -g turbo
pnpm install
pnpm dev

or you can run the project by docker

docker compose up -d

Then you can browse the example apps on Pokedex-redux and Pokedex

And this project contains storybook for shared components defined in @repo/ui package

Storybook is defined in pokedex (apps/pokedex)

pnpm storybook

Then you can browse the storybook on Storybook

What kind of this project?

This project is monorepo powered by Turborepo including apps and packages

They share config files for typescript, eslint, tailwindcss

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

• pokedex-redux (apps/pokedex-redux): a Next.js app with Tailwind CSS in Pages router with next-redux-wrapper and @reduxjs/toolkit
• pokedex (apps/pokedex): another Next.js app with Tailwind CSS in App router with @tanstack/react-query and storybook
• @repo/ui: a stub React component library with Tailwind CSS shared by both pokedex-redux and pokedex applications
• @repo/types: an ESM module with type definition with typescript shared by whole project
• @repo/utils: a stub NodeJS library with Typescript shared by both pokedex-redux and pokedex applications
• @repo/eslint-config (packages/config-eslint): eslint configurations (includes eslint-config-next and eslint-config-prettier)
• @repo/typescript-config (packages/config-typescript): tsconfig.jsons used throughout the monorepo
• @repo/tailwind-config (packages/config-tailwind): tailwind.config.tss used throughout the monorepo

Each package/app is 100% TypeScript.

Deployment

Kubernetes

This repository contains kubernetes files for deployment

• .kubernetes/backendconfig.yaml: Load balancer Backend configuration for network endpoints being applied to service for ingress (What is backend service)
• .kubernetes/web-config.yaml: !! GENERATED BY GITHUB ACTION DYNAMICALLY!!! contains configuration environment variables
• .kubernetes/web-deployment.yaml: Deploy pod(s) to kubernetes cluster with workload name web
• .kubernetes/web-service.yaml: Expose deployed pod as service and configure backend service
• .kubernetes/web-ingress.yaml: Expose service as ingress and attach special domain (optional) to the service
• .kubernetes/kustomization.yaml: Kustomization configuration file to run the kubernetes files

Github action

Also we have github action .github/workflows/web.yml to run the kubernetes files with Kustomization

We need some env vars to run the workflows on github action

• environment/production/secrets/GCP_CREDENTIALS: service account credentials from google service used for authentication (plz don't forget to make as plain text to store. remove any \r\t)
• environment/production/secrets/GKE_PROJECT: project id of google cloud platform
• environment/production/vars/GAR_LOCATION: location config for your artifact repository (e.g. us-central1)
• environment/production/vars/GKE_CLUSTER: cluster id of kubernetes engine
• environment/production/vars/GKE_LOCATION: location config for your google kubernetes cluster (e.g. us-central1)
• environment/production/vars/GAR_REPOSITORY: repository name of google artifact repository you use to store your docker images built from code
• environment/production/vars/NEXT_PUBLIC_API_URL: this is used to set env var to build the docker image and run container (pointed on /.env.example)

what does this github action do?

• Checkout the repository
• Authenticate to google cloud platform by service account JSON
• Authenticate to docker and kubernetes engine
• Build the docker image and publish to artifacts repository
• Download portable kustomization file
• Generate web-config.yaml file dynamically based on env var NEXT_PUBLIC_API_URL
• Run kubernetes to deploy on GKE