nazimhali / imgur-explorer

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

Imgur Explorer

Branches	Functions	Lines	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

• Mobile 93/100
• Desktop 99/100

Live Demo

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

imgur-explorer's Issues

ENH: Add card loading silhouette back

FEATURE: Image modal on hover/click to nagivate

BUG: First item click causes full re-render

ENH: Add profile login

ENH: Refactor modal to allow gallery navigation fullscreen

ENH: Add logging

BUG: Initial pageload flicker

ENH: Ability to toggle favorites

ENH: Add virtual scrolling

All items from a response are rendered on load. Would be more efficient to dynamically render them + set a cap on the maximum number of elements. Currently it's also the number one performance issue. 😱

BUG: Footer dynamic import results in full re-render

ENH: Thumbs up/down items, sync with profile

MNT: Update coverage threshold

There's a bug with jest + vitejs with coverage option, but can use DeepSource GitHub action to track coverage for now. Need to maintain ~70% coverage for core functionality.