Guess-A-Sketch

Deployed at sketch.zarns.net. The backend is takes a minute to spin up because it's hosted on the free tier of render.com. Also, check out my portfolio

Installation

1. Clone the repo

   git clone https://github.com/zarns/guess-a-sketch.git

2. Setup environment

   npm install

3. From the client and server directories, run locally on port 3000. Modify /client/.env to point to localhost:3001 instead of the URL from render.com

   npm run dev

   • Open http://localhost:3000/ in browser
   • The server should run on port 3001
   • Edit a file and save. Watch changes deploy locally in seconds. Start with src/data/data.tsx

Deployment to AKS

1. Install

   • Docker Desktop
   • Azure CLI
   • kubectl

2. Run locally. From root directory

   docker-compose up

3. Build Docker images and push images to Docker Hub

   docker-compose build
   docker-compose push

4. Apply manifest.yml to deploy to Azure Kubernetes Service (AKS)

   kubectl apply -f k8s/manifest.yml

5. Useful

   az aks get-credentials --resource-group <resource-group-name> --name <aks-cluster-name>
   kubectl get deployments
   kubectl get services
   kubectl get pods
   kubectl logs server-deployment-7f5f9d746f-hzrsg
   kubectl logs client-deployment-6cb48766b4-9djxd

6. Realize Azure AKS is charging ~$5/day. Deploy frontend to Vercel and backend to the free tier of render.com instead!

Demo

Acknowledgments

Major thanks to these resources:

• ChatGPT
• Josh tried coding
• favicon source
• react dev tools