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 | - | - | - |
| CountDown | Easy | - | - | - |
| Simple Form I (without accessibility) | Easy | - | - | - |
| Rating Stars | Easy | - | - | - |
| 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 |
⚙️ 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 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 beginner-friendly 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
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:
- ♿ Ensure your app is accessible and follows best practices
- 🎨 Format your code
This project is licensed under the MIT License - see the LICENSE file for details.