Gotta snap 'em all!
Photódex takes a Flickr album of AR snaps from Pokémon GO and displays them in a Pokédex-style layout.
The site is powered by the Flickr API and requires the corresponding album to be in a particular format:
- The album must be public and contain the word "Photódex" in the title.
- The individual photo titles must contain the 3-digit Pokémon number (e.g. "001 Bulbasaur").
If you would like to set up your own Photódex, all of the instructions are here: http://www.photodex.io/
If you would like to contribute to Photódex or to make your own fork of the site, these instructions should be everything you need to get set up.
Recommended VS Code extensions
2. Apply for a Flickr API key
Sign up for a Flickr API key: https://www.flickr.com/services/api/misc.api_keys.html
You will need it later in your
3. Set up
- Check out the code from GitHub (as below, or from your own fork):
git clone email@example.com:jamiehumphries/photodex.git
- Install all dependencies via NPM:
cd photodex/ npm install
- Create a file named
.envat the root of the project to store your Flickr API key and other configuration. The contents of the file should be:
# Your personal API key from Flickr. FLICKR_API_KEY = your_api_key # The password used to access /admin/dashboard with the username 'admin'. # The password can be anything non-empty. ADMIN_PASSWORD = your_password # Comma-separated list of usernames to show in the 'Featured' section of the home page. FEATURED = JTAtomico,GeorgeFromCamp,BeppisMAX # Various cache durations for different endpoints and API calls. # These are optional and can be omitted. HOME_RESPONSE_CACHE_SECONDS = 1 DEX_RESPONSE_CACHE_SECONDS = 1 FIND_USER_CACHE_SECONDS = 1 FIND_PHOTODEX_ID_CACHE_SECONDS = 1
- Run the
starttask to launch the site in development mode:
- You should now be able to view the site at http://localhost:5000/.
4. Development and debugging
Visual Studio Code is recommended for development and debugging.
When running the site via
npm start (as above), the server will update and refresh automatically as you make changes, so you can see changes when you refresh the browser window.
You can also install the LiveReload browser extension for your browser of choice so that the site will reload automatically following changes, without the need to manually refresh.
With the site running via
npm start, you can debug the Node process in Visual Studio Code by using the Attach configuration, either:
- Press F5; or
- Open the debug tab and click the green play button
This will allow you to set breakpoints, etc.