← Back to Course Overview

Sprint Challenge - Web Unit 2 Sprint 6

Sprint Challenge Overview

In this sprint challenge, you will demonstrate your mastery of React components, state management, side effects, and styling by building a complete web application.

The challenge is designed to test your understanding of core React concepts and your ability to implement them in a real-world application. You'll have the opportunity to demonstrate your skills with component composition, state management with hooks, handling side effects, and implementing modern styling techniques.

Challenge Requirements

Core Requirements

  • Create a React application that implements routing using React Router
    • Set up multiple routes with different components
    • Implement navigation between routes
    • Use route parameters to display dynamic content
  • Implement form management using Formik and Yup validation
    • Create forms with proper validation schemas
    • Handle form submission and errors
    • Display validation messages to users
  • Use the useEffect hook for side effects and data fetching
    • Fetch data from an API and display it
    • Implement proper loading and error states
    • Clean up side effects when components unmount
  • Style your components using styled-components
    • Create and use styled components
    • Implement responsive design
    • Use props to create dynamic styling
  • Write unit tests for your components using Jest and React Testing Library
    • Test component rendering
    • Test user interactions
    • Test asynchronous operations

Stretch Goals

  • Implement advanced form features like multi-step forms or dynamic form fields
    • Create a wizard-style form with multiple steps
    • Implement form fields that appear/disappear based on other inputs
  • Add animations using styled-components
    • Create transition animations between routes
    • Add loading animations and micro-interactions
  • Implement error boundaries and loading states
    • Create error boundary components to catch errors
    • Implement fallback UI for error states
  • Add end-to-end tests using Cypress
    • Test the complete user flow through your application
    • Test form submission and validation

Preparation Tips

How to Prepare

  • Review the core concepts: Make sure you understand React components, hooks (useState, useEffect), props, and component lifecycle
  • Practice with the tools: Get comfortable with React Router, Formik, Yup, and styled-components before the challenge
  • Study the module projects: The guided projects from the modules contain many of the patterns you'll need for the challenge
  • Review testing fundamentals: Understand how to write tests with Jest and React Testing Library
  • Build small practice apps: Try building simple applications that use the required technologies

Common Pitfalls to Avoid

  • Not planning before coding: Take time to plan your component structure and state management
  • Overcomplicating state management: Keep state as simple and local as possible
  • Ignoring cleanup in useEffect: Remember to clean up side effects to prevent memory leaks
  • Styling as an afterthought: Plan your styling strategy from the beginning
  • Writing tests last: Consider writing tests alongside or even before your components (TDD approach)

Pre-Challenge Checklist

  • I can create and compose React components
  • I understand how to use hooks like useState and useEffect
  • I can set up React Router and create routes
  • I can manage forms with Formik and validate with Yup
  • I can fetch data from APIs and handle loading/error states
  • I can style components using styled-components
  • I know how to write basic tests for React components
  • I have reviewed the sprint study guide and module materials

Project Setup

Follow these steps to set up your sprint challenge project:

  1. Fork and clone the project repository: This gives you your own copy to work with
  2. Install the required dependencies: Run npm install to set up all the required packages
  3. Start the development server: Run npm start to launch the application
  4. Complete the requirements in the README.md file: This will guide you through all the tasks

Project Resources

Submission Guidelines

Requirements

  • All core requirements must be completed
  • Code must be clean and well-organized
  • Include a README with setup instructions and features implemented
  • All tests must pass

Grading Rubric

  • Routing Implementation (20%)
  • Form Management (20%)
  • Side Effects and Data Fetching (20%)
  • Styling and UI/UX (20%)
  • Testing (20%)

Submission Process

  1. Commit and push your changes to your forked repository
  2. Create a pull request against the original repository
  3. Submit the link to your pull request in the submission form
  4. Complete the reflection questions in the submission form

Additional Resources