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)
🎨 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 |
| File Tree | Medium | ✅ | ✅ | Solution |
| Twitter like | Medium | ✅ | ✅ | Solution |
| Twitter like II | Medium | - | - | Solution |
| Whack a Mole | Medium | ✅ | ✅ | Solution |
| Wordle Game | Hard | ✅ | ✅ | Solution |
| Memory Game I | Hard | - | - | - |
| Memory Game II | Hard | - | - | - |
| Simple Endless Runner | Hard | - | - | - |
⚙️ 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
- 👨💼 Employers evaluating frontend developer skills
- 👩💻 Frontend/JavaScript developers seeking practice with coding challenges
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.
# 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# 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 devNote
The starter template includes React and necessary tooling to get you started quickly.
The starter template comes with axe-core pre-integrated. To use it:
- 🔍 Open your browser's Developer Tools (F12)
- 📝 Check the Console tab while using your app
- 🛠️ Review and fix accessibility errors that appear (ignore minor errors)
- ⌨️ Test your app with keyboard navigation (if applicable)
- 🔊 Add appropriate ARIA labels for screen reader compatibility
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]
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
- 🎯 Add more UI problems (you can check the non solved UI problems in the UI table)
- ⚙️ 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
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:
- 🍴 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
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 devPlease adhere to the following coding standards when submitting solutions:
- Follow the How to Review Your Solution guideline.
- 🎨 Format your code properly.
This project is licensed under the MIT License - see the LICENSE file for details.