GameXplorer is a comprehensive web application that enables users to explore video games, view detailed information, and manage their favorite games. The project integrates Angular for the frontend and Django for the backend to provide a seamless user experience and efficient data management.
- Game Search: Search for games by name and retrieve detailed information, including release year, genres, platforms, rating, and screenshots.
- Favorites Management: Add and manage your favorite games in a personalized list.
- Dynamic Display: Dynamically display game details using an image slider and visually engaging elements.
- Login & Signup: Secure user authentication with the ability to save user-specific preferences and data.
- Responsive Design: Optimized for both desktop and mobile viewing.
- Angular: Used for building a dynamic and responsive user interface.
- TypeScript: Ensures type safety and scalability in the frontend logic.
- HTML5 & CSS3: For structuring and styling components.
- Angular Router: Manages routing between different pages (e.g., Login, Home, Game Details).
- Django: Provides a robust framework for managing API endpoints and database interactions.
- Django REST Framework (DRF): Used for creating RESTful APIs.
- SQLite: The default lightweight database for development.
- RAWG.io: Game information and data sourced from the RAWG.io API.
- Node.js and npm (for Angular)
- Python 3.x and pip (for Django)
- Git
- Navigate to the
frontend
folder:cd frontend
- Install dependencies:
npm install
- Add your API Key
Location - frontend/src/environments/environment.ts
- Run the Angular application:
The application will be available at
ng serve
http://localhost:4200
.
- Navigate to the
backend
folder:cd backend
- Install dependencies:
pip install django djangorestframework pip install django-cors-headers
- Apply migrations and run the server:
The server will be available at
python manage.py migrate python manage.py runserver
http://127.0.0.1:8000
.
- The frontend communicates with the backend to fetch game data via API calls.
- Implemented dynamic rendering of game cards using Angular templates.
- The backend handles user login and signup securely.
- User data is passed between components using Angular services and state management.
- The application allows users to add games to their favorites list.
- Data is stored in the backend and retrieved on user-specific requests.
- A custom Angular component displays game screenshots in a slider.
- The slider updates every few seconds for an engaging user experience.
frontend/
├── src/
│ ├── app/
│ │ ├── components/ # Angular components (e.g., login, game details)
│ │ ├── services/ # Angular services for API calls
│ │ └── models/ # TypeScript models for data structures
│ ├── environments/ # API keys and environment configurations
│ └── assets/ # Images and static assets
backend/
├── api/
│ ├── models.py # Django models for games and users
│ ├── serializers.py # Django REST Framework serializers
│ ├── views.py # API endpoint logic
│ └── urls.py # API routing
├── settings.py # Django project settings
├── manage.py # Django management commands
Contributions are welcome! To contribute:
- Fork the repository.
- Create a new branch for your feature or bug fix:
git checkout -b feature-name
- Commit your changes and push to your fork.
- Submit a pull request.
This project is open-source and available under the MIT License.
- Add social media login options.
- Integrate a recommendation system for suggesting similar games.
- Implement game reviews and ratings from users.