Skip to content

A Basic Angular 20 Project with Instructions to give to various AI models to compare them.

Notifications You must be signed in to change notification settings

DeveloperMattC/Pirate-AI-Code-Off

Repository files navigation

PirateAICodeOff

🏴‍☠️ Ahoy, Open Source Adventurer! 🏴‍☠️

Welcome aboard the PirateAICodeOff! Before you set sail, make sure your ship (computer) is equipped with the right version of Node.js, or you might find yourself marooned on Error Island!

⚓️ Quick Start for Brave Pirates

1. Node.js Version Required

Angular 20 is a cutting-edge beast and requires Node.js v20.19.0 or higher (v22.12.0+ also works). If you try to run this project with an older Node, you'll get a message from the depths: The Angular CLI requires a minimum Node.js version of v20.19 or v22.12.

2. Use NVM to Manage Node Versions

If you don't have nvm, install it first:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Then, install and use the right Node.js version:

nvm install 20.19.0
nvm use 20.19.0

You can check your Node version with:

node -v

3. Install Dependencies

Navigate into the project directory (if you aren't already):

cd Pirate-AI-Code-Off

Then install the dependencies:

npm install

4. Run the App

Start the development server:

npm start

Then open your browser and set sail to http://localhost:4200!

This project was generated using Angular CLI version 20.0.2.

Development server

To start a local development server, run:

ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.

🧪 The Pirate AI Code Off Experiment

This project is not just any Angular app—it's an experiment in AI-assisted coding! In src/app/app.html, you'll find the heart of our challenge:

  • Three legendary pirates—Jack Sparrow, Will Turner, and Elizabeth Swann—each represented by their own Angular component.
  • Each component is (or will be) generated by a different AI model (GPT, Gemini, Claude), and each pirate has:
    • A display card with their name and a fun description.
    • A form to join their crew (using Angular 20's new signals for state and validation).
    • A button to add new pirates to their crew, with the crew list displayed below.
    • All styled with Angular Material for a modern, swashbuckling look!

How to Conduct Your Own AI Code Off

  1. Check out src/app/app.html to see the experiment's structure and the placeholder comments for each AI model.
  2. Generate or refactor each pirate component using your favorite AI (or your own code!) to:
    • Implement the form and crew list using Angular 20 signals.
    • Make it look great with Angular Material.
  3. Compare the results: How does each AI's code differ? Which pirate's crew is the most fun to join? Who has the best UI/UX?

This is a living experiment—feel free to fork, contribute, and add your own pirate (or AI model) to the code off!

Note: The comments above each component in src/app/app.html tell you (or your AI assistant) how to roleplay as that pirate when generating or refactoring the code. Use these as your prompt to get the most authentic, character-driven results!

About

A Basic Angular 20 Project with Instructions to give to various AI models to compare them.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published