A modern, full-featured AI assistant website designed to help students and mentors with all aspects of the AI Hackathon Festival 2025.
Features a full-screen chat interface with Google Gemini Pro and community-driven FAQ voting system.
One-click FREE deployment on Vercel.
Share AI Hackathon Assistant
🌟 Pioneering the future of AI-powered event assistance. Built for hackathon participants and mentors.
Tip
Experience the full-screen AI chat interface and community-driven FAQ system in action.
Main Interface - AI Chat (70%) + FAQ Sidebar (30%)
Mobile Views - Responsive Tabbed Interface
Tech Stack Badges:
Important
This project demonstrates modern full-stack development with Next.js 15, TypeScript, and Google Gemini Pro AI. It combines full-screen chat interface with community-driven FAQ voting system to provide comprehensive hackathon support.
📑 Table of Contents
- 🤖 AI Hackathon Festival 2025 AssistantInteractive AI Assistant with Community-Driven FAQ
Transform your hackathon experience with our revolutionary AI assistant powered by Google Gemini Pro. Unlike traditional popup chatbots, our full-screen interface puts AI conversation at the center of your experience.
Key capabilities include:
- 🚀 Real-time Streaming: Character-by-character live responses
- 🎯 Smart Suggestions: Pre-populated question cards for quick start
- 💬 Multi-line Input: Auto-resizing textarea with Shift+Enter support
- 🔄 Persistent History: 50 messages saved locally across sessions
- ⚡ Instant Integration: FAQ questions flow seamlessly into chat
Tip
Try asking: "How do I form a team for the hackathon?" or click any FAQ card to see the instant integration in action.
Revolutionary FAQ management that evolves with your community. Users vote on helpful questions, automatically surfacing the most valuable content to the top.
Community Voting in Action - Questions ranked by helpfulness
Available Features:
- Voting System: 👍 Helpful / 👎 Not helpful with real-time sorting
- Smart Search: Find questions by keywords in title or content
- Category Filter: Browse by Event Info, Teams, Technical, etc.
- View Tracking: Popular questions rise to the top naturally
- One-Click Chat: Send any FAQ directly to AI for follow-up
Beyond the core functionality, this project includes:
- 💨 Instant Setup: Deploy in under 1 minute with one-click Vercel deployment
- 🌐 Responsive Design: Perfect experience on desktop (70/30 split) and mobile (tabs)
- 🔒 Privacy First: All chat data stored locally, no server persistence
- 💎 Modern Animations: Framer Motion powered micro-interactions
- 🎨 Beautiful UI: shadcn/ui components with Tailwind CSS
- 📊 Real-time Updates: Live vote counts and instant FAQ integration
- 🔌 Extensible: Easy to add new question categories and features
- ⚡ Performance Optimized: Lazy loading, efficient state management
✨ Built specifically for the AI Hackathon Festival 2025 with hackathon-specific Q&A database.
Next.js 15 |
React 18 |
TypeScript 5 |
Tailwind CSS |
Gemini Pro |
Vercel |
Frontend Stack:
- Framework: Next.js 15.4.0 with App Router
- Language: TypeScript for type safety
- Styling: Tailwind CSS v3 + Framer Motion v12
- UI Components: shadcn/ui + Radix UI primitives
- State Management: React hooks + Local Storage
AI Integration:
- AI SDK: Vercel AI SDK v4.3.19 for streaming
- AI Provider: Google Gemini Pro via @ai-sdk/google
- Features: Real-time streaming, context awareness
- Performance: Optimized for low-latency responses
DevOps & Performance:
- Deployment: Vercel with automatic CI/CD
- Performance: Lazy loading, efficient bundling
- Monitoring: Built-in error boundaries
- SEO: Next.js App Router with metadata
Tip
Each technology was carefully selected for developer experience, performance, and production readiness.
graph TB
subgraph "Frontend Layer"
A[Next.js App Router] --> B[React Components]
B --> C[Tailwind Styling]
C --> D[Framer Animations]
end
subgraph "AI Integration"
E[Vercel AI SDK] --> F[Google Gemini Pro]
F --> G[Streaming Responses]
end
subgraph "Data Layer"
H[Local Storage] --> I[Chat History]
H --> J[FAQ Votes]
H --> K[User Preferences]
end
subgraph "Deployment"
L[Vercel Platform]
M[Edge Functions]
N[Static Generation]
end
A --> E
B --> H
L --> A
L --> M
M --> F
src/
├── app/ # Next.js App Router
│ ├── api/chat/ # AI streaming endpoint
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main interface
├── components/ # React components
│ ├── chat/ # Chat interface
│ ├── faq/ # FAQ system
│ ├── chatbot/ # Shared components
│ └── ui/ # Base UI components
├── hooks/ # Custom React hooks
│ └── use-faq-voting.ts # FAQ voting logic
├── lib/ # Utilities
│ └── utils.ts # Helper functions
└── public/ # Static assets
Important
Ensure you have the following installed:
- Node.js 18.17+ (Download)
- npm/yarn/pnpm package manager
- Google Gemini API key (Get one here)
1. Clone Repository
git clone https://github.com/ChanMeng666/ai-hackathon-assistant-2025.git
cd ai-hackathon-assistant-20252. Install Dependencies
# Using npm
npm install
# Using yarn
yarn install
# Using pnpm (recommended)
pnpm install3. Environment Setup
# Copy environment template
cp .env.example .env.local
# Edit environment variables
nano .env.localCreate .env.local file with the following variables:
# Required: Google Gemini Pro API Key
GOOGLE_GENERATIVE_AI_API_KEY=your_google_gemini_api_key_here
# Optional: Application settings
NODE_ENV=development
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_secret_key_hereTip
Get your Google Gemini API key from Google AI Studio. Use openssl rand -base64 32 to generate secure random secrets.
4. Start Development
npm run dev🎉 Success! Open http://localhost:3000 to view the application.
Important
Choose the deployment strategy that best fits your needs. Vercel is recommended for seamless Next.js deployment.
Deploy to Vercel (Recommended)
Vercel CLI:
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel --prodOther Platforms:
| Deploy with Netlify | Deploy with Railway |
|---|---|
 |
 |
