You're probably looking for jcbhmr.me/card-battle

Card battle

🃏 Card game semester software project

Live game site | Requirements report | Test and delivery plan | Final presentation

🎮 Local multiplayer (2 player)
🔨 Proof-of-concept
🏫 Made for UW-Whitewater Software Engineering semester project
⚛ Used React, TypeScript, Vite, TailwindCSS, and more!

This project was made for the COMPSCI 476 SOFTWARE ENGINEERING class. The assignment itself was to come up with an idea for a software project and build that project over the course of the semester with a small-ish group of five people to develop real-world software development skills like using GitHub, how to work in a team, what tech you might need to know, etc. Our idea was to create a computer game inspired by a board game. We based this "Card battle" game off of the Adventure Time Card Wars idea and attempted to recreate some of the aspects of it in a web app. We used JavaScript, TypeScript, React, Vite, TailwindCSS, Node.js, npm, and more to create the basic web app that is viewable at jcbhmr.me/card-battle.

Development

Adventure Time Card Wars rulebook | Team Discord | Canvas page

This app is entirely client-side. There is no server-side component. You can get started easily using ⚡StackBlitz by clicking the Open in Codeflow button above.

• npm run dev: Runs the Vite dev server so you can see a live reloading preview of your code as you edit it.
• npm run format: Formats all the code using Prettier. Run this every so often.
• npm run build: Compiles everything into an index.html and associated JavaScript and CSS files. This is what GitHub Actions will run before deploying this site to GitHub Pages.

Cool tools

This is Jacob's list of cool tech tools that were shown off at some point in team meetings.

• StackBlitz: No-configuration Node.js dev env for frontend & light backend.
• Excalidraw: Great for low pressure crude sketches and diagrams when you need digital pen & paper.
• XState: Makes diagrams, simulations, and more out of your state machine code!
• Stately.ai editor: The company behind XState also makes a visual flowchart editor.
• Vite: The current best frontend build system.
• TypeScript: The best way to write JavaScript with type declarations.
• v0: AI code generator focused on React & Tailwind CSS
• ChatGPT: General purpose AI chatbot that can generate code.
• Gemini: Alternative to ChatGPT that supports image inputs on the free tier.
• Craiyon: Completely free no signup image generator AI.
• Tailwind CSS: Put your CSS in your HTML instead of fragile linking to another file.
• React: The biggest JavaScript UI framework right now.
• Prettier: The most popular JavaScript ecosystem code formatter.
• Vitest: Vite-based testing framework. Supports TypeScript out of the box.
• shadcn/ui: Premade components to copy-paste into your React+TailwindCSS project.
• Greptile: Give ChatGPT the context of your entire GitHub repository.
• Immer: Immutable JavaScript objects with ergonomic & memory efficient copiers.