{"id":18106681,"url":"https://github.com/mattjdean/js-array","last_synced_at":"2026-05-06T11:35:39.248Z","repository":{"id":258350633,"uuid":"873774686","full_name":"MattJDean/js-array","owner":"MattJDean","description":"ImageVault - JavaScript Array Assessment Project ","archived":false,"fork":false,"pushed_at":"2024-10-29T09:00:22.000Z","size":71,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-29T09:52:24.725Z","etag":null,"topics":["alpinejs","api","array","array-methods","arrays","email-validation","fetch-api","form-validation","javascript","regex","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://imgvlt.netlify.app","language":"CSS","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/MattJDean.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":"2024-10-16T17:39:10.000Z","updated_at":"2024-10-29T09:00:26.000Z","dependencies_parsed_at":"2024-12-19T14:47:18.939Z","dependency_job_id":"5723a2b3-693a-41cc-989e-d32969aedd59","html_url":"https://github.com/MattJDean/js-array","commit_stats":null,"previous_names":["mattjdean/js-array"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattJDean%2Fjs-array","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattJDean%2Fjs-array/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattJDean%2Fjs-array/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattJDean%2Fjs-array/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MattJDean","download_url":"https://codeload.github.com/MattJDean/js-array/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445651,"owners_count":20939953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["alpinejs","api","array","array-methods","arrays","email-validation","fetch-api","form-validation","javascript","regex","tailwind","tailwindcss"],"created_at":"2024-10-31T23:07:42.285Z","updated_at":"2026-05-06T11:35:39.215Z","avatar_url":"https://github.com/MattJDean.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eImageVault\u003c/h1\u003e\n\n\u003cp\u003eThis is my Javascript Array assessment project for the \u003ca href=\"https://www.netmatters.co.uk/train-for-a-career-in-tech\" target=\"_blank\"\u003eNetmatters Scion Coalition Scheme.\u003c/a\u003e\u003c/p\u003e\n\u003cbr\u003e\n\u003cp\u003eImageVault is a web application that allows users to assign images from Upsplash to their own 'vault' using their email. The app demonstrates the use of JavaScript arrays, API integration, and modern front-end development techniques.\u003c/p\u003e\n\n\u003ch2\u003eFeatures\u003c/h2\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003cstrong\u003eImage Fetching:\u003c/strong\u003e Users can fetch random images from the Unsplash API\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eImage Assignment:\u003c/strong\u003e Users can assign fetched images to their email address, creating a personal vault of images.\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eImage Interactions:\u003c/strong\u003e\n    \u003cul\u003e\n      \u003cli\u003eTag image as favourite.\u003c/li\u003e\n      \u003cli\u003eView image in full-screen.\u003c/li\u003e\n      \u003cli\u003eView image information gathered from Upsplash.\u003c/li\u003e\n      \u003cli\u003eDelete image.\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eAPI Integration:\u003c/strong\u003e Images are fetched dynamically from the Unsplash API\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eResponsive Design:\u003c/strong\u003e The app uses responsive layouts to ensure a smooth user experience on different screen sizes.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2\u003eTechnologies\u003c/h2\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003cstrong\u003eJavaScript/jQuery:\u003c/strong\u003e Used to handle UI reactivity and manage application state.\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eTailwind CSS:\u003c/strong\u003e For designing a modern and responsive user interface.\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eUnsplash API:\u003c/strong\u003e For fetching high-quality random images.\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eHTML/CSS:\u003c/strong\u003e For the basic structure and styling of the app.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2\u003eHow It Works\u003c/h2\u003e\n\n\u003ch3\u003eImage Fetching\u003c/h3\u003e\n\u003cp\u003eThe user clicks the \u003cstrong\u003eFetch Image\u003c/strong\u003e. Upon clicking the \"Fetch Image\" button, the app calls the Upsplash API, retrieves a random image, and displays it on the screen.\u003c/p\u003e\n\n\u003ch3\u003eImage Assignment\u003c/h3\u003e\n\u003cp\u003eThe user enters an email address and assigns the fetched image to that email. All assigned images are stored in arrays, and the app allows the user to manage them (mark as favourite, view in full screen, view image information and delete).\u003c/p\u003e\n\n\u003ch3\u003eImage Vault\u003c/h3\u003e\n\u003cp\u003eThe images are displayed in a grid layout, each with the following interactive options:\u003c/p\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003cstrong\u003eFavourite:\u003c/strong\u003e Mark an image as a favourite, which displays a star icon on the image.\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eView Full-Screen:\u003c/strong\u003e Clicking this button opens the image in a full-screen modal.\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eView Image Information:\u003c/strong\u003e Clicking this button opens the a modal which displays information about the image gathered from Unplash.\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eDelete:\u003c/strong\u003e Removes the image from the user's vault.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch3\u003eImage Modals\u003c/h3\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003cstrong\u003eFull-Screen Modal:\u003c/strong\u003e Users can view images in full-screen mode with a dimmed background. This modal also displays details about the image, such as the photographer's name and a link to their profile.\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eInformation Modal:\u003c/strong\u003e Opens a modal displaying detailed information about the image (description, photographer, profile link).\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2\u003eMethods Used\u003c/h2\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003cstrong\u003eAPI Integration:\u003c/strong\u003e Uses \u003ccode\u003efetch\u003c/code\u003e to make API calls to Unsplash and Pexels to retrieve random images.\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eReactivity with Alpine.js:\u003c/strong\u003e The app is highly dynamic and reactive, thanks to Alpine.js. It manages states such as:\n    \u003cul\u003e\n      \u003cli\u003eThe currently fetched image.\u003c/li\u003e\n      \u003cli\u003eThe list of images assigned to each email.\u003c/li\u003e\n      \u003cli\u003eModals for full-screen image viewing and detailed image information.\u003c/li\u003e\n      \u003cli\u003eLocal storage data for displaying user saved images in their array\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eDynamic Image Handling:\u003c/strong\u003e Images are stored and handled as objects containing URLs, descriptions, photographers, and profile links. The app uses this information to render the images dynamically in the UI.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2\u003eCode Overview\u003c/h2\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003cstrong\u003eindex.html:\u003c/strong\u003e Contains the structure of the app, using Tailwind CSS utility classes in the markup to style the page and its componenets.\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eapp.js:\u003c/strong\u003e Manages the core logic of the app, including image fetching, state management, and image assignment. The \u003ccode\u003efetchImage()\u003c/code\u003e makes an API call to Upsplash, and state management handles image assignment, deletion, and modal toggling.\u003c/li\u003e\n\u003c/ul\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattjdean%2Fjs-array","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattjdean%2Fjs-array","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattjdean%2Fjs-array/lists"}