feat: add race start countdown animation with 3-2-1-Go sequence

[nitin-999-code]

Description

Implements cool race start animation with countdown as requested in #87

Features Added

• Reusable CountdownAnimation component with 3-2-1-Go sequence
• Visual effects: scaling, color changes, glow effects, animated particles
• Sound effects using Web Audio API
• Integration into both practice and race pages
• Timer starts only after countdown completes
• Responsive design for all screen sizes

Files Changed

• src/components/CountdownAnimation.js - Main countdown component
• src/utils/soundEffects.js - Sound utility
• src/pages/race.js - Race page integration
• src/pages/practice.js - Practice page integration
• src/firebase.js - Made Firebase optional for development
• src/context/AuthContext.js - Handle disabled Firebase gracefully

Testing

1. Navigate to /race or /practice page
2. Click "Start Race!" or "Start Practice!" button
3. Experience 3-2-1-Go countdown with visual and audio effects
4. Verify timer starts only after "GO!" appears

Closes #87

[vercel]

@nitin-999-code is attempting to deploy a commit to the ankit-raj-11's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Pull Request Overview

This PR adds a race start countdown animation with a 3-2-1-Go sequence for enhanced user experience. The countdown includes visual effects, sound effects, and prevents typing until the race begins.

• Implements a reusable countdown component with visual and audio effects
• Integrates countdown into both race and practice pages with proper state management
• Makes Firebase optional for development environments to improve developer experience

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/utils/soundEffects.js	New utility for Web Audio API-based countdown sound effects
src/components/CountdownAnimation.js	New countdown component with visual animations and particle effects
src/pages/race.js	Integrates countdown into race page with state management updates
src/pages/practice.js	Integrates countdown into practice page with state management updates
src/firebase.js	Makes Firebase configuration optional for development
src/context/AuthContext.js	Handles graceful fallback when Firebase is disabled

Comments suppressed due to low confidence (1)

src/pages/race.js:1

• The dependency array includes onComplete but this variable is not defined in the component scope. This should likely be removed from the dependencies or the variable should be defined.

import { useState, useEffect, useRef } from "react";

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Using exponentialRampToValueAtTime with 0.01 can cause issues in some browsers as the value approaches zero. Consider using linearRampToValueAtTime or a minimum value like 0.001 instead.

[Copilot]

Using exponentialRampToValueAtTime with 0.01 can cause issues in some browsers as the value approaches zero. Consider using linearRampToValueAtTime or a minimum value like 0.001 instead.

[nitin-999-code]

can you please review my PR
if there is any issue you can tell me

[Ankit-raj-11]

can you please review my PR if there is any issue you can tell me

share the screenshots or video.

[nitin-999-code]

Screen.Recording.2025-10-13.at.9.08.31.PM.mov

[Ankit-raj-11]

Make the transitions look like scale up the fade before moving to next sequencies, and I the animation should auto when user enter "/race" page, and one more additional request make sure the countdown will auto start when animation ends.