Live version can be found @ steam-games.vercel.app
App for displaying a users collection of Steam games, latest news, and achievements. Utilizing the official Steam API.
Some data might be missing or displayed incorrectly, for example missing images and game descriptions displaying in different languages. This is due the the data we have available to us from the Steam API.
For development, you will only need Node.js installed on your machine.
Node is really easy to install & now includes NPM.
You should be able to run the following commands after the installation.
$ node --version
$ npm --version
$ git clone https://github.com/robFraser1111/steam-games.git
$ cd PROJECT
$ npm i
Register for a Steam API Key and update the .env file.
$ npm run dev
$ npm run build
- Next JS React Framework.
- TypeScript JavaScript with syntax for types.
- Node Asynchronous event-driven JavaScript runtime.
- Styled Components CSS is JS.
- SWR React Hooks for Data Fetching.
- Passport Authentication for Node.js.
Directory structure of full-stack JS app.
/
├─ .next/ # Next build folder
├─ components/ # React components
├─ context/ # React context api for state management
├─ lib/ # Next Router config and steam passport strategy
├─ node_modules/ # Packages for app
├─ pages/ # App pages including api and authentication routes
├─ public/ # Media
├─ .babelrc # Babel config
├─ .env # Environment variables
├─ .env.sample # Environment variables example
├─ .gitignore # List of files to ignore for repo
├─ next-env.d.ts # TypeScript settings for Next
├─ next.config.js # Next configuration
├─ package-lock.json # Versioned dependencies
├─ package.json # Dependencies and scripts
├─ README.md # This file
└─ tsconfig.json # TypeScript configuration
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent