Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions ProjectDescription.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# T21 – Steam Game Catalog

A searchable catalog of 100,000+ Steam games. Users can search by title, filter and sort the full result set, open a detail view for each game, and leave ratings, reviews and personal play-list statuses that are stored on our server.

## Data
The database is seeded from the [Steam Games Dataset](https://www.kaggle.com/datasets/fronkongames/steam-games-dataset) (Fronkon Games, MIT). A small optional sync script may use the Steam API to refresh selected games. The app itself only reads from our own database.

## Tech stack
- **Frontend:** React + TypeScript (Vite), Apollo Client for state management, an accessible component library (React Aria / Radix)
- **Backend:** Node + TypeScript with Apollo Server (GraphQL), running on port 3001
- **Database:** PostgreSQL with Prisma, run directly on the group VM (no Docker)
- **Hosting:** Apache serves the frontend at `/project2` and proxies GraphQL requests to the backend
- **Quality:** ESLint, Prettier, Vitest (components and API), Playwright (end-to-end)

## How we meet the requirements
- **Search:** case-insensitive title search with debounced input, backed by a trigram index in Postgres
- **Large result sets:** cursor-based pagination with infinite scroll
- **Sorting and filtering:** done on the server across the whole dataset (genre, platform, price, release year, rating)
- **Details:** a dedicated detail view for each game
- **User-generated data:** ratings, reviews and play-list status (want to play / playing / completed), stored in Postgres
- **Accessibility:** semantic HTML, keyboard navigation, `jsx-a11y` linting and automated axe tests
- **Sustainability:** lazy-loaded small images with an option to turn them off, minimal GraphQL queries, caching, compression and dark mode