Bookmark manager app

Build a fully-functional bookmark manager with add, edit, archive, search, and filter features. Perfect for practicing forms and state management.

Premium challenges are available with Pro.

Join 182 people who have taken this challenge

📝Brief

Your challenge is to build out this bookmark manager app and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So, if you have something you'd like to practice, feel free to give it a try.

We provide the data in a local data.json file, allowing you to populate the content on first load. If you want to take it a step further, feel free to develop this as a full-stack application. If you're building a full-stack application, we've even added optional authentication designs to help you include user authentication.

Your users should be able to:

Add new bookmarks with a title, description, website URL, and tags
View all their bookmarks
See bookmark details, including favicon, title, URL, description, tags, view count, last visited date, and date added
Search for bookmarks by title in the search bar
Filter bookmarks by selecting one or multiple tags from the sidebar
Reset tag filters to view all bookmarks again
View archived bookmarks
Archive bookmarks to remove them from the main view without deleting them
Pin/unpin bookmarks to keep important ones easily accessible
Edit existing bookmarks to update their details
Copy bookmark URLs to the clipboard
Visit bookmarked websites directly from the app
Sort bookmarks by "Recently added", "Recently visited", or "Most visited"
Toggle between light and dark color themes
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

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

Figma design files
Mobile, tablet & desktop layouts
Professional design system for colors, fonts, etc.
Optimized image assets
README file to help you get started
HTML file with pre-written content

💡Ideas to test yourself

Build as a full-stack app with user authentication to persist bookmarks across devices
Integrate an image hosting service (like Cloudinary) to store user avatars and bookmark favicons
Automatically fetch website metadata (favicon, title, description) when adding a bookmark URL
Create a browser extension that lets users save bookmarks directly from any webpage
Implement duplicate detection to prevent saving the same URL multiple times
Add keyboard shortcuts for quick actions (add bookmark, search, navigate)
Add progressive web app (PWA) capabilities for mobile installation and offline access

Challenge FAQs

How can I get help if I'm stuck on a challenge?
How do I submit my solution?
Is there an official solution I can take a look at?
Do I get a code review when I post my solution?
Can I use libraries/frameworks on these projects?
Can I use these projects in my portfolio?
How often are new challenges added?
What is the difference between the desktop-design, mobile-design, and desktop-preview images in my starter code?
Can I use these challenges within my own free or commercial content/tutorials/projects?

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