https://github.com/connorshea/vglist-variety-generator

A simple Vue-based app that can be used to fill out a "Variety List", optionally connects to vglist.
https://github.com/connorshea/vglist-variety-generator

graphql vglist vite vue vue-typescript vue3

Last synced: 1 day ago
JSON representation

A simple Vue-based app that can be used to fill out a "Variety List", optionally connects to vglist.

• Host: GitHub
• URL: https://github.com/connorshea/vglist-variety-generator
• Owner: connorshea
• License: mit
• Created: 2022-05-27T19:31:10.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-06-02T01:40:45.000Z (over 2 years ago)
• Last Synced: 2023-03-04T02:34:08.452Z (over 1 year ago)
• Topics: graphql, vglist, vite, vue, vue-typescript, vue3
• Language: Vue
• Homepage: https://connorshea.github.io/vglist-variety-generator
• Size: 308 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vglist Variety Generator

Based on an image that floated around social media, where people would share an image with a list of 100 game series' and fill out which game series' they've played. For the hell of it, I've created a little website that uses the [vglist](https://vglist.co) API to fill it out for you.

Based on [the original template made by ZweiDouble](https://twitter.com/ZweiDouble/status/1528733569224409090).

Built with Vue 3, TypeScript, and Vite.

## Setup Instructions

To run locally, you'll want to have Node 16 and Yarn v1 installed.

Then:

- Clone the repo.

- Create and configure the `.env.local` file (see section below).

- Run `yarn install`.

- Run `yarn dev`.

And then the site will be available at localhost:3000.

### `.env.local`

In order to connect to the vglist GraphQL API, you'll need to set up some environment variables for yourself.

- Create `.env.local` in the vglist-variety-generator directory.

- Populate it with the following:

```

VITE_VGLIST_CLIENT_ID=FOOBAR

VITE_VGLIST_REDIRECT_URI=http://localhost:3000/vglist-variety-generator/

```

- You can keep the value of `VITE_VGLIST_REDIRECT_URI` as-is.

- For the Client ID, you'll need to create an OAuth application in https://vglist.co.

  - Log into https://vglist.co/.

  - Go to Settings.

  - Go to the "Developer" page in the left sidebar.

  - Click "New Application".

  - Give it a name.

  - Set the redirect URI as `http://localhost:3000/vglist-variety-generator/`.

  - Uncheck Confidential, since the application secret won't be necessary.

  - Give it the `read` scope (you won't need/want to give it the `write` scope).

  - Click Submit.

  - Copy the "Application UID" and use it for the value of `VITE_VGLIST_CLIENT_ID` in `.env.local`.