Frontend Challenges

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

Each UI challenge has:

• Requirements
• Solution in React with TypeScript.
• Live demo

Table of Contents

• Frontend Challenges
  • 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
File Tree	Medium	✅	✅	✅	Solution
Twitter like	Medium	✅	✅	✅	Solution
Twitter like II	Medium	-	-	-	Solution
Whack a Mole	Medium	✅	✅	✅	Solution
Wordle Game	Hard	✅	✅	✅	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

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/elfajriharsuda/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 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:

challenge-cli create new-problem

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.