A lightweight React app that displays currently available free games and loot from the GamerPower API. It fetches and displays giveaways across platforms like Steam, Epic Games Store, and Android.
-
Frontend:
- React.js
- TypeScript
- Vite
- Less Modules
-
API:
The key components are simple, modular, and reusable:
- FreeGamesPage Loads and displays all available giveaways. Handles loading and error states.
- Card Displays an individual giveaway with an image, title, platform info, and a link to claim the game.
- fetchGiveaways Fetches giveaway data from the API using correct headers and error handling.
Follow these steps to run the project locally:
git clone https://github.com/Friftycode/game-giveaway-overview.git
cd free-games
npm install
Create a .env file in the root of the project and add your RapidAPI key:
VITE_RAPIDAPI_KEY=your_rapidapi_key
npm run dev
Go to http://localhost:5173
- Viewing Giveaways The app automatically fetches and displays all available free game giveaways.
- Claiming Games Click the "CLAIM NOW" button to open the giveaway page in a new tab.
-
Project Setup
- Created using
npm create vite@latestwith React + TypeScript. - Environment variables configured for API authentication.
- Created using
-
Basic Layout & Functionality
- Built
FreeGamesPageto fetch and display data. - Created
Cardcomponent for each game.
- Built
-
Styling & UX
- Styled with Less Modules for scoped and maintainable styles.
- Loading state and error handling implemented.
-
Finishing Touches
- Cleaned up code, added alt text for accessibility.
- Wrote documentation for future reference.