Brainstorming Hackathon Project Ideas

Project Ideas to Tackle at Your First Hackathon!

If you're new to hackathons and coding, choosing what to build can feel overwhelming. But don't worry; below is a compiled list of project ideas to help you get started!

Disclaimer: This guide does not contain any tutorials.

1. Build a Website

Image credits: VSCode

To start building a website, you can either go for coding options or no-code options. If you're in a hackathon, it's recommended that you go with the coding option, even if you never tried it before (and gain actual experience with web development!).

HTML is used to build the actual content of the website, while CSS is used to make it visually appealing (by styling it). You can also add different fonts, colors, and spacing to your website using CSS. Finally, if you want to add reactivity or animations, you can do so with JavaScript (optional).

To get started, you can either create a new HTML file in your IDE of choice (if you already have it set up), or if not, you can use an online IDE such as Replit. If you are just starting out, I recommend you use Replit as it makes it easy for you to create, structure, and deploy your website (plus its AI is great as well!).

There are plenty of resources online to get started with building a website, with some great resources listed below:

• Hello World Website Tutorial
• Learn HTML Free in 2025 – Basic HTML Codes for Beginners
• Hack Club Workshops - Personal Website
• Code the Web - Steps to Creating a Website
• W3Schools - HTML Tutorial
• Web.dev - Learn HTML

Here are some resources to get you started with learning CSS:

• Flexbox Froggy
• Web.dev - Learn CSS
• W3Schools - CSS Tutorial

And JavaScript:

• Web.dev - Learn JavaScript
• W3Schools - JavaScript Tutorial

If you're ambitious and have enough time, you can try implementing more advanced features like:

• Adding a form for the user to submit information (though you would need a backend or API to actually collect the data)
• Implementing a navbar and footer
• Implementing animations for your hero page (like the button animation on our homepage!)

2. Create a Game (JavaScript or Game Engine)

There are many ways to jump into game development - you can start with a simple JavaScript-based game or explore more advanced options using game engines like Unity or Godot.

Godot engine example: Image Credits: Godot

If you're making a JavaScript game, there are tons of tutorials on Youtube to help you get started.

