Frontend Challenges (WORK IN PROGRESS)

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
Traffic light	Easy	✅	✅	✅
Whack a Mole	Medium	✅	✅	✅
File Explorer	Medium	✅	✅	✅
Wordle Game	Hard	✅	✅	✅
Twitter like	Medium	✅	✅	✅
Twitter like II	Medium	-	-	-

Utility functions problems

Title	Difficulty	Completed	Tests	Reviewed

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.