A React + Redux web application for browsing video games and organizing them into personal lists (Playing, Completed, Backlog, Wishlist). Built as a frontend-only project using MockAPI as the backend.
Game Library Browser is a single-page web application that allows users to:
- Explore a pre-filled catalog of video games
- Search, filter, and sort games by various criteria
- Organize games into four personal lists
- Add personal notes and ratings to tracked games
- Optionally contribute new games to the catalog
- Perform full CRUD (Create, Read, Update, Delete) operations on their game lists
This website is designed for gamers who want a personal tool to organize, track, and discover video games — think of it as a "Goodreads for games" or a personal Letterboxd for gaming.
Ideal users include:
- 🎮 Gamers with libraries across Steam, PlayStation, Xbox, or Switch
- 📚 Game collectors who own many games and need to track them
- 🎯 Backlog strugglers who buy games faster than they finish them
- 🔍 Game discoverers looking for new games by genre, platform, or rating
Example user persona:
Alex, 24 — plays games 10+ hours a week, owns 150+ games across multiple platforms. Uses Game Library Browser to track which games are finished, which are in progress, and what to play next.
The website uses a hybrid catalog approach:
- 📦 Pre-filled catalog — The site comes pre-loaded with ~30–50 games in MockAPI, so users see a populated catalog right away.
- ➕ User contributions (optional) — Users can add new games to the catalog if they don't find what they're looking for.
- 📋 Personal lists — Users primarily interact with the site by adding games to their own four lists: Playing, Completed, Backlog, Wishlist.
- ⭐ Personal data — Each list entry can have personal notes and a personal rating, separate from the catalog rating.
This keeps the experience realistic (like Steam or Metacritic) while still demonstrating full CRUD operations.
- 🔍 Browse & Search — Explore the full game catalog with real-time search
- 🎯 Filter & Sort — Filter by genre, platform, release year, and rating
- 📋 Four Personal Lists — Playing, Completed, Backlog, Wishlist
- ⭐ Personal Ratings & Notes — Add your own score and notes for each game
- 🔄 Move Between Lists — Easily change a game's status
- ➕ Add New Games (Optional) — Contribute new games to the catalog
- ✏️ Edit & Delete — Full control over your personal list entries
| Category | Technology |
|---|---|
| Frontend Framework | React (TypeScript) |
| State Management | Redux Toolkit |
| Routing | React Router |
| HTTP Client | Axios |
| Mock Backend | MockAPI |
| Styling | CSS Modules |
game-library-browser/
├── public/
│ └── index.html
├── src/
│ ├── api/
│ │ └── mockApi.ts # Axios instances & API helpers
│ ├── app/
│ │ └── store.ts # Redux store configuration
│ ├── features/
│ │ ├── games/
│ │ │ ├── gamesSlice.ts
│ │ │ ├── gamesAPI.ts
│ │ │ ├── GameDetailPage.tsx
│ │ │ └── AddGamePage.tsx
│ │ ├── lists/
│ │ │ ├── listsSlice.ts
│ │ │ ├── listsAPI.ts
│ │ │ └── ListPage.tsx
│ │ ├── filters/
│ │ │ └── filtersSlice.ts
│ │ └── ui/
│ │ └── uiSlice.ts
│ ├── components/
│ │ ├── Navbar/
│ │ ├── GameCard/
│ │ ├── GameGrid/
│ │ ├── FilterBar/
│ │ ├── ListEntryCard/
│ │ ├── Modal/
│ │ └── Toast/
│ ├── pages/
│ │ ├── HomePage.tsx
│ ├── routes/
│ │ └── AppRoutes.tsx
│ ├── App.tsx
│ └── main.tsx
├── .env
├── .gitignore
├── package.json
├── REQUIREMENT.md
└── README.md
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/your-username/game-library-browser.git cd game-library-browser -
Install dependencies
npm install
-
Set up MockAPI
- Sign up at mockapi.io
- Create a new project
- Create two resources:
gamesandlists - Copy your project's base URL
-
Configure environment variables
Create a
.envfile in the root directory:VITE_GAME_API_URL=https://YOUR_MOCKAPI_PROJECT_ID.mockapi.io VITE_USER_API_URL=https://YOUR_MOCKAPI_PROJECT_ID.mockapi.io
-
Run the development server
npm run dev
Open http://localhost:5173 in your browser.
| Field | Type | Description |
|---|---|---|
| id | String | Auto-generated |
| id | Number | Steam App ID |
| name | String | Game title |
| genre | Array | Array of genres |
| platforms | Array | Array of platforms |
| releaseYear | Number | Year of release |
| rating | Number | Average rating (0–10) |
| image | String | Image URL |
| description | String | Game description |
| Field | Type | Description |
|---|---|---|
| id | String | Auto-generated |
| gameid | String | Reference to game id |
| userid | String | User ID |
| status | String | playing / completed / backlog / wishlist |
| notes | String | User's personal notes |
| personalRating | Number | User's rating (0–10) |
| dateAdded | String | ISO date string |
| Route | Description |
|---|---|
/ |
Home / Browse catalog |
/games/:id |
Game detail page |
/my-list/playing |
Games currently playing |
/my-list/completed |
Completed games |
/my-list/backlog |
Games to play later |
/my-list/wishlist |
Wishlisted games |
/add-game |
Add a new game to the catalog |
| Command | Description |
|---|---|
npm start |
Run development server |
npm run build |
Build for production |
npm test |
Run tests |
npm run lint |
Run ESLint |
- gamesSlice — Catalog data, loading & error states
- listsSlice — Personal list entries with CRUD logic
- filtersSlice — Search query, filters, and sort options
- uiSlice — Modals, toast messages, and UI state
Add screenshots of your finished project here.
- 📊 Stats dashboard (games per list, favorite genre, total hours)
- 🖱️ Drag-and-drop to move games between lists
- 🌙 Dark mode toggle
- 💾 Export lists as JSON or CSV
- 👥 Simulated multi-user login
By building this project, you will practice:
- React component architecture
- State management with Redux Toolkit
- Async data flow with
createAsyncThunk - Routing with React Router
- RESTful CRUD with a mock backend
- Form handling and validation
- Responsive UI design
Your Name
- GitHub: @your-username
- Email: your.email@example.com
This project is licensed under the MIT License.
- MockAPI for the free mock backend service
- Redux Toolkit documentation
- Game cover images sourced from SteamGridDB / RAWG