However, if you prefer a more visual and beginner-friendly approach, consider using a game engine like Unity or Godot (though check with your hackathon rules to make sure it's eligible).

Both are fairly popular and are beginner-friendly. They also both provide a drag-and-drop interface for creating game scenes, adding pre-built components like physics engines and lighting systems, and importing assets like 3D models or sprites. Note that for Godot, you will have to learn either GDScript (Godot's built-in programming language) or C# to access all its features. Likewise, if you're using Unity, you would have to learn C# in order to utilize its scripting features.

• Official Godot page
• Official Unity page

Here are some great beginner tutorials for you to check out:

• Official Godot docs
• Brackey's Godot tutorial
• Official Learn Unity website
• Brackeys Learn to build a game using Unity playlist

3. Develop an Online Tool Using APIs

APIs (Application Programming Interfaces) allow developers to access and integrate data or functionality from external sources into their applications. Building an online tool that uses an API is an excellent way to practice working with data fetching, handling data, and creating user-friendly interfaces.

Note that for this type of project, you should be comfortable with basic web development (HTML, CSS, JavaScript) or app development (React Native, Flutter, etc.)

If you're unsure where to start, explore beginner-friendly APIs like weather APIs (e.g., OpenWeatherMap), movie databases (e.g., The Movie Database), or APIs that generate random jokes, quotes, or cat facts.

For example, you could build a weather app that displays current weather conditions and forecasts based on the user's location, a movie recommendation engine that suggests films based on user preferences, or a simple chatbot that responds with jokes or famous quotes.

Once you have a clear plan, you can reference your API's documentation to learn how to make requests, handle responses, and process the data. Many APIs also provide code examples and libraries to simplify integration with different programming languages. You can also look online for YouTube tutorials for the APIs that you're working with.

As you progress, try implementing more advanced features like:

• Implementing error handling and fallback scenarios for API failures
• Caching API responses to improve performance and reduce API calls
• Adding authentication and user accounts to save preferences or settings
• Integrating with additional APIs to enhance your tool's functionality (e.g., adding maps or social media sharing)

Finally, deploy your online tool to a hosting service like Netlify, Vercel, or GitHub Pages for the world to use!

Harder Options

Try these ideas out if you feel confident in your hacking skills and have the time to build something more complex! Note that these project ideas are NOT recommended if you are a complete beginner or do not have much time to learn and build your project.

4. Build a Todo List App

For this project, start by designing a simple user interface with HTML and CSS, including elements like input fields, buttons, and a list to display tasks. Use JavaScript to add functionality like:

• Adding new tasks to the list
• Marking tasks as complete or incomplete
• Removing tasks from the list
• Filtering or sorting tasks based on their status or priority

Explore different ways to manage and update the application state, such as using vanilla JavaScript objects, React state hooks, or Vue's reactive data system.

Once you have a basic todo list app working, explore advanced features like:

• Implementing data persistence so tasks are saved even after the page is refreshed or closed (e.g., using local storage, cookies, or a backend database)
• Adding user authentication and creating separate task lists for each user - Firebase Authentication is great if you're just starting out!
• Allowing users to create and manage multiple task lists or projects
• Implementing drag-and-drop functionality for reordering tasks
• Adding due dates, reminders, or notifications for upcoming tasks
• Integrating with APIs or services like calendars, task managers, or productivity tools

If you're looking for a challenge, consider building your todo list app as a progressive web app (PWA) or a mobile app using frameworks like React Native or Flutter, allowing users to install and use the app offline.

5. Make a Chatbot

With the rise of LLMs, chatbots have become a popular choice for many hackathoners. Building a chatbot is a great way to learn about handling user input, generating contextual responses, and creating conversational interfaces. If this is your first time working with chatbots, Vercel provides templates to help you get started.

But if you're looking to build a chatbot from scratch, here's how you can start:

First, create a simple rule-based chatbot that can respond to predefined inputs and commands. You can use JavaScript or a framework like React or Vue to build the chatbot's user interface, including an input field for user messages and a display area for the chatbot's responses.

Implement basic functionality like:

• Recognizing specific keywords or phrases in the user's input
• Generating pre-written responses based on the detected keywords or phrases
• Handling greetings, farewells, and basic small talk
• Providing helpful information or instructions based on predefined scenarios

As you progress, explore more advanced techniques like:

• Integrating with APIs or external services for contextual responses (e.g., weather, news, or knowledge bases)
• Implementing basic natural language processing algorithms for understanding user intent and extracting relevant information
• Training machine learning models for more sophisticated language understanding and response generation
• Enhancing the chatbot's personality and conversational abilities through better context tracking and response variation
• Integrating with voice interfaces or virtual assistants like Alexa or Google Assistant

Consider building your chatbot as a web application, a mobile app, or even integrating it with messaging platforms like Slack, Discord, or Facebook Messenger.

Extra Tips

Here are some additional tips!

• If you're just starting out, web apps are generally easier to build than mobile/desktop apps (they're easier to set up and are more accessible).
• If you want to create a website that has advanced features such as SSR and user functionality, check out frameworks like Next.js, React, or Angular (only if you're proficient with HTML, CSS, and Vanilla Javascript already).
• For deploying your apps, consider Firebase, Vercel, or Netlify - they help speed up deployment greatly. If you're using Replit however, Replit has its own deployment system which you can use (though it isn't free).
• If you want to make a mobile app, look into cross-platform tools like Flutter or React Native.
• Keep things small. Especially if it's your first hackathon, it's extremely to overstretch and not finish your project. Instead, try your best to complete a minimum viable product, or MVP.
• Prioritize design and user experience - even basic projects should look professional. If you have to choose between implementing another cool but additional feature and improving your overall design and user experience, choose to improve your overall design and user experience. This will greatly help with your final presentation.
• If possible, set up your code editor, install any required software, and pull starter code BEFORE the hackathon.
• If provided, take advantage of workshops, mentors, and documentation provided by event organizers.

Most importantly, have fun with your hackathon project! Don't get bogged down in perfection. The goal is to learn some new skills, be creative, and collaborate with others who are just as passionate about coding as you.

If you found this guide to be helpful, make sure to leave a heart!