Senior Frontend Interview Challenge

Overview

Welcome to the Barstool Senior Frontend Developer Interview Challenge! This challenge will focus on the bread and butter of web development: web forms. The goal is to create a form with at least 4 different field types, and implement form validation. You will have the opportunity to demonstrate how you approach building React components, organizing your project, and structuring form elements.

Feel free to use any libraries or tools you prefer—just be prepared to explain your choices. This challenge is intentionally open-ended to allow you to demonstrate how you set up applications as well as express your knowledge and creativity. Take it in any direction you would like.

Requirements

1. Create a Form. The form should contain at least 4 different field types. Example field types could include (but are not limited to):

   • Text input (e.g., for a name)
   • Email input
   • Dropdown select
   • Checkbox or radio button
   • Date picker

2. Form Validation

   • Each field must have appropriate validation.
   • Provide visual feedback for validation (e.g., showing errors or success messages).

3. React Components

   • Use React to build your components.
   • The form should be built in a modular way, with clear component separation and reusable logic.

4. Styling

   • Style the form to be visually appealing.
   • You can use CSS, CSS-in-JS, or any styling library (e.g., Tailwind, Styled Components, etc.).
   • Ensure that the form is responsive.

5. Project Structure

   • Structure your project in a clean and scalable way.
   • Be mindful of how you organize your components, hooks, and utilities.

Evaluation Criteria

• Code Quality & Best Practices: We’ll evaluate how you structure your React components and the overall cleanliness of your code. This challenge is your opportunity to show us how you would structure a production-ready application on a smaller scale.
• Form Handling & Validation: Proper form validation is crucial. We’ll look at how you handle different validation cases and edge cases.
• User Experience: The form should be easy to use and visually intuitive.
• Styling: We’ll assess how well you manage the form’s appearance and responsiveness.
• Explanations of Choices: Be ready to explain the reasoning behind your choices of libraries, patterns, and architecture.

How to Submit

1. Fork this repository or create a new repository on your GitHub account.
2. Build the form based on the above requirements.
3. Include any setup instructions if necessary.
4. Submit the link to your repository.

Good luck, and we're looking forward to seeing how you tackle this challenge!