The FM30 hackathon returns: Build a currency converter!

After a couple of fun rounds (the Weather App last September, then the Typing Speed Test over the winter), the FM30 Hackathon is back. Whether you're just getting started or you've built with us before, here's your chance to take on a realistic project, push your skills, and share it with a community doing the same.

What's the FM30 Hackathon?

The FM30 Hackathon is a 30-day challenge to build one project really well. There's no pressure to speed-run it. Take your time, experiment, and focus on quality, so you come out the other side with a portfolio piece you're proud of.

For these 30 days, the FX Checker challenge is free for everyone, including free access to the Figma design file that's normally part of Pro. Once the hackathon ends, the challenge becomes premium and the design moves behind Pro, so now's a good time to jump in.

It's an intermediate-level project, and a good one if you want to practice working with a real API, drawing charts from live data, and saving state in the browser.

How to participate

Getting started: Download the starter files from the challenge page and read through the README. Build your solution, and go beyond the requirements if you can. Add features, polish the details, make it something you'd actually use. Share your progress as you go with #FM30Hackathon.

Submitting your solution: Post your solution in the #hackathon-submissions channel on our Discord server, in the "Foreign exchange currency converter" thread. All you need to include is a link to your Frontend Mentor solution page.

Requirements:

• A custom README (we provide a template in the starter files to help)
• A meaningful commit history that shows your progress
• A publicly accessible live demo and repo
• One submission per person

The deadline is Monday, July 13th at 2:00 PM BST.

How we'll choose winners

Stage 1: Shortlisting. We'll review all the valid submissions and pick five finalists, based on code quality, accessibility, how well you met the requirements, and the quality of your README.

Stage 2: Community vote. The five finalists go to a public vote, and the community picks the top three winners.

Prizes

• 🥇 1st place: one year of Frontend Mentor Pro ($96 value)
• 🥈 2nd place: one month of Pro
• 🥉 3rd place: one month of Pro

The remaining shortlist members will receive a free premium credit to tackle another premium challenge.

The challenge

FX Checker is a currency app built around live exchange rates. At its core, it converts an amount from one currency to another using real, up-to-date rates from an API, and it grows from there into a proper little markets dashboard.

Your users should be able to:

• Convert between currencies in real time using live rates
• Search the full list of currencies and switch the send and receive pair
• Follow a live market ticker showing pairs and their 24-hour change
• View a rate-history chart with ranges from one day to five years
• Compare one amount across several currencies at once
• Favorite the pairs they care about and keep a log of their conversions
• Use it comfortably on any screen size, with proper hover and focus states

For the data, we recommend the free Frankfurter API. It's backed by the European Central Bank, requires no API key, and covers both live rates and historical time series for the chart. Favorites and the conversion log are saved in the browser with localStorage, so there's no backend to build.

Want to push it further? A few ideas:

• Add a light theme to go with the dark-first design
• Persist the active pair in the URL so a conversion can be shared
• Add keyboard shortcuts for the search, the swap, and the chart ranges
• Let users export their conversion log as a CSV file
• Cache the last rates and show an out-of-date notice when the API is unreachable

Tips

• Write a complete README. It's a requirement, not a nice-to-have: an entry without one isn't counted as a valid submission. It's also where you document your process and the decisions you made, which carries real weight in judging, and putting one together shows you've read the brief and paid attention to the details.
• Start early so you've got time to iterate.
• Help others out in Discord. It's a competition, but a friendly one.
• Accessibility matters. Keyboard navigation and visible focus states count for a lot, and they matter even more on a dark interface like this one.

FAQs

• Can I use a framework? Yes, use whatever you like. React, Vue, Svelte, or plain HTML, CSS, and JavaScript are all welcome.
• Can I use AI tools? Yes, as long as you understand the code you're submitting and you're upfront about your process.
• I'm a beginner, can I take part? Please do. It's an intermediate challenge, so focus on the core requirements and a solid README, and don't worry about the extras.
• Can I work in a team? It's a solo challenge, but you're very welcome to swap ideas and help each other out in Discord.

Key dates

• Starts: Friday, June 12th
• Submissions close: Monday, July 13th at 02:00 PM BST
• Winners announced: Thursday, July 16th

Links

• Challenge page: https://www.frontendmentor.io/challenges/foreign-exchange-currency-converter
• Join the Discord community: https://www.frontendmentor.io/community
• Need help? Ask in the #help channel

Let's go

That's everything. Download the starter files, read the README, and start building. We can't wait to see what you make. Good luck, have fun, and don't forget to share your progress with #FM30Hackathon!