HackMate AI
Inspiration
Hackathons are exciting, but many participants lose valuable time brainstorming ideas, organizing tasks, and preparing a clear execution plan. I wanted to create an AI-powered co-founder that helps teams move from an initial idea to a structured, hackathon-ready project within minutes.
What it does
HackMate AI is an intelligent assistant that helps hackathon participants generate a complete Hackathon Canvas.
It can:
- Generate innovative project ideas.
- Create an MVP roadmap.
- Suggest the best technology stack.
- Recommend team roles.
- Build a 48-hour execution plan.
- Suggest monetization strategies.
- Provide winning tips.
- Export the generated canvas as Markdown or PDF.
How we built it
HackMate AI was built using:
- React + Vite for the frontend.
- Google Gemini API for AI-powered generation.
- Local Storage to save chat history and generated canvases.
- html2pdf.js for PDF export.
- React Icons for a clean and modern interface.
- Custom UI/UX focused on hackathon productivity.
The application communicates with Gemini, processes AI responses, validates structured JSON, and converts it into an interactive Hackathon Canvas.
Challenges we ran into
During development I faced several technical challenges:
- Handling inconsistent AI responses and validating generated JSON.
- Designing a clean interface that remains easy to use under hackathon pressure.
- Managing API rate limits and temporary service unavailability.
- Supporting editable canvas sections while keeping exported files consistent.
- Integrating PDF export without breaking the application layout.
Accomplishments that I am proud of
- Built a complete AI-powered Hackathon Canvas generator.
- Designed an intuitive and responsive user interface.
- Added Markdown and PDF export.
- Created editable project planning sections.
- Successfully integrated Google Gemini AI into the workflow.
What I learned
Throughout this project I learned:
- Prompt engineering for structured AI outputs.
- Building reliable AI-assisted applications.
- Error handling for LLM responses.
- Frontend architecture using React.
- Deploying modern web applications with Vercel.
I also learned the importance of designing AI tools that improve productivity while keeping the user in full control of the generated content.
Built With
- React
- Vite
- JavaScript
- Google Gemini API
- HTML
- CSS
- html2pdf.js
- React Icons
AI Assistance
During development I used AI coding assistants including OpenAI ChatGPT (GPT-5.6) and OpenAI Codex to help with brainstorming, debugging, code refactoring, interface improvements, and documentation. All architecture, integration, testing, and final implementation decisions were reviewed and completed by the project developer.