May 2021

This small project allows users to log in with their Imgur account to view and upload their images.

Gallery View


Some of the key things I learned from this project are:

  • Vue.js
  • State management with Vuex
  • HTTP requests with Axios
  • API endpoints with the Imgur API
  • Live deployment to Firebase Hosting


  • Authenticate with Imgur account via Oauth2
  • View all images on Imgur account
  • Upload images to Imgur account via Drag and Drop uploader

Steps to Run Locally

Create Imgur API Client

  1. Create an Imgur account.
  2. Visit and register your application:
  3. Give your application any name you like and set the Authorization type to “Oauth 2 authorization with a callback URL”
  4. Imgur blocks localhost API calls, make sure to set your callback URL as https:///oauth2/callback
  5. Add an email and description if you would like and click “Submit”
  6. Take note of the Client ID that is generated

Add Imgur API Client ID and Run Project

  1. Add a .env.local file to the root folder of the project
  2. Add a line to that file with your Client ID like this: VUE_APP_CLIENT_ID = ‘YOUR CLIENT ID HERE’
  3. Open a terminal in the root folder of the project and type npm install
  4. After the install finishes, type npm run serve
  5. Access the network address in a web browser (eg. http://192.168.x.x:8080/). Ensure you do not use “localhost:8080” or the Imgur API calls will not work


Please feel free to use the contact form to send me an email.