Introducing the Frontend Mentor 30-Day Hackathon!

We're delighted to announce our first-ever hackathon! Whether you're just starting your coding journey or you're a seasoned developer, this is your chance to challenge yourself, connect with our amazing community, and potentially win a year of Frontend Mentor Pro!

What's the FM30 Hackathon?

Starting today, Friday, September 5th, you have 30 days to build your best solution to our brand new Weather App challenge. No need to rush or pull all-nighters – this hackathon is about creating the highest-quality solution you can within 30 days while sharing your journey with the community.

After 30 days, the Weather App challenge will remain on the platform, just like all our other challenges. So if you'd rather skip the hackathon and build at your own pace, that's totally fine! The hackathon simply adds a fun, time-bound element to our free challenge launches for those who want that extra motivation.

For this inaugural hackathon, you'll build a weather application using the Open-Meteo API (more details below). It's a practical project that millions use daily, and you'll learn to work with real-world data along the way. Even if you don't win, you'll walk away with a polished portfolio piece and some new skills under your belt!

How to participate

Getting started

1. Download the challenge: Grab the free Weather App starter files from the challenge page. As always, everything you need to know about the challenge is in the README.
2. Build your solution: Use these 30 days to create something you're genuinely proud of. Focus on quality over speed, and consider extending beyond the basic requirements. We've included some inspiration in the "Ideas to test yourself" section of the challenge page.
3. Share your progress: Post updates using #FM30Hackathon on social media. We'll be watching and resharing standout posts to help boost your visibility!
4. Submit your solution: Follow the submission guidelines below before the deadline.

Submission guidelines

Where to submit

Post your solution in the #hackathon-submissions Discord channel under the Weather App thread.

What to include

Your Discord submission needs just one thing: a link to your solution on Frontend Mentor. This makes it easy for the community to review your work, and since likes and bookmarks factor into the selection process, you'll want as many people as possible to view your solution page.

Please create only one submission post. Duplicates will be removed and could lead to disqualification.

Critical requirements

• Custom README: Your GitHub repo must include a personalized README file (we provide a template in the starter files). Tell us about your process, the details you added, and the challenges you overcame. Including a custom README is mandatory – no README, no valid submission!
• Meaningful commit history: Show your work! We want to see your progress through multiple commits, not just one mega-commit at the end.
• Public accessibility: Make sure everyone can view your live solution and repository.
• Submission deadline: We'll lock the Discord hackathon thread for this challenge on Monday, October 6th at 09:00 AM BST.

How we'll choose winners

Stage 1: Community love

Throughout the hackathon, the community can react to submissions in the Discord channel with:

• ❤️ General appreciation – The default "I like this!" reaction
• 🎨 Visually impressive – For solutions that nail (or improve!) the visual design
• 💡 Creative solution – For clever features, extensions, or other creative approaches
• 🧩 Code quality – For clean code, accessibility, best practices, or technical excellence

Please don't react to your own submission – these will be removed, and repeated attempts could disqualify your entry. Let the community do the celebrating!

We'll also track likes and bookmarks on your Frontend Mentor solution page, so be sure to share that link with your network to increase visibility for your solution.

Stage 2: Our shortlist

Our team reviews all valid submissions and selects five standouts based on:

• Community engagement (all those reactions and platform likes!)
• Code quality and best practices
• How well you've met (or exceeded!) the requirements
• README quality – seriously, be sure to focus on this!

Stage 3: Community vote

The five shortlisted solutions go to a public vote where you all choose the top three winners!

Prizes

We're keeping it simple, but meaningful, for our first hackathon:

• 🥇 1st place: One-year Frontend Mentor Pro subscription ($96 value!)
• 🥈 2nd place: One-month Pro subscription
• 🥉 3rd place: One-month Pro subscription

The Weather App challenge

You'll build a weather application using the free Open-Meteo API. At a minimum, users should be able to:

• Search for weather information by entering a location in the search bar
• View current weather conditions including temperature, weather icon, and location details
• See additional weather metrics like "feels like" temperature, humidity percentage, wind speed, and precipitation amounts
• Browse a 7-day weather forecast with daily high/low temperatures and weather icons
• View an hourly forecast showing temperature changes throughout the day
• Switch between different days of the week using the day selector in the hourly forecast section
• Toggle between Imperial and Metric measurement units via the units dropdown
• Switch between specific temperature units (Celsius and Fahrenheit) and measurement units for wind speed (km/h and mph) and precipitation (millimeters) via the units dropdown
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

But don't stop there! This is your moment to push yourself! Add features, polish the UI, add delightful animations – show us what makes your solution special. You can check out "Ideas to test yourself" on the challenge page for inspiration, but we'll add them here as well:

1. Add geolocation detection to automatically show weather for the user's current location on first visit
2. Implement a favorites/saved locations system where users can bookmark frequently checked locations
3. Implement a "Compare Locations" feature to view weather side-by-side for multiple locations
4. Include UV index, visibility, and air pressure data (available via Open-Meteo)
5. Add sunrise/sunset times with visual indicators
6. Add animated weather backgrounds that change based on current conditions
7. Implement voice search functionality
8. Create dark/light mode themes that adapt to the time of day
9. Add progressive web app (PWA) capabilities for mobile installation

The Open-Meteo API is free, requires no API key, and has generous rate limits, so you can focus on building rather than dealing with authentication hassles.

Tips for success

• Start today, not tomorrow: Beginning early gives you time to experiment, iterate, and polish. Plus, you can help others who get stuck on things you've already solved!
• Document your journey: Share progress on your socials with #FM30Hackathon. We love seeing work-in-progress shots, lessons learned, and those "aha!" moments. We'll keep an eye on the hashtag and reshare selected posts. You might just inspire someone else to keep going!
• Engage with others: The hackathon is as much about community as competition. Help others in Discord, share resources, and celebrate each other's wins.
• Quality beats complexity: A clean, well-documented, accessible solution that nails the basics will beat a complex but buggy app every time.
• Make it yours: While meeting the requirements, add your personal touch. What would make YOU want to use this weather app daily?

FAQs

• Can I use any framework or library? Yes! React, Vue, vanilla JS, whatever you're comfortable with. This is about the final result, not the tools.
• Just one submission per person? Correct – pour all your energy into making one stellar solution rather than several rushed ones.
• Can I team up? This is a solo challenge, but helping each other learn and debug in Discord is strongly encouraged.
• I'm new to coding – should I participate? Absolutely! Hackathons are fantastic learning experiences. Focus on completing a working solution and writing a great README. Simple, clean, and well-documented can definitely win!
• Can I use AI tools? Yes, but make sure you understand and can explain every line of code in your solution. The README should reflect your learning journey and working process.

Important details

🗓️ Key dates

• Starts: Friday, September 5th (today!)
• Submissions close: Monday, October 6th at 09:00 AM BST
• Winners announced: Thursday, October 9th

🔗 Quick links

• Weather App challenge
• Discord server
• Hackathon submissions channel
• Help channel

Ready to start?

We can't wait to see what you build! Our hackathons are a fun chance to push yourself to create something you’re proud to share. We hope you enjoy the process and learn something new along the way!

Got questions? Remember to drop them in our Discord #help channel, and we'll be there to support you.

Happy coding! 🎉