Warning
Never commit sensitive environment variables to version control. Use secure secret management in production.
| Variable | Description | Required | Example |
|---|---|---|---|
GOOGLE_GENERATIVE_AI_API_KEY |
Google Gemini Pro API key | ✅ | AIza... |
NEXTAUTH_SECRET |
Session encryption secret | 🔶 | generated-secret-key |
NEXTAUTH_URL |
Application URL | 🔶 | https://your-domain.vercel.app |
NODE_ENV |
Environment mode | 🔶 | production |
Note
✅ Required, 🔶 Optional
Desktop Experience:
- AI Chat (70%): Full-screen conversational interface
- FAQ Sidebar (30%): Community-driven question voting
- Seamless Integration: Click FAQ → flows into chat instantly
Mobile Experience:
- Tab Navigation: Swipe between Chat and FAQ views
- Optimized Layout: Full-screen on smaller devices
- Gesture Support: Native mobile interactions
Desktop: AI Chat dominates with FAQ sidebar for quick access
Getting Started:
-
Choose Your Path:
- Click suggestion cards for instant common questions
- Type custom questions in natural language
- Send FAQ questions for detailed follow-up
-
Advanced Features:
- Multi-line Input: Use Shift+Enter for line breaks
- Context Awareness: AI remembers conversation history
- Instant Responses: Real-time streaming from Google Gemini Pro
Example Interactions:
User: "How do I form a team?"
AI: [Streams detailed team formation guidance]
User: "What if I don't have technical skills?"
AI: [Provides specific advice for non-technical participants]
Community-Driven Ranking:
| Feature | Description | Benefit |
|---|---|---|
| 👍 Upvote | Mark questions as helpful | Valuable content rises to top |
| 👎 Downvote | Flag less useful content | Improves overall quality |
| 🔍 Search | Find by keywords | Quick access to specific topics |
| 🏷️ Filter | Browse by category | Organized content discovery |
| 💬 Send to Chat | One-click integration | Seamless AI follow-up |
Available Categories:
- 📅 Event Information: Dates, schedule, logistics
- 👥 Team Formation: Finding teammates, roles, composition
- ⚙️ Technical Details: AI requirements, datasets, tools
- 🏆 Awards & Judging: Criteria, prizes, evaluation process
- 🎯 Mentorship: Getting help, Discord, support channels
Students can get help with:
- 🎯 Getting Started: First-time hackathon guidance
- 👥 Team Building: Finding the right teammates
- 💡 Idea Development: Brainstorming and validation
- ⚙️ Technical Setup: Tools, APIs, development environment
Mentors can assist with:
- 📚 Resource Sharing: Point to useful FAQ answers
- 🎓 Teaching Moments: Use chat for detailed explanations
- 🔍 Quick References: Browse FAQ for common student questions
- 💬 Office Hours: Efficient Q&A through familiar interface
flowchart TD
A[Open Website] --> B{Choose Starting Point}
B -->|Quick Help| C[Click FAQ Card]
B -->|Custom Question| D[Type in Chat]
B -->|Browse Topics| E[Explore FAQ Categories]
C --> F[Read FAQ Answer]
F --> G[Send to Chat for More]
D --> H[AI Streaming Response]
H --> I[Ask Follow-up Questions]
E --> J[Vote on Helpful Questions]
J --> K[Discover Related Topics]
G --> H
I --> L[Continue Conversation]
K --> C
L --> M[Auto-saved Progress]
Tip
Pro Tip: Start with FAQ browsing to discover common topics, then use chat for personalized follow-up questions. Your votes help improve the experience for everyone!
Extend the FAQ database by editing components/chatbot/preset-questions.ts:
{
id: 'unique-id',
category: 'event-info', // Available: event-info, teams, technical, schedule, mentors, awards, logistics
question: 'Your question here?',
answer: 'The detailed answer with helpful information...'
}Customize the AI assistant's personality and knowledge by updating the system prompt in app/api/chat/route.ts:
const systemPrompt = `You are an AI assistant for the AI Hackathon Festival 2025...
- Add specific instructions
- Include domain knowledge
- Set response tone and style
`;Global Styles:
/* app/globals.css */
:root {
--primary-color: #4F46E5;
--secondary-color: #059669;
/* Add custom CSS variables */
}Component Styling:
- Individual components use Tailwind CSS classes
- Theme colors defined in
tailwind.config.js - Animations powered by Framer Motion
- Update Types (
components/chatbot/types.ts):
export type QuestionCategory = 'event-info' | 'teams' | 'your-new-category';- Add Display Name (
components/chatbot/preset-questions.ts):
const categoryNames = {
'your-new-category': 'Your Category Name'
};- Create Questions with the new category value.
We welcome contributions! Here's how you can help improve this project:
1. Fork & Setup:
# Fork the repository on GitHub
git clone https://github.com/YOUR_USERNAME/ai-hackathon-assistant-2025.git
cd ai-hackathon-assistant-2025
# Install dependencies
pnpm install
# Create environment file
cp .env.example .env.local
# Add your API keys2. Create Feature Branch:
git checkout -b feature/amazing-new-feature3. Development Guidelines:
- ✅ Follow TypeScript best practices
- ✅ Add comprehensive tests for new features
- ✅ Use consistent code formatting (Prettier + ESLint)
- ✅ Include JSDoc comments for public APIs
- ✅ Follow accessibility guidelines (WCAG 2.1)
4. Submit Pull Request:
- Provide clear description of changes
- Include screenshots for UI changes
- Reference related issues
- Ensure all checks pass
| Type | Description | Examples |
|---|---|---|
| 🐛 Bug Fixes | Fix existing issues | API errors, UI glitches, performance |
| ✨ New Features | Add functionality | New categories, UI improvements |
| 📚 Documentation | Improve guides | README updates, code comments |
| 🎨 Design | Visual improvements | Better animations, color schemes |
| ⚡ Performance | Optimize speed | Bundle size, loading times |
- Be respectful and inclusive
- Provide constructive feedback
- Help newcomers learn and contribute
- Focus on the project's goals
This project is licensed under the MIT License - see the LICENSE file for details.
Open Source Benefits:
- ✅ Commercial use allowed
- ✅ Modification allowed
- ✅ Distribution allowed
- ✅ Private use allowed
Chan Meng Creator & Lead Developer |
Author Contact:
- 🌐 Website: chanmeng.live
- 💼 LinkedIn: chanmeng666
- 📧 Email: [email protected]
- 🔗 GitHub: ChanMeng666
Empowering hackathon participants and mentors worldwide
⭐ Star us on GitHub • 📖 Read the Documentation • 🐛 Report Issues • 💡 Request Features • 🤝 Contribute
Made with ❤️ by the AI Hackathon Assistant team
