Chill Gamer is a gaming review platform where users can explore, submit, and share reviews of their favorite games. With features such as a personalized watchlist, game rating, and dynamic theme toggle, the platform offers a rich and engaging experience. Chill Gamer allows gamers to get insights on the latest titles and interact with the gaming community through reviews.
https://chill-gamer-a10.netlify.app
- Frontend: React.js, React Router, Tailwind CSS
- Authentication: Firebase Authentication
- Backend: MongoDB, Express
- State Management: Local Forage
- Other Tools: React Icons, SweetAlert2, Swiper, React Toastify
- 🎮 Game Reviews – Explore detailed reviews and ratings of the latest games.
- 📝 User-Generated Reviews – Share your personal gaming experiences by submitting reviews.
- 📅 Watchlist – Add games to your personalized watchlist and track their updates.
- 🔄 Dynamic Theme Toggle – Switch seamlessly between light and dark modes.
- 📱 Mobile-Friendly – Fully responsive design for all devices (desktop, tablet, mobile).
- 🔒 Secure Authentication – Login, register, and manage your account securely with Firebase.
| Technology | Purpose |
|---|---|
| React | Frontend UI development |
| React Router | Routing and navigation |
| Tailwind CSS | Styling and responsiveness |
| Firebase | Authentication and user management |
| MongoDB | Database for storing reviews and user data |
| Express | Backend framework for API handling |
| Local Forage | Client-side storage for persistent user data |
| React Icons | Customizable icons for UI elements |
| React Toastify | Toast notifications for user feedback |
| SweetAlert2 | Pop-up alerts and notifications |
| Swiper | Carousel for displaying game-related content |
The project requires the following dependencies:
{
"dependencies": {
"@emotion/react": "^11.13.5",
"firebase": "^11.0.2",
"localforage": "^1.10.0",
"match-sorter": "^8.0.0",
"react": "^18.3.1",
"react-awesome-reveal": "^4.2.14",
"react-dom": "^18.3.1",
"react-hot-toast": "^2.4.1",
"react-icons": "^5.4.0",
"react-router-dom": "^7.0.2",
"react-simple-typewriter": "^5.0.1",
"react-toastify": "^10.0.6",
"react-tooltip": "^5.28.0",
"sort-by": "^1.2.0",
"sweetalert2": "^11.14.5",
"swiper": "^11.1.15"
},
"devDependencies": {
"@eslint/js": "^9.15.0",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"daisyui": "^4.12.14",
"eslint": "^9.15.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.14",
"globals": "^15.12.0",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.16",
"vite": "^6.0.1"
}
}To set up the project locally, follow these steps: But make sure you have setup environment keys. (.env)
# Clone the repository
git clone https://github.com/aburayhan-bpi/chill-gamer-client.git
# Navigate to the project directory
cd chill-gamer-client
# Install dependencies
npm install
# Start the development server
npm start dev
---