{"id":26259046,"url":"https://github.com/imarjunshrma/dragndropnextapp","last_synced_at":"2025-12-28T15:59:50.706Z","repository":{"id":190225574,"uuid":"682194047","full_name":"imarjunshrma/DragnDropNextApp","owner":"imarjunshrma","description":" A beautiful drag-and-drop app using Next.js v13.4, React Beautiful DND, TypeScript, and Tailwind CSS for modern, seamless interactions","archived":false,"fork":false,"pushed_at":"2023-08-23T17:18:57.000Z","size":62,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-08-23T18:34:33.485Z","etag":null,"topics":["blog","browser","compiler","components","next","nextjs13","node","react","reactbeautifuldnd","server-rendering","ssg","tailwind","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://dragn-drop-next-app.vercel.app","language":"TypeScript","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/imarjunshrma.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}},"created_at":"2023-08-23T16:37:14.000Z","updated_at":"2023-08-23T18:34:35.010Z","dependencies_parsed_at":null,"dependency_job_id":"650cb6ae-5928-4389-9895-7cdf7ad3409f","html_url":"https://github.com/imarjunshrma/DragnDropNextApp","commit_stats":null,"previous_names":["imarjunshrma/dragndropnextapp"],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imarjunshrma%2FDragnDropNextApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imarjunshrma%2FDragnDropNextApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imarjunshrma%2FDragnDropNextApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imarjunshrma%2FDragnDropNextApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imarjunshrma","download_url":"https://codeload.github.com/imarjunshrma/DragnDropNextApp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243489784,"owners_count":20299001,"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":["blog","browser","compiler","components","next","nextjs13","node","react","reactbeautifuldnd","server-rendering","ssg","tailwind","typescript","vercel"],"created_at":"2025-03-13T22:15:51.292Z","updated_at":"2025-12-28T15:59:50.673Z","avatar_url":"https://github.com/imarjunshrma.png","language":"TypeScript","readme":"# React Drag-and-Drop Columns and Items Project\n\nThis project implements a drag-and-drop interface using React and `react-beautiful-dnd` where users can move items between columns and reorder the columns themselves.\n\n\u003ca href=\"https://dragn-drop-next-app.vercel.app/\" target=\"_blank\"\u003e\u003cimg src=\"https://dragn-drop-next-app.vercel.app/image-1.png\" alt=\"Description of image\" /\u003e\u003c/a\u003e\n\n## Features\n\n- **Drag and Drop Items**: Users can drag and drop items within a column or move them to other columns.\n- **Reorder Columns**: Users can reorder columns by dragging and dropping them.\n- **Empty Columns Handling**: Columns without items are also droppable, ensuring a smooth user experience.\n\n## Prerequisites\n\nBefore setting up the project, make sure you have the following installed on your local machine:\n\n- **Node.js**: Download and install Node.js from [nodejs.org](https://nodejs.org).\n- **npm**: Node Package Manager is installed automatically with Node.js.\n\n## Installation\n\n1. **Clone the Repository**\n\n   Clone the project to your local machine using the following command:\n\n   ```bash\n   git clone https://github.com/imarjunshrma/DragnDropNextApp.git\n   ```\n\n2. **Navigate to the Project Directory**\n\n   ```bash\n   cd your-repo-name\n   ```\n\n3. **Install Dependencies**\n\n   Install all the required dependencies for the project:\n\n   ```bash\n   npm install\n   ```\n\n## Configuration\n\nTo ensure that the drag-and-drop functionality works correctly, **React's strict mode must be disabled**. You can disable it by modifying the `next.config.js` file in your Next.js project.\n\n1. Open the `next.config.js` file.\n2. Add the following configuration:\n\n   ```javascript\n   const nextConfig = {\n     reactStrictMode: false,\n   };\n\n   module.exports = nextConfig;\n   ```\n\n**Important**: The project will only function correctly if `reactStrictMode` is set to `false`. React's strict mode is known to cause issues with the drag-and-drop functionality by performing double rendering of components in development mode, which interferes with the way state updates work in `react-beautiful-dnd`.\n\n## Usage\n\nOnce you have installed the dependencies and disabled strict mode, you can start the project locally with:\n\n```bash\nnpm run dev\n```\n\nThen open [http://localhost:3000](http://localhost:3000) in your browser to view the drag-and-drop application.\n\n## How It Works\n\n- The app allows users to drag items between columns and reorder both items and columns.\n- The components are rendered dynamically based on the structure of the data.\n- **`onDragEnd`**: This function handles both column reordering and item movement within or between columns. The data structure is updated when a drag-and-drop action is completed.\n\n## Project Structure\n\n- **`components/`**: Contains the reusable UI components for the app.\n- **`utils/`**: Includes utility functions (if any).\n- **`pages/`**: Main app entry point.\n- **`next.config.js`**: Next.js configuration file where strict mode is disabled.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimarjunshrma%2Fdragndropnextapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimarjunshrma%2Fdragndropnextapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimarjunshrma%2Fdragndropnextapp/lists"}