🏴☠️ 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!
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.
If you don't have nvm, install it first:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bashThen, install and use the right Node.js version:
nvm install 20.19.0
nvm use 20.19.0You can check your Node version with:
node -vNavigate into the project directory (if you aren't already):
cd Pirate-AI-Code-OffThen install the dependencies:
npm installStart the development server:
npm startThen open your browser and set sail to http://localhost:4200!
This project was generated using Angular CLI version 20.0.2.
To start a local development server, run:
ng serveOnce 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.
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
ng generate component component-nameFor a complete list of available schematics (such as components, directives, or pipes), run:
ng generate --helpTo build the project run:
ng buildThis 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.
To execute unit tests with the Karma test runner, use the following command:
ng testFor end-to-end (e2e) testing, run:
ng e2eAngular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.
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!
- Check out
src/app/app.htmlto see the experiment's structure and the placeholder comments for each AI model. - 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.
- 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.htmltell 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!