alterego

Stars
6
Language
TypeScript
Updated
View on GitHub

AlterEgo AI - Superhero Personality Generator

Comic Book Style React TypeScript Vite Google Gemini

"With great power comes great responsibility... and awesome superhero alter egos!"

AlterEgo AI is an interactive web application that transforms your personality into a unique superhero alter ego using Google's Gemini AI. Take our comic-book themed personality quiz and discover what superhero you would be in the multiverse!

Features

  • Personality Quiz: Answer comic-book themed questions to reveal your inner superhero
  • AI-Powered Generation: Uses Google's Gemini AI to create custom superhero profiles
  • Comic Book UI: Authentic comic panel styling with animations
  • Dynamic Results: Unique hero names, powers, weaknesses, and origin stories
  • Responsive Design: Works on desktop and mobile devices
  • Screenshot Ready: Capture and share your superhero profile

Tech Stack

  • Frontend: React 19 with TypeScript
  • Build Tool: Vite
  • AI Integration: Google Gemini AI (@google/genai)
  • Animations: Framer Motion
  • Charts: Recharts
  • Styling: Tailwind CSS (comic-book themed)
  • Image Export: html2canvas

Prerequisites

  • Node.js (v16 or higher)
  • npm or yarn
  • Google Gemini API key

Installation

  1. Clone the repository

    git clone https://github.com/yourusername/alterego-ai.git
cd alterego-ai

  2. Install dependencies

    npm install

  3. Set up environment variables

    Create a .env file in the root directory:

    API_KEY=your_google_gemini_api_key_here

    Note: Get your API key from Google AI Studio

  4. Start the development server

    npm run dev

  5. Open your browser

    Navigate to http://localhost:5173 to see your superhero generator in action!

Usage

  1. Landing Page: Click "Begin Your Hero's Journey" to start
  2. Personality Quiz: Answer 8+ comic-themed questions about your preferences and personality
  3. AI Generation: Watch as Gemini AI creates your unique superhero profile
  4. Hero Reveal: Discover your hero name, powers, weaknesses, and origin story
  5. Share: Take a screenshot of your alter ego and share with friends!

Project Structure

alterego-ai/
├── public/
├── src/
│   ├── components/
│   │   └── ComicUI.tsx          # Comic book styled UI components
│   ├── services/
│   │   └── geminiService.ts     # Google Gemini AI integration
│   ├── App.tsx                  # Main application component
│   ├── constants.ts             # Quiz questions and constants
│   ├── types.ts                 # TypeScript type definitions
│   └── index.tsx               # Application entry point
├── package.json
├── vite.config.ts
└── README.md

API Configuration

The app uses Google's Gemini 3.0 Flash model for generating superhero profiles. Make sure your API key has access to the Gemini API.

Environment Variables

  • API_KEY: Your Google Gemini API key

Customization

Quiz Questions

Edit constants.ts to add or modify personality quiz questions:

export const QUIZ_QUESTIONS: Question[] = [
  {
    id: 1,
    text: "Your custom question here?",
    options: [
      "Option A",
      "Option B",
      "Option C",
      "Option D"
    ],
  },
  // ... more questions
];

Styling

The app uses Tailwind CSS with custom comic-book themed classes. Modify the styles in component files or add custom CSS classes.

Deployment

Build for Production

npm run build

Preview Production Build

npm run preview

Deploy to Platforms

The built files in dist/ can be deployed to:

  • Vercel
  • Netlify
  • GitHub Pages
  • Any static hosting service

Contributing

We welcome contributions! Here's how you can help:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Development Guidelines

  • Use TypeScript for all new code
  • Follow React best practices
  • Test your changes thoroughly
  • Update documentation as needed

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

  • Google Gemini AI for powering the superhero generation
  • Stan Lee for inspiring the comic book narrative style
  • Framer Motion for smooth animations
  • Tailwind CSS for styling flexibility

Troubleshooting

Common Issues

API Key Error: Make sure your .env file contains a valid Google Gemini API key.

Build Errors: Ensure you're using Node.js v16+ and all dependencies are installed.

Animation Issues: Check that Framer Motion is properly imported.

Support

If you encounter issues:

  1. Check the browser console for errors
  2. Verify your API key is correct
  3. Ensure all dependencies are installed
  4. Open an issue on GitHub

Made with love and a dash of comic book magic!# alterego