Gamely 🎮

A modern, responsive game browser built with React and the RAWG API. Browse games by genre, platform, or popularity, and view game info with ease.

🔗 Live Demo

Table of Contents 📑

• Features
• Screenshots
• Built With
• Setup
• Security
• Contributing
• License

Features ✨

• 🎮 Browse games by genre, platform, and search.
• 📊 Order games by relevance, popularity, release date, and more.
• 🔍 Infinite scrolling for seamless game discovery.
• 📝 Detailed view for each game to display additional information.
• 📱 Mobile-friendly, responsive design with dark mode support.
• ⏳ Dynamic skeleton loading for an improved user experience.
• 🛡️ Optional proxy server with Redis caching to secure your RAWG API key and prevent exposure in client-side code.

Screenshots 📸

Browse games by genre, platform, relevance, or search.

View extra information about each game.

Built With 📦

• React: A JavaScript library for building user interfaces.
• Chakra-UI: A modern React UI framework for building accessible and responsive components.
• React Query: For efficient data fetching, and caching.
• React Router: For handling client-side routing and navigation.
• React Icons: A library of popular icons for React applications.
• Axios: A promise-based HTTP client for making API requests.
• Zustand: A lightweight state management library for managing global client state. Used with game filtering.
• React Infinite Scroll Component: For implementing infinite scrolling functionality.
• ms: A utility for simple time calculations and formatting.

Setup 🛠️

Follow these steps to set up the project locally:

1. Clone the Repository 🖥️

git clone https://github.com/Coookei/Gamely.git
cd Gamely

2. Install Dependencies 📦

Ensure that Node.js is installed. Then run:

npm install

3. Get an API Key 🔑

Create a free account and get an API key from RAWG API.

4. Add Environment Variables ⚙️

Create a .env file in the root directory and add the following variables:

VITE_API_URL=https://api.rawg.io/api/
VITE_API_KEY=your_api_key_here

Note: See the Security section below for details on protecting your API key.

5. Start the server 🚀

Run the following command to start the app:

npm run dev

The app will be available at the URL shown in the console, normally http://localhost:5173 on localhost.

Security 🔒

Since Gamely is a front-end client app, any embedded API key will be visible in the browser’s network tab. To protect your RAWG API key, it's strongly recommended to use a proxy server that forwards requests and keeps your key secure.

You can use Gamely Proxy built with TypeScript, Express, and Node.js: Gamely-Proxy.

Using a Proxy

When running your own proxy server, only one environment variable is needed:

VITE_API_URL=https://your-proxy-url.com/

If you're hosting Gamely on Vercel, you can configure a clean URL by amending the rewrite rule in your vercel.json file:

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://your-proxy-url.com/:path*"
    }
  ]
}

Then you can simplify your environment variable:

VITE_API_URL=/api/

Your proxy will now be accessible at https://your-gamely-url.com/api

Contributing 🤝

Contributions, suggestions, and feedback are welcome!
Feel free to fork the repo and submit a pull request.

1. Fork the project
2. Create a new branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add new feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request

License 📜

This project is licensed under the MIT License.