Personal reading list

Build a personal reading list app that lets users search for books, organize them into shelves, track reading progress, and explore year-in-review statistics.

Premium challenges are available with Pro.

Join 227 people who have taken this challenge

📝Brief

Your challenge is to build Bookshelf, a personal reading tracker that lets users search for books via an API, organize them into shelves, track reading progress, set annual goals, and explore year-in-review statistics. 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 45 curated books across 5 genres, 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 local JSON and CSV files, 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:

Search for books by title, author, or ISBN and add them to their library
Organize books into customizable shelves like "Want to Read", "Currently Reading", and "Read"
Track reading progress and see visual progress indicators
Set an annual reading goal and track their pace throughout the year
Rate books and add personal notes
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 don't have a spec — you make the product decisions:

Year-in-review & reading insights: How do users reflect on their reading year? What data do you show and how do you visualize it?
Book discovery & recommendations: How do users find their next great read beyond the search box?
Reading progress tracking UX: How do users update their progress, and what makes the interaction feel satisfying rather than tedious?

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

Build animated shelf and cover interactions with 3D perspective transforms and drag-and-drop
Use AI to generate personalized book recommendations and reading insights
Go beyond WCAG compliance with customizable reading preferences, dyslexia-friendly fonts, and a fully accessible keyboard workflow
Build a comprehensive reading statistics dashboard with interactive charts and heatmaps
Generate shareable reading cards for social media, like Spotify Wrapped
Add keyboard shortcuts and a command palette for power users

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