This content originally appeared on DEV Community and was authored by CarlosRogerio Orioli
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
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.
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.
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.
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
- Clone the repository:
git clone <repository-url>
cd hello-chat
- Install dependencies:
npm install
- Create a
.env.localfile in the root directory:
cp .env.example .env.local
- Add your Gemini API key to
.env.local:
GEMINI_API_KEY=your_actual_api_key_here
- Run the development server:
npm run dev
- 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! 🎃
This content originally appeared on DEV Community and was authored by CarlosRogerio Orioli
CarlosRogerio Orioli | Sciencx (2025-10-26T12:31:01+00:00) Helloween AI chat agent. Retrieved from https://www.scien.cx/2025/10/26/helloween-ai-chat-agent/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.