{"id":20633151,"url":"https://github.com/jacceycode/hngxstage3task","last_synced_at":"2025-12-16T02:10:44.705Z","repository":{"id":195899030,"uuid":"693894688","full_name":"JacceyCode/HNGxStage3Task","owner":"JacceyCode","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-29T19:22:43.000Z","size":59124,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-17T07:32:33.597Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/JacceyCode.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":"2023-09-19T23:43:03.000Z","updated_at":"2023-09-19T23:45:36.000Z","dependencies_parsed_at":"2023-10-15T14:32:23.511Z","dependency_job_id":"cb542609-909a-4fec-a31b-f3df09eaa256","html_url":"https://github.com/JacceyCode/HNGxStage3Task","commit_stats":null,"previous_names":["jacceycode/hngxstage3task"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacceyCode%2FHNGxStage3Task","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacceyCode%2FHNGxStage3Task/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacceyCode%2FHNGxStage3Task/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacceyCode%2FHNGxStage3Task/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JacceyCode","download_url":"https://codeload.github.com/JacceyCode/HNGxStage3Task/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242633755,"owners_count":20161210,"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":[],"created_at":"2024-11-16T14:18:59.292Z","updated_at":"2025-12-16T02:10:39.628Z","avatar_url":"https://github.com/JacceyCode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Drag\u0026Drop Image Gallery Project - MyImageA\n\n\u003ch1 align=\"center\"\u003eHi 👋, I'm Jacob Adebayo (@JacceyCode)\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eA passionate frontend developer.\u003c/h3\u003e\n\n- 🔭 I’m currently working on **Drag\u0026Drop Image Gallery project called MyImageA.**\n\n- 📫 How to reach me **jacobadebayo.ja@gmail.com**\n\n## Description\n\n📄 This project is an image gallery that can be viewed by anyone. It allows for login of registered user's with an authentication feature which gives user's access to the drag\u0026drop feature that allows for rearranging the images in the gallery and also the image search functionality.\n\nThe interface was developed using React and Tailwind CSS, the user authentication was implemented using supabase while the drag\u0026drop functionality was done with a react toolkit called dnd-kit.\n\n\u003ch3 align=\"left\"\u003eHow the gallery work:\u003c/h3\u003e\n\u003cp align=\"left\"\u003e\nUser's visiting the website url can only view the images in the gallery. Only a authenticated user can proceed to login and access the other functionalities.\n\u003c/p\u003e\n\u003cp align=\"left\"\u003e\nFor registered user's:\n\n- click on the login button by the top right of the gallery.\n\n- Input your email and password and submit(At this point, user's details are authenticated using supabase auth functionality and signed-in if details are correct or an alert pops-up if the details are wrong).\n\n- When signed in, user's can rearrange the gallery by simply clicking/holding down on the image to be moved and drag it to the preffered position.\n\n- User's can also streamline image search by using the search box at the top of the galley. Images can be searched for using defined tag names like Car, House, Nature \u0026 Animal. Any tag name outside the defined ones will prompt an error to search again.\n\n- User's can also sign-out when done by clicking on the logout button by the top right corner of the gallery.\n\u003c/p\u003e\n\n\u003cp align='left'\u003eTest Login details are:\n\n- Email: user@example.com\n- Password: 1Password\n\u003c/p\u003e\n\n\u003cp align='left'\u003eI hope you testing the gallery.\u003c/p\u003e\n\n\u003ch3 align=\"left\"\u003eConnect with me on github: @JacceyCode\u003c/h3\u003e\n\n\u003ch3 align=\"left\"\u003eLanguages and Tools:\u003c/h3\u003e\n React(Vite) + React Router + Tailwind CSS + dnd-kit + supabase\n\u003cp align=\"left\"\u003e \u003ca href=\"https://www.w3schools.com/css/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg\" alt=\"css3\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e \u003ca href=\"https://www.figma.com/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://www.vectorlogo.zone/logos/figma/figma-icon.svg\" alt=\"figma\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e \u003ca href=\"https://git-scm.com/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg\" alt=\"git\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e \u003ca href=\"https://www.w3.org/html/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg\" alt=\"html5\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg\" alt=\"javascript\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e \u003ca href=\"https://reactjs.org/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg\" alt=\"react\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e \u003ca href=\"https://tailwindcss.com/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg\" alt=\"tailwind\" width=\"40\" height=\"40\"/\u003e \u003c/a\u003e \u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacceycode%2Fhngxstage3task","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacceycode%2Fhngxstage3task","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacceycode%2Fhngxstage3task/lists"}