← Back to Course Overview

Sprint Challenge

In this sprint challenge, you'll apply everything you've learned about DOM manipulation, event handling, component creation, and working with APIs to build a complete web application that fetches and displays data from an external API while providing an intuitive user interface.

Overview

You'll be building a data-driven web application that demonstrates your understanding of all the concepts covered in this sprint. The application will involve creating reusable components with JavaScript classes, handling user interactions with event listeners, and consuming data from an API using the fetch API.

Challenge Requirements

Core Requirements

  • Component Creation: Create reusable components using JavaScript classes that encapsulate DOM creation, styling, and behavior
  • Event Handling: Implement event listeners for user interactions such as clicks, form submissions, and filtering actions
  • API Integration: Fetch and display data from a provided API endpoint using the fetch API
  • Loading States: Handle loading states and display appropriate loading indicators during API requests
  • Error Handling: Implement robust error handling for network requests and display user-friendly error messages
  • DOM Manipulation: Use proper DOM manipulation techniques to add, remove, and update elements based on user actions and data changes

Stretch Requirements

  • Advanced Filtering: Implement client-side data filtering and sorting with multiple criteria
  • Animations: Add CSS transitions or animations for state changes and component rendering
  • Error Boundaries: Create an error boundary system that gracefully handles and reports component errors
  • Testing: Add unit tests for components and integration tests for API interactions
  • Local Storage: Implement data persistence using local storage to maintain state between sessions

Project Structure

Your project should have a clean, organized structure that separates concerns and follows best practices:

Project Setup

  1. Fork and clone the project repository
  2. Install dependencies using npm: npm install
  3. Start the development server: npm start
  4. Begin implementing the requirements following the provided guidelines in the README
  5. Test your application thoroughly in different browsers

Submission Guidelines

Grading Rubric

Important: Focus on completing the core requirements before attempting stretch goals. A working application that meets the basic requirements is better than a partially complete application with advanced features.

Challenge Resources