https://github.com/sebgui/image-viewer
TypeScript, Vue3, Nuxt3, Pinia...
https://github.com/sebgui/image-viewer
Last synced: 4 months ago
JSON representation
TypeScript, Vue3, Nuxt3, Pinia...
- Host: GitHub
- URL: https://github.com/sebgui/image-viewer
- Owner: SebGui
- Created: 2025-02-07T18:05:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-19T11:49:48.000Z (over 1 year ago)
- Last Synced: 2025-04-08T13:53:44.179Z (about 1 year ago)
- Language: Vue
- Size: 115 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Image viewer
This project is a responsive ImageViewer.
Table of Contents
*Image Viewer app is a simple, good looking, performant image browser, it can perform searches and is backed with rijksmuseum image API.*
## Built with
The project is built with :
- Vite
- Vue 3
- TypeScript
- Pinia
- Nuxt
with support of :
- Vue Router
- Google Fonts
- Rijksmuseum API
Clone repository:
```git clone git@github.com:SebGui/image-viewer.git```
(At the desired location)
Install dependencies :
```npm install```
(In the root folder of the repository)
Run local dev environment :
```npm run dev```
(Project will be visible at : `http://localhost:3000`)
**Note** : For easier installation, i pushed my developement key to the API, but in a production context we wouldn't push our key to git, it is supposed to not be exposed.
### Header
#### The header contains a home icon linking to the root of the app.
### Search Bar
#### The search bar is used to perform a filtered search depending on search terms, to submit press enter or click the submit button.
### Image List
#### The image list shows by default 20 tiles, on hover (or tap for mobile devices) you will see a bottom aligned overlay revealing the title of the image, the related animation/style for each single image, and the full resolution image. If the image returns an error, a default image placeholder will be shown. The choice of using a lower resolution image is to make the LCP and general resources management better.
### Load More button
#### The load more button gets the next 20 images to the related search (or default request), on click it will reveal a spinner and show the next requested images.
### Back to top button
#### To enhance the UX, i added a back to top button to avoid scrolling a lot after an extended load more button interaction. Animation on reveal and on hide for a smoother flow.
### Error page
#### Created an error page for all the request getting out of the scope of our router (or back requests). It show a short message, the error code, the error message, and a button to go back to the home page (it has a bit of styling, and is responsive).
### Vue masonry
We could have used vue-masonry library here, to make a fancy looking wall that based on the height of the images would create a wall of images of different sizes, leaving no blank spaces.
### Auto load more (on scroll)
We could have done a "automatic load more" on the current scroll reaching (or getting close) the end.
### Clear filter
We could have added a "clear filter" button to have a potential more obvious options to step back from a filtered search back to a global search.
### Detailed view
We could have implemented a detail view (separate page or modal using teleport) where we would show more details about the image and a bigger view of the high quality images.
### Secret management
Made use of /server folder to use correctly useRuntimeConfig for secret security/exposure