Photo Tagger
Used technology: CSS, React, typescript

The application was created as part of the training. Sometimes it’s good to break away from your programming tasks and create such applications just for fun in your free time. Inspired by Lightroom. Written in React with TypeScript. Without any backend. The concept was to write a simple application focusing primarily on UI/UX.

Bullets points:

  • The application downloads a set of photos from https://picsum.photos/. The downloaded images are large, so I created a function that converts the original url to one that downloads smaller images.
  • I used sessionStorage as an additional place to „dump” the list of photos and tags, thanks to which, after reloading the page, the user does not lose his data (as I mentioned earlier, there is no backhand to saving data).
  • Using Content to manage the state of the application.
  • There are three layout modes (top and bottom equally, or maximizing one of the spaces).
  • The user can add tags by giving them a name and a color. The color is automatically defined on the basis of already used by the user.
  • The user assigns tags to photos. The tagged photos appear at the bottom of the app.
  • Everything works quickly and efficiently, covered by tests.

Live Demo