Developed by: Ayan Sujon
🌐 Live Site: https://gamehub-ayan.netlify.app/
💻 GitHub Repository: GameHub Repo
GameHub is a modern and interactive online game library that allows users to discover, explore, and support game developers.
Gamers can browse popular and indie games, view detailed information, rate their favorites, and manage personal profiles — all within a sleek, responsive, and animated interface.
The platform is built with React, Firebase, TailwindCSS, and DaisyUI, ensuring excellent performance, security, and scalability.
GameHub is designed to create a bridge between gamers and developers — offering a user-friendly and feature-rich environment to explore, manage, and enjoy game content.
It focuses on interactivity, design consistency, and smooth navigation through React Router and Firebase Authentication.
⚡ Highlighted Project Features
- 🔒 Private Routes: Secure access for Profile and Game Details pages.
- ⭐ Dynamic Rating System: Ratings dynamically render using React Icons.
- 🧠 Dynamic Page Titles: Page titles update automatically based on routes.
- 👤 Profile Management: Users can update their name and profile picture.
- 🧭 Navigation Bar: Smooth and responsive routing using React Router.
- 📝 Login & Registration: Fully functional with Firebase Authentication.
- ✉️ Newsletter Section: Users can subscribe for updates.
- 📨 Contact API Integration: Contact form connected with API endpoint.
- 🔔 React Toastify: Provides instant feedback for actions and errors.
- 🔐 Password Validation: Ensures secure password standards.
- ⚙️ Environment Variables: Used for Firebase and sensitive configurations.
| Page Name | Description |
|---|---|
| Home | Displays featured and trending games |
| Games | Shows all available games in grid view |
| Game Details | Individual game information page |
| About Us | Overview of GameHub and its purpose |
| Contact | Contact form integrated with API |
| Profile | User profile dashboard |
| Edit Profile | Update name and avatar |
| Login | User login with Firebase Auth |
| Registration | Create a new account |
| Error404 | Shown for invalid routes |
| GameNotFound | Shown when a game doesn’t exist |
| Loading | Animated loading state |
- Layout System: 3-column and 4-column grid layouts.
- Responsive Design For:
- 📱 Mobile Devices
- 💻 Tablets
- 🖥️ Desktops
Crafted using TailwindCSS and DaisyUI for an adaptive and elegant user interface.
| Category | Tools / Libraries |
|---|---|
| Frontend Framework | React (with Vite) |
| Language | JavaScript (ES6+) |
| Styling | TailwindCSS, DaisyUI |
| Routing | React Router |
| Authentication | Firebase |
| Animations | GSAP (GreenSock Animation Platform) |
| Notifications | React Toastify |
| API Requests | Axios |
| Icons | React Icons |
| Linting | ESLint |
| Build Tool | Vite |
"@tailwindcss/vite": "^4.1.15", "axios": "^1.12.2", "firebase": "^12.4.0", "gsap": "^3.13.0", "react": "^19.1.1", "react-dom": "^19.1.1", "react-icons": "^5.5.0", "react-router": "^7.9.4", "react-toastify": "^11.0.5", "tailwindcss": "^4.1.15"
"@eslint/js": "^9.36.0", "@types/react": "^19.1.16", "@types/react-dom": "^19.1.9", "@vitejs/plugin-react": "^5.0.4", "daisyui": "^5.3.7", "eslint": "^9.36.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.22", "globals": "^16.4.0", "vite": "^7.1.7"
DOcuments: Google Docs
......
60 Marks Deadline Till 21 October 2025 to 25 October 2025 at 11.59 PM
......
......
......
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.