New challenge: Build a restaurant ranking app

We've launched a new premium challenge: build Tastemap, a personal restaurant map and honestly-ranked list of every place you've eaten and every place you still want to try. It's an intermediate-level product challenge, so there's no Figma file and the design decisions are yours. You'll build and deploy a real app with an interactive map, a database, and authentication. There's also a frontend-only path if you'd rather skip the backend, which we'll come to below.

What you'll build

Tastemap replaces star ratings with something more honest. When you rate every place four, you can't tell your third-favorite taco spot from your tenth. So instead of stars, a place earns its position by being compared head-to-head against places you've already been. The result is an ordered list overlaid on a map of your city.

Here are the key pieces you'll put together:

• An interactive map built on free, keyless OpenStreetMap tiles, with every place shown as a pin
• A comparison-based ranking flow ("which was better, A or B?") that places a new spot in a handful of questions
• A ranked list of the places you've been, plus a separate want-to-try list
• Search and filter that drive the map and the list together
• A landing page with a one-click "Try as Guest" mode

What's included

The starter code gives you everything you need to make strong design decisions without a Figma file:

• A full spec covering the core features, the three design-it-yourself challenges, and optional differentiators
• A brand kit and starter CSS tokens (the "Grove" palette, with light and dark modes)
• A sample dataset of 32 real London places and 25 comparisons that seeds the guest experience
• AGENTS.md and CLAUDE.md files so AI tools have full project context

There's no Figma file. You own the visual design.

Two ways to build it

You can take this challenge in two directions:

• Full-stack (recommended): real authentication, a database, and a session-based guest mode. This version shows the most range in a portfolio.
• Frontend-only: skip auth and the database, persist to localStorage, and focus on the map integration and the ranking UX.

Both produce a strong portfolio piece. Pick the one that matches what you want to practice.

What you'll practice

• Integrating a real interactive map with custom markers, clustering, and keyboard access
• Designing an efficient ranking algorithm (like binary insertion) and a comparison UX that stays fast as the list grows
• Keeping two views of one dataset, a spatial map and an ordered list, in sync across filters and selection
• Modeling relational data and deciding whether to store raw comparisons, resolved positions, or both
• Building real authentication plus a guest mode that never touches your database
• Deploying an accessible, responsive product to a live URL

How to start

Head to the challenge page, download the starter code, and read through the README. Start with the product definition and core requirements, then review the brand kit before writing any code.

These challenges are designed for AI collaboration, so lean on AI across planning, building, and polishing. The product and design decisions are still yours, especially the three design-it-yourself features, so think those through before you let AI fill in the code.

Ship something real

The best part of a product challenge is that you deploy a genuine, working app that you, your friends, and your family can actually use. Tastemap is the kind of thing you'll want to keep using after you've built it, to settle "where should we eat?" on a Friday night. A live project real people use tells a much stronger story in your portfolio than a static screenshot.

Some ideas to test yourself

• Generate a public, shareable view of your map or a top-10 list
• Add place search with keyless Nominatim geocoding and a manual fallback
• Build a "your year in food" recap of your cuisines, neighborhoods, and top places
• Add multi-city or travel mode with a "near me" view using geolocation
• Fetch real place logos at runtime, with a cuisine-tinted avatar as the fallback
• Add light and dark modes, including a dark-appropriate map style

Join the community

Building alongside other people makes a real difference. Join our Discord community to share progress, ask questions, and get feedback on your solution.

Take your skills further

This is a premium challenge, part of our library of high-quality projects designed to become standout portfolio pieces. If you're not a Pro member yet, you can find out more at frontendmentor.io/pro.

Happy coding!