{"id":22153131,"url":"https://github.com/romabulani/zania","last_synced_at":"2026-05-16T18:02:38.998Z","repository":{"id":264901865,"uuid":"894623261","full_name":"romabulani/zania","owner":"romabulani","description":"A project with drag and drop and MSW.","archived":false,"fork":false,"pushed_at":"2024-11-26T17:38:00.000Z","size":11111,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T13:45:16.210Z","etag":null,"topics":["drag-and-drop","localstorage","mswjs","reactjs","setinterval","typescript","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://zania-rb.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/romabulani.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-11-26T17:23:31.000Z","updated_at":"2024-11-26T17:40:19.000Z","dependencies_parsed_at":"2024-11-26T18:42:31.349Z","dependency_job_id":null,"html_url":"https://github.com/romabulani/zania","commit_stats":null,"previous_names":["romabulani/zania"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/romabulani/zania","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romabulani%2Fzania","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romabulani%2Fzania/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romabulani%2Fzania/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romabulani%2Fzania/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/romabulani","download_url":"https://codeload.github.com/romabulani/zania/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romabulani%2Fzania/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278322146,"owners_count":25967874,"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-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":["drag-and-drop","localstorage","mswjs","reactjs","setinterval","typescript","vercel-deployment"],"created_at":"2024-12-02T01:16:59.348Z","updated_at":"2025-10-04T13:56:22.699Z","avatar_url":"https://github.com/romabulani.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Zania - Frontend Application\n[Zania](https://zania-rb.vercel.app/) is a modern frontend application built using React. It features drag-and-drop functionality, image overlays, shimmer loading effects, and automatic data saving, all managed through a React context for improved modularity and reusability. The app utilizes setInterval to automatically update the last saved time and periodically save data to a database, ensuring smooth user interactions.\n\n### Key Features\n1. Drag and Drop\nThe app allows users to reorder images or cards via drag-and-drop functionality.\nDragging and dropping is handled with React state, ensuring real-time updates and a seamless user experience.\n2. Image Overlay\nClicking on an image triggers an overlay displaying a larger version of the image.\nThe overlay is interactive and can also be closed by clicking esc key.\n3. Shimmer Effect\nTo enhance user experience during image loading, a shimmer effect is displayed until the image is fully loaded. This prevents the UI from feeling unresponsive and improves perceived performance.\n4. Automatic Data Save\nEvery 5 seconds, the app saves the current state of the data, simulating the process of saving to a backend database.\nData is only saved if there are changes, minimizing unnecessary requests.\n5. Last Saved Time\nThe app tracks the last saved time and updates it every 2 seconds, keeping users informed about the current state of their data.\nThe last saved time is displayed in a human-readable format (e.g., \"X seconds ago\" or \"X minutes ago\").\n6. React Context\nA central React Context is used to manage global state (such as the list of documents, the drag-and-drop state, and the overlay image).\nThis allows for better modularity, reusability, and management of state across the app, enabling different components to access and update the shared state without prop drilling.\n7. Modular and Reusable Components\nThe application is built with modularity in mind. Components like Header, Cards, Overlay, and LastSavedTime are separate and reusable.\nEach component focuses on a single responsibility, making the app easier to maintain and extend.\n\n### Installation\n```\ngit clone https://github.com/romabulani/zania.git\ncd zania\nnpm install\nnpm start\n```\nThis will start the development server and open the app in your default browser.\n\n### Project Structure\nThe project is structured to ensure modularity and separation of concerns, which promotes reusability and maintainability.\n\n#### Components\nApp: The root component that manages the application state and provides context to other components.\nHeader: A reusable header component to display the title or navigation.\nCards: Displays the list of cards or images, with drag-and-drop functionality.\nOverlay: A modal that shows a larger version of the image when clicked.\nLastSavedTime: Displays the last saved time, updated every 2 seconds.\nShimmer: A shimmer effect shown while images are loading.\n#### Context\nAppContext: A context provider that shares state (e.g., data, loading states, etc.) with the rest of the app. This centralizes state management and avoids prop drilling.\n#### Services\nfetchDocuments: A mock function to fetch documents or images from the database.\n\nsaveDocuments: A mock function to simulate saving data to a database.\n#### Styles\nApp.css: The main stylesheet, including styles for the shimmer effect, drag-and-drop UI, and layout.\n#### Dependencies\nReact: A JavaScript library for building user interfaces.\n\nReact Context: For managing global state and enabling prop drilling prevention.\n\n### Conclusion\nZania is a simple yet powerful frontend application demonstrating several core concepts in React, such as drag-and-drop functionality, image overlays, shimmer effects for loading states, and automatic data saving. By using React Context, modular components, and hooks like setInterval, the app provides a clean, maintainable, and reusable codebase suitable for future extensions and improvements.\n\n### License\nThis project is open-source and available under the MIT License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromabulani%2Fzania","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fromabulani%2Fzania","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromabulani%2Fzania/lists"}