How to build hackthon projects from ZERO!

1. Hack X Sprint!!!

2. “How to build from
ZERO”
Design. Create. Inspire
GDGC

3. From Idea → Website → AI → GitHub → Hosting
End-to-End Website Development Using Google Technologies
1.This session is designed to prepare you for Hack X Sprint by showing
how a real project is built under time pressure using industry tools.
2.We will follow a hackathon mindset where execution and working
demos matter more than perfect architecture.
3.The entire build process is done live to simulate how teams work during
the actual hackathon sprint.
4.All tools used in this session are beginner-friendly and suitable for rapid
prototyping.
5.“Build from zero” means starting with an empty folder and ending with
a live, judge-ready product.
6.This session is especially useful for first-time hackers who don’t know
where to begin.
7.By the end, you will understand the exact workflow required to succeed
in Hack X Sprint.

4. Many teams spend too much time discussing ideas instead of building,
which reduces their final output.
Teams often try to build too many features and fail to complete even one
properly.
Setting up custom backend servers wastes valuable sprint time and
introduces unnecessary bugs.
AI seems complex to beginners, so many teams avoid it despite its high
scoring potential.
Projects that run only on local machines make it hard for judges to test
and evaluate.
Poor code management leads to conflicts and lost progress during
collaboration.
This session demonstrates a workflow that avoids all these mistakes.
WHY HACKATHON TEAMS STRUGGLE
Common Mistakes That Cost You the Hackathon

5. WHAT WE WILL BUILD
We will build a simple AI-powered web application that can be demonstrated
within minutes.
The user will interact with the app by entering a query or problem statement.
Gemini AI will process the input and generate an intelligent response in real
time.
Firebase will store both user input and AI output to show real backend usage.
The frontend will remain simple so that functionality is the main focus.
The project is designed as a Minimum Viable Product suitable for hackathon
judging.
The final output will include both a live URL and a GitHub repository.

6. HACKATHON TECH STACK STRATEGY
1.We use basic HTML, CSS, and JavaScript/ Typescript because they allow the
fastest development during a hackathon.
2.Firebase is chosen as the backend because it removes the need for server setup
and API creation.
3.Gemini AI adds innovation and intelligence with minimal effort using API
calls.
4.GitHub ensures proper collaboration and code backup throughout the sprint.
5.Vercel allows instant deployment directly from GitHub with almost no
configuration.
6.All tools used provide free tiers that are sufficient for hackathon demos.

7. FIREBASE FOR HACKATHONS
1.Firebase acts as a complete backend service so teams can focus on product
logic instead of infrastructure.
2.Authentication can be added easily if the problem statement requires user
identity.
3.Firestore provides a fast and scalable database that works directly with
frontend code.
4.Firebase eliminates the need to build REST APIs during the sprint.
5.Simple security rules help protect data without deep backend knowledge.
6.The backend scales automatically if multiple users access the app during
judging.
7.Firebase significantly reduces development time in hackathon
environments.

8. FIREBASE SETUP IN SPRINT MODE
A new Firebase project is created specifically for the hackathon idea to
keep everything isolated.
Firestore is enabled in test mode to allow rapid development without
configuration delays.
Authentication is enabled only if required and can be skipped for MVPs.
Firebase configuration keys are used to connect the frontend to the
backend.
Firebase SDK is added to the project so services can be used directly in
JavaScript.
No backend server code is written at any stage.
After setup, the backend is immediately ready for use.

9. The frontend is kept minimal to ensure the core idea is visible during demos.
User interaction flow is kept simple so judges understand the product instantly.
HTML defines the structure of the app without unnecessary elements.
CSS is used only to make the interface clean and readable.
JavaScript handles all interactions, including user input and AI responses.
Features are built incrementally to avoid breaking the app at the last moment.
The priority is a working product, not a perfect UI.
FRONTEND DEVELOPMENT FOR HACKATHONS

10. Firebase is initialized in the frontend using configuration keys.
Firestore is connected so data can be stored directly from the browser.
User queries are saved in the database to demonstrate backend
functionality.
Gemini responses are also stored to show end-to-end data flow.
Stored data can later be used for analytics or improvement ideas.
Basic security awareness is maintained even during demos.
A full-stack demo significantly improves judge perception.
CONNECTING FIREBASE TO THE FRONTEND

11. 1.Gemini provides advanced AI capabilities that can be integrated within
minutes.
2.AI features increase innovation and often improve hackathon scores.
3.No machine learning or data training is required to use Gemini.
4.AI behavior is controlled using prompts, making customization easy.
5.Gemini can be used for chatbots, advisors, summarization, and more.
6.Free usage limits are sufficient for hackathon demos.
7.Our project uses Gemini to convert user input into intelligent responses.
GEMINI AI FOR HACK X SPRINT

12. A Gemini API key is generated from Google AI Studio for authentication.
The API key is stored securely using environment variables.
User input is sent to Gemini as a prompt via an API request.
Asynchronous programming is used to handle AI response time.
The AI output is displayed instantly on the website.
Error handling ensures the app does not crash during demo.
AI integration adds strong technical depth to the project.
GEMINI API INTEGRATION

13. GitHub is used to store code and meet hackathon submission requirements.
Repositories are created early to avoid last-minute issues.
Regular commits help track progress and collaborate smoothly.
Vercel connects directly to GitHub for automatic deployments.
Environment variables are configured on Vercel for API security.
Each deployment generates a public URL for judges.
A live demo link increases credibility and trust.
GITHUB & VERCEL FOR SUBMISSION

14. 1.Is Firebase mandatory for hackathon projects?
2. Do we need to use authentication in our project?
3.Do we need machine learning knowledge to use Gemini AI?
4.Is it safe to use Gemini API keys in a hackathon project?
5.Why is GitHub required for Hack X Sprint submissions?
6.How often should we push code to GitHub during the hackathon?
7.What happens if our project works locally but not after deployment?
8.Why is deployment so important for hackathons?
9.. Why should we use Vercel instead of other hosting platforms
10.Can Firebase backend work with Vercel hosting?
11.What should a hackathon MVP focus on?
12.Can we use open source repos?
FAQs — Hack X Sprint | Build From Zero