🚀 Frontend Challenges

This repository features frontend and JavaScript challenges, along with Data Structures and Algorithms (DSA) problems, designed to help developers enhance their problem-solving skills and build performant, accessible UIs.

You can also use The Frontend Wizards App.

Each challenge has:

• ✨ Requirements
• 💡 Solution (React with TypeScript for UI challenges)
• 🎮 Live demo (for UI challenges)

📚 Table of Contents

• 🚀 Frontend Challenges
  • 📚 Table of Contents
  • 💪 Problems
  • 🎯 Use Cases
  • 🏃‍♂️ Getting Started
  • 🔍 How to Review Your Solution
  • 🤝 How to Contribute
    • 📋 TODOs
  • 📢 How To Share Your Solution
  • ➕ How To Add New Problem
  • 📐 Coding Standards
  • 📜 License

💪 Problems

🎨 User Interface Challenges

Title	Difficulty	Completed	Accessible	Solution
Hello World	Easy	✅	✅	Solution
CountDown	Easy	✅	✅	Solution
Simple Form I (without accessibility)	Easy	-	-	-
Star Rating	Easy	✅	✅	Solution
Simple Form II (with accessibility)	Easy	-	-	-
Traffic light	Easy	✅	✅	Solution
OTP Input	Medium	✅	✅	Solution
File Tree	Medium	✅	✅	Solution
Twitter like	Medium	✅	✅	Solution
Twitter like II	Medium	-	-	Solution
Nested Checkboxes I	Medium	✅	✅	Solution
Whack a Mole	Medium	✅	✅	Solution
Wordle Game	Hard	✅	✅	Solution
Memory Game	Hard	✅	✅	Solution
Subway Surfers	Legendary	✅	✅	Solution

⚙️ Utility Functions

Category	Title	Difficulty
Basic Functions	Create Hello World Function	Easy
Closures	Counter	Easy
Closures	To Be Or Not To Be	Easy
Closures	Counter II	Easy
Basic Array Transformations	Apply Transform Over Each Element in Array	Easy
Basic Array Transformations	Filter Elements from Array	Easy
Basic Array Transformations	Array Reduce Transformation	Easy
Function Transformations	Function Composition	Easy
Function Transformations	Return Length of Arguments Passed	Easy
Function Transformations	Allow One Function Call	Easy
Function Transformations	Memoize	Medium
Promises and Time	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
JSON	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
Classes	Calculator with Method Chaining	Easy

🧮 Data Structures and Algorithms

Category	Title	Difficulty
Array / String	Merge Sorted Array	Easy
Array / String	Remove Element	Easy
Array / String	Remove Duplicates from Sorted Array	Easy
Array / String	Remove Duplicates from Sorted Array II	Medium
Array / String	Majority Element	Easy
Array / String	Roman to Integer	Easy
Array / String	Length of Last Word	Easy
Array / String	Longest Common Prefix	Easy
Array / String	Find the Index of the First Occurrence in a String	Easy
Hashmap	Ransom Note	Easy
Hashmap	Isomorphic Strings	Easy
Hashmap	Valid Anagram	Easy
Hashmap	Group Anagrams	Medium
Hashmap	Two Sum	Easy
Hashmap	Happy Number	Easy
Hashmap	Contains Duplicate II	Easy
Stack	Valid Parentheses	Easy
Stack	Min Stack	Medium
Stack	Evaluate Reverse Polish Notation	Medium
Two Pointers	Valid Palindrome	Easy
Two Pointers	Is Subsequence	Easy
Two Pointers	Two Sum II - Input Array Is Sorted	Medium
Linked List	Linked List Cycle	Easy
Linked List	Add Two Numbers	Medium
Linked List	Merge Two Sorted Lists	Easy
Linked List	Remove Nth Node From End of List	Medium
Binary Tree General	Maximum Depth of Binary Tree	Easy
Binary Tree General	Same Tree	Easy
Binary Tree General	Invert Binary Tree	Easy
Intervals	Merge Intervals	Medium
Dynamic Programming	Climbing Stairs	Easy

React hooks

Title	Difficulty	Completed	Solution
UseTimeout	Easy	-	-
UseClickOutside	Medium	-	-
UseEffect	Hard	-	-
UseState	Hard	-	-

🎯 Use Cases

• 👨‍💼 Employers evaluating frontend developer skills through UI challenges.
• 👩‍💻 Frontend/JavaScript developers seeking practice with coding challenges.

🏃‍♂️ Getting Started

Let's say you want to work on the traffic light challenge.

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

🔧 First Time Setup

# Clone repository and setup CLI tool (only needed once)
git clone https://github.com/frontendwizards/frontend-challenges.git

cd frontend-challenges/challenge-cli

npm install

npm link

🚦 Start Working

# Navigate to the root of the repository
cd ..

# Create new project from template (run it at the root of the repository)
challenge-cli start "traffic-light"

# Navigate to project and start development
cd problems/traffic-light/solutions/my-solution

npm run dev

Note

The starter template includes React and necessary tooling to get you started quickly.

🔍 How to Review Your Solution

♿ Accessibility Testing with axe-core

The starter template comes with axe-core pre-integrated. 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)

🔄 Manual Testing

• ⌨️ Test your app with keyboard navigation (if applicable)
• 🔊 Add appropriate ARIA labels for screen reader compatibility

🤖 AI-Powered Review

You can use Claude for a final accessibility & quality check:

Review my code for accessibility and best practices:

- Point out critical issues that must be fixed (if any)
- Rate the overall implementation (e.g., production-ready, needs work, etc.)

Here's my code:
[Paste your code here]

🤝 How to Contribute

Before starting work on a pull request (PR), please create an issue to discuss your proposal.

• ⭐️ 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
• 📚 Add tutorials to explain official problem solutions

📋 TODOs:

• 🎯 Add more UI problems (you can check the non solved UI problems in the UI table)
• 🧠 Solve and add more React hooks problems
• ⚙️ Configure axe-core to ignore minor accessibility warnings (e.g., missing a level-one heading) in the reportAccessibility function
• 📸 Add a screenshot img of each problem in the README, could be automated?
• 🔄 Set up GitHub Actions for pull requests to:
  • ✅ Validate solutions can be built successfully
  • ♿ Accessibility check
• 🚀 Extend the CI/CD pipeline for the main branch too
• 📚 Add resources for learning key concepts related to the problem
• 🧪 Add Unit tests for challenge-cli

📢 How To Share Your Solution

Note

Share your solution only if you believe it's good and others can learn from it.

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

In short:

1. 🍴 Fork this repo and clone it
2. 🌿 Create a branch and make your change
3. ⬆️ Push your branch to your fork
4. 🤝 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 want to create a new problem called 'example-problem', use the create command:

challenge-cli create "example-problem"

cd problems/example-problem/solutions/react-ts

npm install

npm run dev

📐 Coding Standards

Please adhere to the following coding standards when submitting solutions:

• Follow the How to Review Your Solution guideline.
• 🎨 Format your code properly.

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.