Frontend Challenges

This repo contains frontend challenges to help developers improve problem-solving skills and create performant and accessible UIs.

Each challenge includes:

• Requirements
• Solution in React with TypeScript.
• Live demo (Coming soon)

Table of Contents

• Frontend Challenges (WORK IN PROGRESS)
  • Table of Contents
  • Problems
    • User Interface problems
    • Utility functions problems
  • Use Cases
  • Getting Started
  • How to Check if Your Solution (UI) Is Accessible
  • How can you help?
  • How To Add Your Solution
  • How To Add New Problem
  • Coding Standards

Problems

User Interface problems

Title	Difficulty	Completed	Accessible	Reviewed	Solution
Traffic light	Easy	✅	✅	✅	Solution
Whack a Mole	Medium	✅	✅	✅	Solution
File Explorer	Medium	✅	✅	✅	Solution
Wordle Game	Hard	✅	✅	✅	Solution
Twitter like	Medium	✅	✅	✅	Solution
Twitter like II	Medium	-	-	-	Solution

Utility functions problems

Title	Difficulty	Topic
To Be Or Not To Be	Easy	Closures
Array Reduce Transformation	Easy	Basic Array Transformations
Function Composition	Easy	Function Transformations
Return Length of Arguments Passed	Easy	Function Transformations
Allow One Function Call	Easy	Function Transformations
Memoize	Medium	Function Transformations
Calculator with Method Chaining	Easy	Classes
Add Two Promises	Easy	Promises and Time
Sleep	Easy	Promises and Time
Timeout Cancellation	Easy	Promises and Time
Interval Cancellation	Easy	Promises and Time
Promise Time Limit	Medium	Promises and Time
Cache With Time Limit	Medium	Promises and Time
Debounce	Medium	Promises and Time
Execute Asynchronous Functions in Parallel	Medium	Promises and Time
Is Object Empty	Easy	JSON
Chunk Array	Easy	JSON
Array Prototype Last	Easy	JSON
Group By	Medium	JSON
Sort By	Easy	JSON
Join Two Arrays by ID	Medium	JSON
Flatten Deeply Nested Array	Medium	JSON
Compact Object	Medium	JSON

Use Cases

• Employers evaluating frontend developer skills
• Frontend developers seeking practice with coding challenges.

Getting Started

If you wanna work with React, you can use the starter template.

Just run this command:

syntax: challenge-cli start $PROBLEM_NAME $PROJECT_NAME
# $PROJECT_PATH default value is your github username or 'my-solution'

# Example 1
challenge-cli start twitter-like

# Example 2
challenge-cli start twitter-like my-solution

How to Check if Your Solution (UI) Is Accessible

You can use automated accessibility checkers like axe-core to detect most accessibility issues.

For more information, check out this article.

Also :

• Test your app with a keyboard to ensure full keyboard navigation
• Add ARIA labels to make your app understandable by screen readers
• Use Claude for a final accessibility check

Note

axe-core is already included in the starter template.

How can you help?

• ⭐️ Star this repository to motivate the addition of more challenges
• 🤓 Solved an interesting problem? Feel free to submit it!
• 🐞 If you find a bug, raise an issue or fix it and send a pull request.
• 📚 Improve documentation or add tutorials for solving challenges.

How To Add Your Solution

To add your solution follow the process for making a pull request to an open-source project.

In short:

• Fork this repo and clone it.
• Create a branch and make your change.
• Push your branch to your fork.
• Open a PR against this repo.

How To Add New Problem

If you wanna work with React, you can use the starter template.

if you can create a new problem, use the create command:

syntax: challenge-cli create $PROBLEM_NAME $PROJECT_NAME
# $PROJECT_PATH default value is 'problems'

# Example 1
challenge-cli create new-problem

# Example 2
challenge-cli create new-problem problems-folder

Coding Standards

Please adhere to the following coding standards when submitting solutions:

• Ensure your app is accessible. Refer to the Accessibility Guidelines for more details.
• Format your code using Prettier.