{"id":29691901,"url":"https://github.com/markolejman/nextjs-image-gallery-app","last_synced_at":"2026-04-18T13:35:36.112Z","repository":{"id":271156737,"uuid":"912205333","full_name":"markolejman/nextjs-image-gallery-app","owner":"markolejman","description":"Image Gallery App – An image gallery application built with Next.js and Cloudinary as the image hosting provider. Easily upload, display, and download images in a seamless and user-friendly interface.","archived":false,"fork":false,"pushed_at":"2025-01-26T11:26:33.000Z","size":9825,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-07T07:04:43.202Z","etag":null,"topics":["cloudinary","javascript","nextjs","tailwindcss","vercel"],"latest_commit_sha":null,"homepage":"","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/markolejman.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,"zenodo":null}},"created_at":"2025-01-04T22:42:55.000Z","updated_at":"2025-02-11T00:03:32.000Z","dependencies_parsed_at":"2025-01-21T21:25:57.156Z","dependency_job_id":"12e27af3-61ac-48ba-818a-5ac4656d3889","html_url":"https://github.com/markolejman/nextjs-image-gallery-app","commit_stats":null,"previous_names":["markohautala/nextjs-image-gallery-app","markolejman/nextjs-image-gallery-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/markolejman/nextjs-image-gallery-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markolejman%2Fnextjs-image-gallery-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markolejman%2Fnextjs-image-gallery-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markolejman%2Fnextjs-image-gallery-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markolejman%2Fnextjs-image-gallery-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markolejman","download_url":"https://codeload.github.com/markolejman/nextjs-image-gallery-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markolejman%2Fnextjs-image-gallery-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266633687,"owners_count":23959603,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"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":["cloudinary","javascript","nextjs","tailwindcss","vercel"],"created_at":"2025-07-23T07:07:42.814Z","updated_at":"2026-02-13T02:40:41.673Z","avatar_url":"https://github.com/markolejman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image Upload App\n\nThis is an image upload app built with **Next.js**, **React**, **Tailwind CSS**, and **Cloudinary**. It is deployed on **Vercel**.\n\n## Tech Stack\n\n- **Next.js**: Used for routing and server-side rendering.\n- **React**: Used to build the app's UI.\n- **Tailwind CSS**: Utility-first CSS framework used for styling the app.\n- **Cloudinary**: Handles image uploads, storage, and delivery.\n- **Vercel**: Deployed the app for hosting and fast deployments.\n\n## Features\n\n- **Drag-and-Drop Upload**: Allows you to drag images into the upload box or select them manually. Up to 5 images can be uploaded at once.\n- **Upload Progress**: Displays the upload progress for each image.\n- **Error Handling**: If an upload fails, an error message is shown.\n- **Automatic Redirect**: After uploading, you're automatically redirected to a gallery page after a few seconds (URL is private for client use).\n\n## Lighthouse Report\n\n![Lighthouse Report](next-app/public/images/image6.png)\n\n## How It Works\n\n- **Uploading**: When a file is dropped or selected, it’s sent to the server using **`FormData`** and the **Fetch API**. The server then uploads the image to Cloudinary.\n- **Progress**: The app tracks the upload progress and updates the progress bar in real-time.\n- **Success**: Once the upload is complete, a success message is shown, and the app redirects to the gallery page after a few seconds.\n\n### Example Images\n\n#### Desktop View (Three Columns)\n![Three column desktop view](next-app/public/images/image1.png)\n\n#### Middle-Sized Responsive Grid (Two Columns)\n![Middle sized responsive column grid - two columns](next-app/public/images/image2.png)\n\n#### Mobile View (One Column)\n![Mobile view grid - one column](next-app/public/images/image3.png)\n\n#### Mobile View Upload Page\n![Mobile view upload page](next-app/public/images/image4.png)\n\n#### Desktop View Upload Page\n![Desktop view upload page](next-app/public/images/image5.png)\n\n\n#### Loading GIF (Fetching Images)\n\u003cimg src=\"next-app/public/images/image8.png\" alt=\"Loading gif when fetching images\" width=\"300\"/\u003e\n\n**Explanation of the Loading GIF:**\nThe loading GIF displayed on the upload page provides a visual indicator that the app is fetching images. This GIF animates while the server processes and retrieves the uploaded images. It ensures users are aware that content is being loaded and keeps the interface active while waiting. Once the images are successfully fetched, the GIF disappears, and the gallery appears.\n\n#### Upload Progress Bars\n\u003cimg src=\"next-app/public/images/image7.png\" alt=\"Progress bars to show user status of uploads\" width=\"300\"/\u003e\n\n**Upload Progress Bars Explanation:**\nThe progress bars provide users with real-time feedback on the status of their image uploads. They display the percentage of the file uploaded and help users track the process. If multiple images are uploaded at once, each image will have its own progress bar, allowing users to monitor each upload individually.\n\n## Gallery Page Animation\n\n**Explanation of the Gallery Page Animation:**\nIn the gallery page, there is a smooth animation that triggers when the user scrolls down. As the user scrolls, the images in the gallery fade in one by one. This animation effect makes the page feel dynamic and visually engaging, creating a smooth and interactive user experience. The fade-in effect is triggered by the scroll position and helps guide the user’s attention to each image as it appears. The animation is subtle and does not distract from the content but adds a polished touch to the gallery layout.\n\n## Note\n\nThis app is hosted for personal use by the client, so I haven’t included the URL. However, I have tested everything using mockup images, and the functionality works as expected.\n\n## How to Run Locally\n\n1. Clone the repo.\n2. Install the dependencies: `npm install`.\n3. Start the development server: `npm run dev`.\n4. Open the app in your browser at `http://localhost:3000`.\n\nThat's it. Let me know if you have any questions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkolejman%2Fnextjs-image-gallery-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkolejman%2Fnextjs-image-gallery-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkolejman%2Fnextjs-image-gallery-app/lists"}