File Tree Challenge

Problem Description

Create a file tree component that displays a hierarchical file structure. The component should allow users to expand and collapse folders to navigate through the file system. Files and folders should be displayed in a structured manner, with folders being expandable to show their contents.

Requirements

• The file tree should display a hierarchical structure of files and folders.
• Each folder should be collapsible, allowing users to expand or collapse its contents.
• The tree should sort files and folders alphabetically within each directory.
• Files and folders should be styled to indicate their level of nesting.
• The file tree component should be able to handle any depth of nesting.
• Ensure the component is accessible, with appropriate ARIA roles and properties.
• Style the component to make it visually clear which items are files and which are folders. Use padding to indicate nesting levels.

Example

Here's an example of the file tree data structure:

Getting Started

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

First Time Setup

Start Working

Solution

To view the reference solution:

How to Review Your Solution

• axe-core is pre-integrated in the starter template. 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)

• Test your app with keyboard to ensure full keyboard navigation (if applicable)

• Add ARIA labels to make your app understandable by screen readers

• Use Claude for a final accessibility & quality check.

  Example Prompt for Claude:

  Then paste your code..

How to Share Your Solution

If you used the CLI tool

1. Fork the frontend-challenges repository
2. Add your fork as a new remote to your existing solution:

3. Open a pull request (PR) from your fork to the main repository.

If you started from scratch

1. Fork the frontend-challenges repository and clone it
2. Navigate to the solution directory:

3. Add your solution files in this directory
4. Push your changes to your fork
5. Open a pull request (PR) to contribute your solution

Need help?

• Follow this guide to making a pull request to an open-source project
• OR, create an issue at frontend-challenges