Won Games is a game ecommerce front-end template that recreates the Steam/Epic Games store experience, built with Next.js, TypeScript, and GraphQL.
What is Won Games?
Won Games is a front-end ecommerce project for listing and selling video games across multiple genres, mimicking the store style of Steam and Epic Games. It takes product data from a Strapi CMS backend and renders a storefront using Next.js server-side rendering. The application was developed by Caio Augusto as part of the Udemy course "React Avançado" and is published as a public GitHub repository.
Key Features
- Next.js with SSR — Uses Next.js for React rendering, enabling server-side rendering for game pages.
- GraphQL + Apollo — Fetches game data through GraphQL queries with Apollo Client.
- styled-components — Styles the entire storefront with CSS-in-JS.
- Stripe integration — Handles payment processing for game purchases.
- PWA support via next-pwa — Makes the store installable and offline-capable.
- Testing setup — Includes Cypress for end-to-end tests and Jest with React Testing Library for unit tests.
- Storybook — Documents components in an isolated UI development environment.
- Developer tooling — Uses Plop.js for scaffolding, Husky for Git hooks, and ESLint/Prettier for code quality.
Who is it for?
- Developers taking the React Avançado course — the project is the hands-on result of that course, so it serves as a reference for every technique taught.
- Front-end developers who need a ready-made game store — they can clone the repo, connect their own Strapi backend, and customize.
- Teams wanting a well-tested Next.js ecommerce base — they get Cypress E2E, unit tests, and Storybook out of the box.
What can you do with Won Games?
- Student developers: study a complete production-style codebase with SSR, GraphQL, and a Stripe checkout flow.
- Indie game sellers: set up a storefront that lists titles by genre and processes payments via Stripe.
- UI engineers: explore the Storybook component library to reuse or extend game-focused UI components.
How does Won Games work?
The README describes the setup: clone the front-end repository, run yarn install, then yarn dev to start in development mode on localhost:3000. Tests use yarn test:watch for unit tests and yarn test:e2e for Cypress tests. The project requires a separate Strapi API backend, whose repository is linked in the README, to serve game data.
Pros and cons
- Pros: real-world testing stack (Cypress, Jest, React Testing Library), PWA support, Stripe payments, Storybook component docs, and a modern Next.js/TypeScript stack.
- Cons: the README is only in Portuguese, and the front-end depends on a separate Strapi backend that must be set up locally.
FAQ
Does Won Games include a backend?
No, Won Games is only the front-end. It needs the Strapi API backend from the Won-Games/api repository to retrieve game data, so cloning the front-end alone will not display products without running the backend locally.
What languages are used in Won Games?
The code is written in TypeScript with React and Next.js, using GraphQL for data fetching and styled-components for styling. The README documentation is in Brazilian Portuguese.
Which testing frameworks are included?
Cypress is configured for end-to-end tests, while Jest and React Testing Library handle unit tests. The corresponding commands are yarn test:e2e and yarn test:watch.
Does Won Games support payments?
Yes, Stripe is integrated for payment processing. This makes it possible to check out and purchase games directly through the store.
