GameHub is an immersive and engaging online library designed for discovering and supporting game developers. Built with a vibrant, urban-themed UI, this single-page application offers a dynamic user experience with advanced animations and interactive elements.
- 🚀 Modern Gaming UI: A visually stunning interface powered by the
synthwavetheme from DaisyUI, custom cursors, and animated backgrounds. - 🔐 Secure User Authentication: Robust email/password and Google sign-in functionality powered by Firebase Authentication.
- 🛡️ Protected Routes: Critical pages like Game Details and User Profile are accessible only to logged-in users.
- 🎮 Interactive Game Library:
- Homepage Carousel: A dynamic, auto-playing, infinite-loop carousel for popular games, built with Swiper.js.
- All Games Page: A comprehensive library of all games with real-time search and category-based filtering.
- 💥 Advanced Animations & Effects:
- GSAP & Framer Motion: High-performance entry and scroll-triggered animations for a lively feel.
- 3D Tilt Effect: Interactive 3D tilt effect on game cards using
react-tilt. - Particle Background: A lightweight, animated particle background created with
react-tsparticles.
- 🔊 Immersive Experience:
- Custom Cursors: Unique gaming-themed cursors for navigation and interaction.
- Sound Effects: Interactive sound effects on button clicks and hovers for better user feedback.
- 👤 User Profile Management:
- View and update user profile information (name and photo URL).
- Secure password reset functionality via email.
- 💯 Fully Responsive: A seamless experience across mobile, tablet, and desktop devices.
- ⚙️ Dynamic Functionality:
- Dynamic page titles for better SEO and user experience.
- Fallback avatars for users without a profile picture.
- A custom 404 page that matches the website's theme.
| Category | Technology / Package |
|---|---|
| Core | React, Vite |
| Routing | react-router-dom |
| Styling | Tailwind CSS, DaisyUI |
| Backend | Firebase (Authentication, Firestore) |
| Animation | Framer Motion, GSAP, react-tilt, react-tsparticles |
| Interactivity | use-sound |
| UI/UX | react-icons, react-hot-toast |
| Carousel | Swiper.js |
| Utilities | react-helmet-async, prop-types |