📌 Note: This project was developed entirely using AI prompting as part of the Prompt Wars hackathon, where participants were challenged to build full-stack applications using only natural language instructions.
The codebase, UI, and functionality were generated through iterative prompt engineering with generative AI tools.
⚙️ Fully AI-generated 🔮 Prompt-driven development 🚀 Built for hackathon submission
Project demo: https://www.youtube.com/watch?v=7Jy_fqPmt0s
A full-stack Star Wars-themed web application that channels the Force to provide AI-powered responses with both Sith brutality and Jedi wisdom
Experience the eternal struggle between light and dark through AI-generated responses. Enter any prompt and witness the Force manifest as both a brutal Sith roast and enlightened Jedi guidance.
Prompt Side of the Force is an interactive web application that demonstrates the duality of the Force through AI responses. Built for those who appreciate both constructive feedback and brutal honesty, this app provides two contrasting perspectives on any prompt you submit.
Whether you're seeking wisdom from the Jedi Council or the harsh truths of the Sith, this application harnesses the power of AI to deliver responses that embody the characteristics of both sides of the Force.
- 🤖 Dual AI Responses: Submit any prompt and receive two distinct AI-generated responses
- 💢 Sith Roasts: Brutal, honest feedback delivered with Sith-like intensity
- 🌟 Jedi Wisdom: Constructive, wise guidance channeling Jedi philosophy
- ⚔️ Interactive UI: Immersive Star Wars-themed interface with animations
- 🔊 Lightsaber Sound Effects: Authentic audio feedback for user interactions
- ✨ Starfield Animations: Dynamic background animations creating a space atmosphere
- 🌈 Neon UI Elements: Glowing, futuristic design elements inspired by lightsabers
- 🎬 Smooth Transitions: Fluid animations between different app states
- 🎭 Order 66 Trigger: Enter "Order 66" to experience:
- Palpatine's iconic quote display
- Screen flash effect
- Imperial March audio playback
- Special UI transformation
- 📱 Responsive Design: Optimized for desktop, tablet, and mobile devices
- ⚡ Fast Loading: Lightweight architecture with CDN-based React
- 🔒 Secure API: Protected endpoints with proper authentication
- 🌐 Production Ready: Deployed on Vercel with proper routing
- HTML5: Semantic markup structure
- CSS3: Custom styling and animations
- Tailwind CSS: Utility-first CSS framework for rapid UI development
- React: JavaScript library loaded via CDN for component-based architecture
- Web Audio API: For lightsaber sound effects and background music
- Node.js: JavaScript runtime environment
- Express.js: Web application framework
- OpenRouter: OpenAI-compatible API service for AI responses
- CORS: Cross-origin resource sharing middleware
- dotenv: Environment variable management
- Vercel: Serverless deployment platform
- vercel.json: Configuration for routing and build settings
- Environment Variables: Secure API key management
- OpenRouter API: AI text generation service
- Custom Express API: Backend endpoints for AI interactions
- Node.js (v14 or higher)
- npm or yarn
- OpenRouter API account
- Git
-
Clone the repository
git clone https://github.com/your-username/prompt-side-of-the-force.git cd prompt-side-of-the-force -
Install dependencies
npm install
-
Set up environment variables
# Create .env file in the root directory cp .env.example .envAdd your environment variables (see Environment Variables section)
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:3000to see the application
# Build for production
npm run build
# Start production server
npm start- Click the "Deploy with Vercel" button at the top of this README
- Connect your GitHub account
- Configure environment variables in Vercel dashboard
- Deploy!
-
Install Vercel CLI
npm install -g vercel
-
Login to Vercel
vercel login
-
Deploy
vercel --prod
-
Configure Environment Variables
# Add each environment variable vercel env add OPENROUTER_API_KEY vercel env add OPENROUTER_MODEL vercel env add OPENROUTER_BASE_URL -
Redeploy with Environment Variables
vercel --prod
Create a .env file in the root directory with the following variables:
# OpenRouter API Configuration
OPENROUTER_API_KEY=your_openrouter_api_key_here
OPENROUTER_MODEL=openai/gpt-3.5-turbo
OPENROUTER_BASE_URL=https://openrouter.ai/api/v1
# Application Configuration
PORT=3000
NODE_ENV=development
# Optional: Custom Model Parameters
MAX_TOKENS=500
TEMPERATURE=0.7- Visit OpenRouter
- Sign up for an account
- Navigate to API Keys section
- Generate a new API key
- Copy the key to your
.envfile
| Variable | Description | Required |
|---|---|---|
OPENROUTER_API_KEY |
Your OpenRouter API key for AI responses | Yes |
OPENROUTER_MODEL |
AI model to use (default: gpt-3.5-turbo) | Yes |
OPENROUTER_BASE_URL |
OpenRouter API base URL | Yes |
PORT |
Server port (default: 3000) | No |
NODE_ENV |
Environment mode (development/production) | No |
MAX_TOKENS |
Maximum tokens for AI responses | No |
TEMPERATURE |
AI creativity level (0.0 - 1.0) | No |
The main interface featuring the starfield background and neon UI elements
Example of a brutal Sith-style roast response with red lightsaber effects
Example of wise Jedi guidance with blue lightsaber effects
The special Order 66 easter egg activation with Palpatine quote
Responsive design optimized for mobile devices
- Enter your prompt in the text area
- Click "Channel the Force" to generate responses
- View dual responses:
- 💢 Sith Roasts: Brutal, honest feedback
- 🌟 Jedi Wisdom: Constructive, wise guidance
- Type "Order 66" in the prompt field
- Submit to trigger the special sequence
- Experience the Palpatine quote, screen flash, and Imperial March
- 🔊 Sound Effects: Toggle lightsaber sounds on/off
- 🎵 Background Music: Control ambient Star Wars music
- 🔇 Mute All: Quick mute for all audio
prompt-side-of-the-force/
├── public/
│ ├── index.html # Main HTML file
│ ├── styles.css # Custom CSS styles
│ ├── script.js # React components and logic
│ └── assets/
│ ├── sounds/ # Audio files
│ │ ├── lightsaber.mp3
│ │ └── imperial-march.mp3
│ └── images/ # Image assets
├── server.js # Express backend server
├── vercel.json # Vercel deployment configuration
├── package.json # Node.js dependencies
├── .env.example # Environment variables template
├── .gitignore # Git ignore rules
└── README.md # This file
Generate dual AI responses for a given prompt.
Request Body:
{
"prompt": "Your prompt text here"
}Response:
{
"sithResponse": "Brutal Sith-style roast response",
"jediResponse": "Wise Jedi guidance response",
"timestamp": "2024-01-01T12:00:00Z"
}Health check endpoint for monitoring.
Response:
{
"status": "healthy",
"timestamp": "2024-01-01T12:00:00Z"
}The application uses Tailwind CSS for styling. Key customizations include:
- Neon Effects: Custom CSS classes for glowing elements
- Starfield Animation: CSS keyframes for background stars
- Lightsaber Colors: Dynamic color changes based on response type
Sound effects are managed through the Web Audio API:
- Lightsaber Sounds: Triggered on user interactions
- Background Music: Ambient Star Wars themes
- Special Effects: Order 66 easter egg sounds
Customize AI behavior by modifying the system prompts in server.js:
const sithPrompt = "You are a Sith Lord. Respond with brutal honesty...";
const jediPrompt = "You are a wise Jedi Master. Provide constructive guidance...";API Key Errors
- Ensure your OpenRouter API key is valid
- Check that environment variables are properly set
- Verify your OpenRouter account has sufficient credits
Audio Not Playing
- Check browser audio permissions
- Ensure audio files are properly loaded
- Try refreshing the page
Vercel Deployment Issues
- Verify environment variables are set in Vercel dashboard
- Check build logs for errors
- Ensure
vercel.jsonconfiguration is correct
Enable debug mode by setting NODE_ENV=development in your .env file for detailed logging.
- Multiple AI Models: Support for different AI providers
- Voice Input: Speech-to-text prompt input
- Character Avatars: Animated Sith and Jedi characters
- Response History: Save and revisit previous responses
- Sharing: Share responses on social media
- Custom Prompts: User-defined response personalities
- Dark/Light Mode: Theme switching beyond Star Wars
- Multiplayer: Real-time collaboration features
Contributions are welcome! Whether you're fixing bugs, adding features, or improving documentation, your help is appreciated.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style
- Add tests for new features
- Update documentation as needed
- Ensure all tests pass before submitting
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2024 Prompt Side of the Force
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
- OpenRouter for providing the AI API infrastructure
- Vercel for seamless deployment and hosting
- Tailwind CSS for the utility-first CSS framework
- React for the component-based architecture
- Star Wars for the endless inspiration
- The Force for guiding this project to completion
- GitHub Issues: Report bugs or request features
- Discussions: Join the community discussion
"Do or do not, there is no try." - Master Yoda
May the Force be with you... and your prompts! ⚔️✨