{"id":21471584,"url":"https://github.com/nrjdalal/lazy-dev","last_synced_at":"2026-04-20T05:02:10.428Z","repository":{"id":235114927,"uuid":"790085574","full_name":"nrjdalal/lazy-dev","owner":"nrjdalal","description":"LazyDev - A Next.js/React development tool crafted for use within Next.js or React frameworks, streamlining navigation and bookmarking across pages. More features to come shortly.","archived":false,"fork":false,"pushed_at":"2024-04-23T06:38:13.000Z","size":1222,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T16:16:45.660Z","etag":null,"topics":["developer-tools","development","nextjs","react","shadcn-ui","tailwindcss"],"latest_commit_sha":null,"homepage":"https://lazy-dev.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/nrjdalal.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}},"created_at":"2024-04-22T08:33:32.000Z","updated_at":"2024-12-13T12:59:02.000Z","dependencies_parsed_at":"2024-04-22T09:47:37.268Z","dependency_job_id":"5fa5efd4-5a35-414f-889f-326610ff0a59","html_url":"https://github.com/nrjdalal/lazy-dev","commit_stats":null,"previous_names":["nrjdalal/lazy-dev"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrjdalal%2Flazy-dev","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrjdalal%2Flazy-dev/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrjdalal%2Flazy-dev/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrjdalal%2Flazy-dev/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nrjdalal","download_url":"https://codeload.github.com/nrjdalal/lazy-dev/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243988961,"owners_count":20379649,"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":["developer-tools","development","nextjs","react","shadcn-ui","tailwindcss"],"created_at":"2024-11-23T09:36:55.693Z","updated_at":"2026-04-20T05:02:05.363Z","avatar_url":"https://github.com/nrjdalal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Check out the [demo](https://lazy-dev.vercel.app/). Shipped to production for demo purposes. But remember, it's a development tool and not meant for production.\n\n# What is LazyDev?\n\nLazyDev is a development tool crafted for use within Next.js or React frameworks, streamlining navigation and bookmarking across pages.\n\n\u003e It's important to note that LazyDev is solely applicable during the development phase and does not ship to production environments.\n\nCurrently, users can access a blue button positioned at the bottom right corner of the screen. This button triggers the display of a side menu component, facilitating effortless movement between site pages and providing convenient access to external links crucial for ongoing projects or resource preservation.\n\n![](https://raw.githubusercontent.com/nrjdalal/lazy-dev/main/public/LazyDev-Next-js-React-Dev-Tool-1.png)\n\n![](https://raw.githubusercontent.com/nrjdalal/lazy-dev/main/public/LazyDev-Next-js-React-Dev-Tool-2.png)\n\n---\n\n# Why? What's the idea? And what's next?\n\n- It was always painful to navigate between pages while developing a project. Just when I start to build a new project, I never straightaway start with navigation. I always start with the core functionality and then move to the navigation part. Still I have to navigate between pages to check if everything is working fine. And it's always a pain to navigate between pages via typing. So, I thought of building a tool that will help me navigate between pages easily. And that's how LazyDev was born.\n\n- Then comes the bookmarking part. I always have to open a new tab and search for the resources that I need. And then I have to bookmark them. And then I have to open the bookmarked page to access the resource. Saving and getting back to them is now easy with LazyDev.\n\n### What's next?\n\n- To leverage CLI to easily add this tool to your project.\n- To straightaway manage links via UI only and no configs via utilizing local storage to save keys and links. And persist data if user wants to.\n- Better UI and UX. Maybe even a better website and pro plans.\n\n\u003e I'm not restricting myself to stick just too bookmarks. In future can introduce more features like notes, todos, etc as well. This will make LazyDev a complete dev tool.\n\n- Even community can contribute to this project to make it yours too. Add you ideas (as github issues) and contribute via code.\n\n---\n\n# How to install or add it to my project?\n\n### Prerequisites\n\n- [shadcn/ui](https://ui.shadcn.com/docs/components/sheet) sheet component\n- and nothing else\n\n### Steps\n\n1. Create a folder named `lazy-dev` in components\n2. Create a component in the given folder `lazy-dev.tsx`. And copy paste the following code.\n\n```tsx\nimport { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'\nimport Link from 'next/link'\nimport LinkManagerData from './link-manager'\n\nconst LazyDev = () =\u003e {\n  if (process.env.NODE_ENV !== 'development') return null\n\n  return (\n    \u003cSheet\u003e\n      \u003cSheetTrigger className=\"fixed right-0 top-3/4 z-50 flex flex-col items-center justify-center rounded-l-md bg-blue-500 py-2.5 pl-1 pr-0.5 font-mono text-xs text-white\"\u003e\n        \u003csvg\n          className=\"h-5 w-5 -rotate-90\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        \u003e\n          \u003cpath d=\"m18 15-6-6-6 6\" /\u003e\n        \u003c/svg\u003e\n        \u003cspan className=\"-rotate-90\"\u003ev\u003c/span\u003e\n        \u003cspan className=\"-mt-1.5 -rotate-90\"\u003ee\u003c/span\u003e\n        \u003cspan className=\"-mt-1.5 -rotate-90\"\u003eD\u003c/span\u003e\n        \u003cspan className=\"-mt-1 -rotate-90\"\u003ey\u003c/span\u003e\n        \u003cspan className=\"-mt-1.5 -rotate-90\"\u003ez\u003c/span\u003e\n        \u003cspan className=\"-mt-1.5 -rotate-90\"\u003ea\u003c/span\u003e\n        \u003cspan className=\"-mt-1.5 -rotate-90\"\u003eL\u003c/span\u003e\n      \u003c/SheetTrigger\u003e\n\n      \u003cSheetContent className=\"flex flex-col gap-6 border-none bg-slate-50 p-0\"\u003e\n        \u003cp className=\"mt-3 px-4 font-medium text-blue-500\"\u003eLazyDev\u003c/p\u003e\n        \u003cdiv className=\"-mt-3 h-0.5 w-full bg-slate-200\" /\u003e\n\n        {LinkManagerData?.map(({ title, links }) =\u003e (\n          \u003cdiv key={title} className=\"flex flex-col gap-y-4 px-4 text-black\"\u003e\n            \u003cdiv\u003e\n              \u003cp className=\"text-center font-medium\"\u003e{title}\u003c/p\u003e\n            \u003c/div\u003e\n\n            \u003cdiv className=\"flex w-full flex-col gap-y-3\"\u003e\n              {links.map(({ href, label }) =\u003e (\n                \u003cLink\n                  key={label}\n                  href={href}\n                  target={href.startsWith('http') ? '_blank' : '_self'}\n                \u003e\n                  \u003cdiv className=\"flex w-full flex-wrap items-center justify-between gap-1 rounded-lg border-[1.5px] bg-white p-3\"\u003e\n                    \u003cp className=\"truncate text-sm font-medium text-black\"\u003e\n                      {label}\n                    \u003c/p\u003e\n                    \u003cp className=\"truncate text-right text-xs text-blue-500\"\u003e\n                      {href}\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                \u003c/Link\u003e\n              ))}\n            \u003c/div\u003e\n          \u003c/div\u003e\n        ))}\n      \u003c/SheetContent\u003e\n    \u003c/Sheet\u003e\n  )\n}\n\nexport default LazyDev\n```\n\n3. Add links via creating config as `link-manager.ts` in same folder. Here is an example config.\n\n```ts\nconst LinkManager = [\n  {\n    title: 'Navigation',\n    links: [\n      {\n        href: '/',\n        label: 'Home',\n      },\n    ],\n  },\n  {\n    title: 'Bookmarks',\n    links: [\n      {\n        href: 'https://github.com/nrjdalal/lazy-dev',\n        label: 'LazyDev',\n      },\n    ],\n  },\n]\n\nexport default LinkManager\n```\n\n4. Import `LazyDev` in RootLayout and add it within body.\n\n```tsx\nimport './globals.css'\nimport LazyDev from '@/components/lazy-dev/lazy-dev'\n\nexport default function RootLayout({\n  children,\n}: Readonly\u003c{\n  children: React.ReactNode\n}\u003e) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e\n        {children}\n        \u003cLazyDev /\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnrjdalal%2Flazy-dev","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnrjdalal%2Flazy-dev","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnrjdalal%2Flazy-dev/lists"}