Chill Gamer is a user-friendly game review platform where users can explore, add, and manage game reviews. The platform provides detailed insights into games, allowing users to share their opinions, rate games, and manage their personalized game watchlists. With a clean and responsive UI, the platform offers a seamless and immersive experience, embodying the “chill” theme.
Live Demo
[Live Server][https://chill-gamer-server-sandy.vercel.app/]
- Game Reviews: Explore reviews with ratings, genres, and detailed descriptions.
- Authentication: Secure user login and registration with email/password and Google login.
- Protected Routes: Private sections for authenticated users, like adding or managing reviews.
- Game Watchlist: Authenticated users can add games to a personal watchlist for easy access.
- Add, Update, Delete Reviews: Authenticated users can add game reviews, update their own reviews, and delete them. They cannot access or modify reviews added by others.
- Sorting and Filtering: Dynamically sort and filter reviews based on rating, year, or genre for efficient browsing.
- Dynamic Title Updates: Dynamically change the website's title based on the current page or action for better navigation.
- Persisted State: By storing the user's previous browsing state, the application automatically redirects users to their desired state after logging in, providing a seamless experience.
- Error Handling: Handles all types of errors effectively, including invalid inputs and unauthorized access, tested through unit testing of all features.
- Dark/Light Mode: Toggle between dark and light themes for user convenience.
- Error Page: A custom 404 page for invalid routes.
- Loading Spinner: Indicates loading states for a better user experience.
- Responsive Design: Fully optimized for mobile, tablet, and desktop views using modern CSS frameworks like Tailwind CSS and DaisyUI.
- Dynamic Components:
- Carousel: A visually engaging banner slider with seamless transitions.
- Highest-Rated Games Section: Displays top-rated games dynamically fetched from MongoDB.
- User-Friendly Forms: Simplified forms for adding, updating, and managing reviews.
- Interactive Animations:
- Integrated with Lottie React for engaging, interactive visuals.
- Used React Simple Typewriter for dynamic text effects.
- Incorporated React Awesome Reveal for smooth animations.
- Dark/Light Theme Toggle: Allows users to switch themes, enhancing accessibility and personal preferences.
- Notifications:
- Integrated Toast and SweetAlert for success, error, and confirmation messages.
- Custom, visually appealing alerts for actions like review deletion and account creation.
- Protected Routes: Ensures secure navigation by restricting access to private routes based on authentication.
- Sorting and Filtering:
- Dropdowns and dynamic components to filter reviews by genres and sort by rating or release year.
- Dynamic Title Updates: Updates the website title dynamically based on the current page or action for enhanced navigation clarity.
- Persisted State: Maintains the user's browsing state across sessions, redirecting them to their desired location after login.
- Error Handling: User-friendly error messages and alerts ensure smooth interactions, even in unexpected scenarios.
- 404 Page: A custom "Not Found" page for invalid routes, maintaining consistency in user experience.
- Loading Spinner: Intuitive spinners indicate data fetching and processing states.
-
RESTful API: Designed a robust API with endpoints for:
- User Authentication: Handles user registration, login, and token-based authorization.
- Review Management: Create, read, update, and delete operations for game reviews.
- Watchlist Management: Add and retrieve user-specific watchlist items securely.
-
Token-Based Authentication: Implements JWT (JSON Web Token) to verify and manage user sessions, ensuring secure access to protected routes.
-
Role-Based Data Access: Ensures users can only manage their reviews and watchlist, safeguarding data integrity.
-
Error Handling: Comprehensive error handling for:
- Invalid inputs or missing data.
- Unauthorized access or token issues.
- Database operation failures with descriptive error messages.
-
Data Validation:
- Validates input data for consistency and security using libraries like Joi.
- Ensures fields like email, password, ratings, and genres meet the required standards.
-
Clean and Modular Code:
- Follows the MVC (Model-View-Controller) architecture for organized, maintainable code.
- Uses middleware for reusable logic, like authentication checks and error handling.
-
Database Operations:
- Efficient CRUD operations with MongoDB and Mongoose ORM.
- Optimized queries for fetching highest-rated games and sorting/filtering.
-
Environment Variables: Sensitive credentials (e.g., Firebase, MongoDB) are securely stored using dotenv.
-
Dynamic Routing: Implements routes for all API functionalities with clean and scalable design.
-
Error Logging: Logs errors with stack traces for debugging and monitoring purposes.
-
Scalability:
- Prepared for scaling with optimized queries and modular architecture.
- Supports future additions like advanced sorting, filtering, or notification triggers.
-
Testing: Comprehensive unit testing ensures every endpoint functions as intended and handles edge cases effectively.
Here’s the full Tech Stack & Tools section, incorporating all relevant frontend and backend technologies, packages, and tools used in the project.
- Dynamic Title Updates: Updates the webpage title dynamically based on the current page.
- State Management: Maintains user-specific session data and restores the state for user convenience.
- Error Handling: Comprehensive error validation and clean error responses for all interactions.
- Unit Testing: Ensures all components and APIs work seamlessly across edge cases and normal workflows.
- Node.js and npm installed
- MongoDB configured locally or through an online service
- Clone the repositories:
- Client-Side:
[https://github.com/DKAbir111/Chill-gamer-client.git] - Server-Side:
[https://github.com/DKAbir111/Chill-gamer-server.git]
- Client-Side:
- Navigate to each project directory and install dependencies:
npm install
- Create an
.envfile in the server folder with the following keys:- Firebase Config Keys
- MongoDB URI
- JWT Secret
- Run the backend server:
npm start
- Run the client-side:
npm run dev
- Open the application in your browser at the provided local URL.
- Intuitive design for a seamless user experience.
- Advanced features like sorting, filtering, and user watchlists.
- Secure and scalable backend.
- Deployed using modern platforms for reliability and speed.