Twitter like Challenge

Problem Description

Create a "like button" component similar to the one used in Twitter tweets. The button should be initially set to "false" and can be toggled by clicking on it.

Requirements

• Implement a debounce mechanism to prevent unnecessary requests.
• Make debounce from scratch
• Simulate saving the "like" status by sending a mock request to a backend or using local storage.
• If the value doesn't change, avoid sending a mock request.
• Handle errors if the mock request fails: log the error and reset the like state.
• Ensure that the "like" status persists on page reload.

Example

Here's an example of how the component might be used:

Props

The LikeButton component accepts the following props:

• isLiked (boolean): The current like state
• setIsLiked (function): A function to update the like state

Getting Started

You can create a new project or use our CLI tool to use the starter template.

First Time Setup

Start Working

Solution

To view the reference solution:

How to Review Your Solution

• axe-core is pre-integrated in the starter template. To use it:

  1. Open your browser's Developer Tools (F12)
  2. Check the Console tab while using your app
  3. Review and fix accessibility errors that appear (ignore minor errors)

• Test your app with keyboard to ensure full keyboard navigation (if applicable)

• Add ARIA labels to make your app understandable by screen readers

• Use Claude for a final accessibility & quality check.

  Example Prompt for Claude:

  Then paste your code..

How to Share Your Solution

If you used the CLI tool

1. Fork the frontend-challenges repository
2. Add your fork as a new remote to your existing solution:

3. Open a pull request (PR) from your fork to the main repository.

If you started from scratch

1. Fork the frontend-challenges repository and clone it
2. Navigate to the solution directory:

3. Add your solution files in this directory
4. Push your changes to your fork
5. Open a pull request (PR) to contribute your solution

Need help?

• Follow this guide to making a pull request to an open-source project
• OR, create an issue at frontend-challenges