Helloween AI chat agent

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

What I Built

Hello Chat is an interactive AI-powered chat interface with a spooky Halloween theme. I created a modern chat application similar to ChatGPT, but with a festive Halloween twist that keeps the spooky spirit alive year-round!

Key Features:

• 🎃 Halloween-themed UI with custom spooky animations (floating ghosts, glowing pumpkins)
• 👻 AI Assistant powered by Google Gemini that responds exclusively about Halloween topics
• 🧛 Smart topic redirection - the AI politely redirects off-topic conversations back to Halloween themes
• 🌍 Multi-language support with an easy toggle between Portuguese 🇧🇷 and English 🇺🇸
• 💀 Modern, responsive design with custom dark color scheme and animations
• 🕷️ Real-time chat interface with smooth message animations

The Halloween Theme:
I chose a dark, atmospheric gradient background (purple to black) with vibrant orange accents - the classic Halloween color palette. The interface includes animated emojis (🎃👻🦇🧛💀) that float and glow, creating an immersive Halloween atmosphere. Custom CSS animations make the ghosts float up and down, and pumpkins glow with a pulsing effect.

The chat interface itself is styled to feel modern and clean (like ChatGPT/Gemini) but with that spooky Halloween touch - black message bubbles with orange borders for the AI, and vibrant orange bubbles for user messages.

Demo

🚀 Live Demo: HELLO AGENT CHAT

📦 Repository: GitHub Repository

💻 Local Demo: Clone the repo and run npm run dev, then visit http://localhost:3000

🏗️ Tech Stack:

• Next.js 14 with App Router
• TypeScript
• Tailwind CSS with custom Halloween theme
• Google Gemini API
• Custom internationalization system

Journey

Development Process

I started by setting up a fresh Next.js 14 project with TypeScript and Tailwind CSS. The first challenge was designing a Halloween theme that felt spooky and festive without being overwhelming or cliché. I spent time experimenting with color combinations and settled on a dark gradient (purple to black) with orange accents - staying true to Halloween traditions.

Technical Challenges Overcome

1. Google Gemini API Integration: The initial struggle was getting the API key configuration right and handling different Gemini model versions. I implemented a robust fallback system to handle API changes gracefully.

2. System Prompt Engineering: Creating a system prompt that keeps the AI focused on Halloween topics while remaining helpful and friendly was tricky. The AI now intelligently redirects off-topic conversations while maintaining user engagement.

3. Building a Custom i18n System: Since I wanted multi-language support but didn't want to add heavy dependencies, I built a lightweight translation system from scratch. It's simple, effective, and easy to extend to more languages.

4. Comprehensive Error Handling: I implemented user-friendly error messages that are helpful and thematic - they guide users through API key setup while maintaining the Halloween atmosphere.

What I'm Proud Of

• Smooth CSS Animations: The floating ghost and glowing pumpkin animations create an immersive Halloween atmosphere without being distracting
• Responsive Design: The chat interface looks beautiful and works seamlessly on all screen sizes
• User Experience: The language toggle is intuitive, positioned in the header with clear visual indicators
• Error Messages: Even error messages are themed and helpful - they guide users through setup while keeping the spooky mood
• Code Organization: Clean separation of concerns with translations in a dedicated module, making it easy to maintain and extend

What I Learned

• How to integrate Google Gemini API with Next.js API routes and handle different model versions
• Building a custom internationalization system without heavy frameworks
• Creating engaging CSS animations that enhance UX without being distracting
• Environment variable management in Next.js and deployment best practices
• User-friendly error handling that guides users through setup issues

What I Hope to Do Next

• Add more languages (Spanish 🇪🇸, French 🇫🇷)
• Implement message history persistence using localStorage or a database
• Add voice input capability for hands-free spooky chats
• Create multiple Halloween themes (pumpkin patch, graveyard, haunted house) that users can choose
• Add more custom emojis and expand the animation library
• Implement a dark/light mode toggle for different viewing preferences
• Add Halloween sound effects for a more immersive experience

---

Getting Started

Prerequisites

• Node.js 18+ installed
• A Google Gemini API key (get one here)

Installation

1. Clone the repository:

git clone <repository-url>
cd hello-chat

1. Install dependencies:

npm install

1. Create a .env.local file in the root directory:

cp .env.example .env.local

1. Add your Gemini API key to .env.local:

GEMINI_API_KEY=your_actual_api_key_here

1. Run the development server:

npm run dev

1. Open http://localhost:3000 in your browser

Project Structure

hello-chat/
├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts       # Gemini API integration
│   ├── globals.css            # Global styles & animations
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Main chat interface
├── lib/
│   ├── translations.ts        # Internationalization system
│   └── README.md             # Translation documentation
├── .env.example               # Environment variables template
└── package.json               # Dependencies

License

MIT License - Feel free to use this project for your own spooky creations! 🎃