RSS feed reader

Build an RSS feed reader that lets users subscribe to blogs and news sources, organize feeds into categories, and browse articles in a unified timeline.

Join 1,596 people who have taken this challenge

📝Brief

Your challenge is to build Frontpage, a content aggregator that pulls RSS and Atom feeds into a single, well-designed reading dashboard. There's no Figma file for this challenge — you'll make all the design decisions yourself.

We provide a brand kit with design tokens, sample data with curated RSS feeds, and detailed specs in the starter code. You can use any tools you like to help you complete the challenge.

We provide the data in a local JSON file, allowing you to populate the content on first load in "guest mode". We recommend building this project as a full-stack application, though.

Your users should be able to:

Add, organize, and manage RSS/Atom feed subscriptions across custom categories
Browse, search, and bookmark articles from all their feeds in one place
Read articles in an in-app reader view or open the original source
Track read and unread state across feeds
Import and export subscriptions using OPML
Sign up for an account or try the app as a guest with pre-loaded content
See a landing page that communicates the product's value
View the optimal layout for the app depending on their device's screen size

These features have no spec — you design them:

Content discovery and onboarding: How do new users find feeds to follow?
Digest view: How do users catch up on what they missed?
Layout customization: What layout options can users choose from?

Download the project and go through the README.md file. This will provide further details about the project and help you get set up.

Want some support on the challenge? Join our community and ask questions in the help channel.

🗃Assets provided

Detailed product specification
Brand kit and design guidance
Starter CSS tokens and Tailwind config
Sample data for the guest experience
README to help you get started
Figma design file (not included with product challenges)

💡Ideas to test yourself

Add keyboard shortcuts and a command palette for power users
Use AI to summarize articles or generate weekly highlight digests
Add offline reading support and ship as an installable PWA
Let users receive newsletters via a unique email address alongside their feeds
Track reading habits and display analytics like streaks and activity heatmaps
Build customizable reading preferences for font size, line height, and contrast

Challenge FAQs

What is a product challenge?
Product challenges are a different format to our design challenges. Instead of providing Figma design files, we give you a detailed product specification, brand kit, and design guidance. You make the UX and design decisions yourself — collaborating with AI if you'd like — and ship a real deployed product. They're a great way to practice the full product development process.
What assets are provided with a product challenge?
Product challenges include a detailed product specification, brand kit with design guidance, starter CSS tokens and Tailwind config, sample data, and a README to help you get started. There are no Figma design files — you're responsible for making the design decisions yourself.
What is the difference between a design challenge and a product challenge?
Design challenges provide Figma design files that you build to as closely as possible. Product challenges don't include any design files. Instead, you receive a product specification and make all the UX and design decisions yourself. Both formats help you improve your skills, but product challenges also develop your ability to make design decisions and ship complete products.
How can I get help if I'm stuck on a challenge?
The best (and quickest) way to get help on a challenge is in our Discord server. There are thousands of other developers in there, so it's a great place to ask questions. We even have a dedicated "help" channel! If you haven't joined yet, you can get an invite to our Discord server here.
How do I submit my solution?
We'd recommend reading our complete guide to submitting solutions. If you get stuck and need help, please feel free to ask questions in our Discord server, and we'll help you submit your project.
Is there an official solution I can take a look at?
We don't provide "official" solutions for the challenges. This is because there is no single perfect way to complete a challenge. Instead, you're encouraged to review other people's code in the community. You can learn so much by seeing how other people have approached the same challenges and giving them feedback.
Do I get a code review when I post my solution?
Frontend Mentor is a collaborative learning community where everyone can give feedback to each other. If you'd like to receive feedback from the community, please be sure to post a question when you submit your solution. The more specific you can be, the better. Being clear with your questions means you're much more likely to receive valuable feedback from others.
Can I use libraries/frameworks on these projects?
Yes! Our challenges provide professional designs but there are no rules on what tools to use. So feel free to use anything you like to build your projects.
Should I use AI tools when working on challenges?
We recommend building strong fundamentals first — understanding HTML, CSS, and JavaScript deeply will serve you throughout your career. Once you feel confident in your core skills, we'd definitely encourage you to practice using AI coding assistants. Modern development workflows increasingly involve collaborating with AI agents, and it's a valuable skill to develop. The key is learning to review, refine, and guide AI output to produce high-quality code — not just accepting whatever it generates. Product challenges are a great place to practice this, as they're designed with AI collaboration in mind.
Can I use these projects in my portfolio?
Definitely! Please do feel free to use whatever you build in your portfolio. Helping developers add professional-looking projects to their portfolio was one of the reasons we created this platform!
How often are new challenges added?
We launch a new challenge every two weeks. We alternate between free and premium challenge launches, so we launch one free and one premium challenge each month.
Can I use these challenges within my own free or commercial content/tutorials/projects?
Please visit our License page to learn more about how our challenges can be used within your own content. If you're unsure about anything, please feel free to contact us at [email protected] and we'll be more than happy to answer your questions.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord