Skip to content

ReactJS imgur explorer - modern build process using ViteJS, TailwindCSS, lazy-loading, code-splitting.

Notifications You must be signed in to change notification settings

NazimHAli/imgur-explorer

Repository files navigation

Imgur Explorer

Lint CodeQL Unit Tests

DeepSource DeepSource

Branches Functions Lines Statements
Coverage: Branches Coverage: Functions Coverage: Lines Coverage: Statements

Example application using ReactJS + Imgur API + vite bundler. Fluid & responsive layout.

Features

  • ReactJS in TypeScript
  • Vite (fast production bundler)
  • TailwindCSS
  • Lazy loading & code splitting
  • Image modal
  • imgur API features
    • Search
    • Sort results
    • Explore tags
    • Item comments (in modal)
Mocked Data From API

If you don't want to register and use the free Imgur API, it will use mocked data/saved responses from the API. It's also useful for faster local development so you don't have to make new requests with every HMR update.

Google PageSpeed Scores
TODO: automate + add badge for live scores

image

Quick start

yarn
yarn dev

Build

yarn build
yarn serve

Imgur API

  1. Free registration
  2. Pass the client ID as an environemnt variable (can be in .env or through CLI)
    • PUBLIC_IMGUR_CLIENT_ID=xxxxx yarn dev

TODO - Contributions Welcome :D

Features

  • Explore by categories
  • Profile login
  • Upload images

Tests WIP

  • ~70% unit test coverage
  • Cypress performance & integration tests
  • Accessibility tests