🏀 Sports Sphere - Your Ultimate Sports Equipment Store ⚽

📌 Project Overview

Sports Sphere is a dynamic, interactive, and responsive sports equipment store built with React, Firebase, and MongoDB. It offers a seamless shopping experience with features like real-time balance updates, theme toggle, interactive UI, and live product updates.

🚀 Live Project Link

Visit Sports Sphere: Sports Sphere

📸 Screenshot

🛠 Technologies Used

• Frontend: React, Tailwind CSS
• Backend: Firebase, Node.js, Express.js, MongoDB
• State Management: LocalForage
• Date Handling: date-fns
• Animations: Lottie, React Awesome Reveal
• Routing: React Router
• UI Enhancements: SweetAlert2, React Toastify, Swiper

✨ Core Features

✅ Dynamic Display: Real-time updates for an engaging shopping experience.
✅ Theme Toggle: Light and dark mode support for better UI customization.
✅ Real-Time Balance: Instantly updates user balance when purchases are made.
✅ Responsive Design: Fully optimized for mobile, tablet, and desktop views.
✅ Smooth Interactions: Fast and fluid transitions with animations and hover effects.
✅ Category Showcase: Browse sports equipment by categories like football, basketball, and more.
✅ Dark Mode Support: Easily switch between light and dark modes for eye comfort.
✅ Live Updates: Automatic updates for new product arrivals and inventory changes.
✅ Interactive Cards: Hover effects and engaging UI components for an enhanced user experience.

📦 Dependencies Used

{
  "date-fns": "^4.1.0",
  "firebase": "^11.0.2",
  "localforage": "^1.10.0",
  "lottie-react": "^2.4.0",
  "match-sorter": "^8.0.0",
  "react": "^18.3.1",
  "react-awesome-reveal": "^4.2.14",
  "react-datepicker": "^7.5.0",
  "react-dom": "^18.3.1",
  "react-fast-marquee": "^1.6.5",
  "react-helmet-async": "^2.0.5",
  "react-icons": "^5.4.0",
  "react-router-dom": "^7.0.2",
  "react-simple-star-rating": "^5.1.7",
  "react-stars": "^2.2.5",
  "react-toastify": "^10.0.6",
  "react-tooltip": "^5.28.0",
  "sort-by": "^1.2.0",
  "sweetalert2": "^11.14.5",
  "swiper": "^11.1.15"
}

🛠️ How to Run Locally

1. Clone the repository:

   git clone https://github.com/your-username/Sports-Sphere-Front-End.git

2. Navigate to the project folder:

   cd Sports-Sphere-Front-End

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Run the project locally: npm run dev

6. Open the project in your browser: http://localhost:3000``` (or as indicated in the terminal)

📚 Additional Resources

• API Documentation: [Coming Soon]
• Project Report: [Coming Soon]
• **Live Demo:**https://sports-equipment-store-2ec4b.web.app/

---

Feel free to contribute or raise an issue for any suggestions! 😊