{"id":25343100,"url":"https://github.com/sebgui/image-viewer","last_synced_at":"2026-02-25T23:33:47.412Z","repository":{"id":276359292,"uuid":"929051095","full_name":"SebGui/image-viewer","owner":"SebGui","description":"TypeScript, Vue3, Nuxt3, Pinia...","archived":false,"fork":false,"pushed_at":"2025-02-19T11:49:48.000Z","size":118,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T13:53:44.179Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SebGui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-07T18:05:39.000Z","updated_at":"2025-02-19T11:49:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"b39d0f11-44a7-4856-8584-de079ba04401","html_url":"https://github.com/SebGui/image-viewer","commit_stats":null,"previous_names":["sebgui/image-viewer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SebGui/image-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SebGui%2Fimage-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SebGui%2Fimage-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SebGui%2Fimage-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SebGui%2Fimage-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SebGui","download_url":"https://codeload.github.com/SebGui/image-viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SebGui%2Fimage-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29844877,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T22:37:40.667Z","status":"ssl_error","status_checked_at":"2026-02-25T22:37:25.960Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-14T10:30:13.189Z","updated_at":"2026-02-25T23:33:47.396Z","avatar_url":"https://github.com/SebGui.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Anchor to top --\u003e\n\u003ca id=\"readme-top\"\u003e\u003c/a\u003e\n# Image viewer\nThis project is a responsive ImageViewer.\n\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"#builtwith\"\u003eBuilt with\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#getting-started\"\u003eGetting started\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#additional-notes\"\u003eAdditional notes\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n*Image Viewer app is a simple, good looking, performant image browser, it can perform searches and is backed with rijksmuseum image API.*\n\n\u003ca id=\"builtwith\"\u003e\u003c/a\u003e\n## Built with\nThe project is built with : \n- Vite\n- Vue 3\n- TypeScript\n- Pinia\n- Nuxt\n\u003cbr/\u003e\n\nwith support of :\n- Vue Router\n- Google Fonts\n- Rijksmuseum API\n\n\u003cp style=\"text-align:right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003ca id=\"getting-started\"\u003e\u003c/a\u003e\n## Getting started\n\nClone repository:\n```git clone git@github.com:SebGui/image-viewer.git```\n(At the desired location)\n\nInstall dependencies :\n```npm install```\n(In the root folder of the repository)\n\nRun local dev environment :\n```npm run dev```\n(Project will be visible at :  `http://localhost:3000`)\n\n**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.\n\n\u003cp style=\"text-align:right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003ca id=\"features\"\u003e\u003c/a\u003e\n## Features\n\n### Header\n#### The header contains a home icon linking to the root of the app.\n\n### Search Bar\n#### The search bar is used to perform a filtered search depending on search terms, to submit press enter or click the submit button.\n\n### Image List\n#### 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.\n\n### Load More button\n#### 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.\n\n### Back to top button\n#### 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.\n\n### Error page\n#### 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).\n\n\u003cp style=\"text-align:right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\n\u003ca id=\"additional-notes\"\u003e\u003c/a\u003e\n## Additionnal notes/features\n\n### Vue masonry\nWe 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. \n\n### Auto load more (on scroll)\nWe could have done a \"automatic load more\" on the current scroll reaching (or getting close) the end.\n\n### Clear filter\nWe 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.\n\n### Detailed view\nWe 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.\n\n### Secret management\nMade use of /server folder to use correctly useRuntimeConfig for secret security/exposure\n\n\n\u003cp style=\"text-align:right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003ca id=\"license\"\u003e\u003c/a\u003e\n## License\nThis project is licensed under Sebastien G.\n\n\u003cp style=\"text-align:right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebgui%2Fimage-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebgui%2Fimage-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebgui%2Fimage-viewer/lists"}