{"id":27700351,"url":"https://github.com/daryllxd/x-padlet","last_synced_at":"2026-04-19T14:05:27.824Z","repository":{"id":285672618,"uuid":"957564016","full_name":"daryllxd/x-padlet","owner":"daryllxd","description":"My attempt at cloning Padlet","archived":false,"fork":false,"pushed_at":"2025-04-23T06:39:25.000Z","size":63381,"stargazers_count":0,"open_issues_count":21,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-23T07:31:45.029Z","etag":null,"topics":["drag-and-drop","nextjs","react","socket-io"],"latest_commit_sha":null,"homepage":"https://puglet.daryll.codes","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/daryllxd.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,"zenodo":null}},"created_at":"2025-03-30T17:15:04.000Z","updated_at":"2025-04-23T05:18:15.000Z","dependencies_parsed_at":"2025-04-16T06:39:46.786Z","dependency_job_id":null,"html_url":"https://github.com/daryllxd/x-padlet","commit_stats":null,"previous_names":["daryllxd/x-padlet"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daryllxd%2Fx-padlet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daryllxd%2Fx-padlet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daryllxd%2Fx-padlet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daryllxd%2Fx-padlet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daryllxd","download_url":"https://codeload.github.com/daryllxd/x-padlet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250878763,"owners_count":21501741,"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":["drag-and-drop","nextjs","react","socket-io"],"created_at":"2025-04-25T18:59:11.353Z","updated_at":"2026-04-19T14:05:27.809Z","avatar_url":"https://github.com/daryllxd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🐶 Puglet\n\nOne of the todo list applications of all time\n\n![Preview](/apps/web/public/preview-view-list.png)\n\n[![Live Demo](https://img.shields.io/badge/🙏_%20%20%20Live_demo-puglet.daryll.codes-green)](https://puglet.daryll.codes)\n[![Demo on Vercel](https://img.shields.io/badge/Deployed_on_vercel-padlet.vercel.app-green?logo=vercel)](https://x-padlet.vercel.app)\n\n[![Storybook](https://img.shields.io/badge/Puglet_chronicles-online-purple?logo=storybook\u0026style=popout)](https://puglet-chronicles.daryll.codes) [![Cloudflare Pages Storybook](https://img.shields.io/badge/Deployed_on_Cloudflare_pages-online-purple?logo=storybook\u0026style=popout)](https://x-padlet.pages.dev)\n\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-Profile-blue?style=flat\u0026logo=linkedin)](https://www.linkedin.com/in/daryll-santos/)\n\n## What's it do?\n\nI wanted to create a side project that would keep track of things + to learn and re-learn some front-end concepts!\n\n## Tech Stack\n\n[![Next.js](https://img.shields.io/badge/NextJS-000000?style=popout\u0026logo=nextdotjs\u0026logoColor=white)](https://nextjs.org/)\n[![React](https://img.shields.io/badge/React-20232A?style=popout\u0026logo=react\u0026logoColor=61DAFB)](https://reactjs.org/)\n[![React Query](https://img.shields.io/badge/-React%20Query-FF4154?style=popout\u0026logo=react-query\u0026logoColor=white)](https://tanstack.com/query/latest)\n[![Shadcn UI](https://img.shields.io/badge/shadcn/ui-000?style=popout\u0026logo=shadcnui\u0026logoColor=white)](https://ui.shadcn.com/)\n[![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=popout\u0026logo=tailwindcss\u0026logoColor=white)](https://tailwindcss.com/)\n[![Pragmatic Drag and Drop](https://img.shields.io/badge/Pragmatic%20Drag%20and%20Drop-2684FF?style=popout\u0026logo=pragmaticdraganddrop\u0026logoColor=white)](https://atlassian.design/components/pragmatic-drag-and-drop/)\n[![MSW](https://img.shields.io/badge/MSW-F0DB4F?style=popout\u0026logo=javascript\u0026logoColor=black)](https://mswjs.io/)\n\n[![AWS](https://img.shields.io/badge/AWS-232F3E?style=popout\u0026logo=amazonwebservices\u0026logoColor=white)](https://aws.amazon.com/)\n[![S3](https://img.shields.io/badge/S3-569A31?style=popout\u0026logo=amazonaws\u0026logoColor=white)](https://aws.amazon.com/s3/)\n[![Cloudfront](https://img.shields.io/badge/Cloudfront-F79825?style=popout\u0026logo=amazonaws\u0026logoColor=white)](https://aws.amazon.com/cloudfront/)\n[![Namecheap](https://img.shields.io/badge/Namecheap-00B14F?style=popout\u0026logoColor=white)](https://www.namecheap.com/)\n[![PostgreSQL](https://img.shields.io/badge/PostgreSQL-4169E1?style=popout\u0026logo=postgresql\u0026logoColor=white)](https://www.postgresql.org/)\n[![Supabase](https://img.shields.io/badge/Supabase-3ECF8E?style=popout\u0026logo=supabase\u0026logoColor=white)](https://supabase.com/)\n[![Redis](https://img.shields.io/badge/Redis-DC382D?style=popout\u0026logo=redis\u0026logoColor=white)](https://redis.io/)\n\n[![pnpm](https://img.shields.io/badge/PNPM-F7E05F?style=popout\u0026logo=pnpm\u0026logoColor=black)](https://pnpm.io/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=popout\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=popout\u0026logo=eslint\u0026logoColor=white)](https://eslint.org/)\n[![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=popout\u0026logo=prettier\u0026logoColor=black)](https://prettier.io/)\n[![Husky](https://img.shields.io/badge/Husky-7C3AED?style=popout\u0026logo=husky\u0026logoColor=white)](https://typicode.github.io/husky/)\n[![Docker](https://img.shields.io/badge/Docker-2CA5E0?style=popout\u0026logo=docker\u0026logoColor=white)](https://www.docker.com/)\n[![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=popout\u0026logo=storybook\u0026logoColor=white)](https://storybook.js.org/)\n[![Cloudflare Pages](https://img.shields.io/badge/Cloudflare%20Pages-452FAD?style=popout\u0026logo=cloudflare\u0026logoColor=white)](https://pages.cloudflare.com/)\n\n## Getting Started\n\n1. Clone the repository\n2. Install dependencies:\n   ```bash\n   pnpm install\n   ```\n3. Set up environment variables:\n   ```bash\n   cp .env.local.example .env.local\n   ```\n4. Start the development server:\n   ```bash\n   pnpm dev\n   ```\n\nThe application will be available at [http://localhost:3001](http://localhost:3001)\n\n## Project Structure\n\n\u003cimg src=\"graph.png\" alt=\"Dependency graph\"\u003e\n\n```\nsrc/\n├── app/              # Next.js app router pages\n├── components/       # React components\n│   ├── todos/       # Todo-related components\n│   └── ui/          # UI components\n├── hooks/           # Custom React hooks\n├── lib/             # Utility functions\n├── types/           # TypeScript types\n└── styles/          # Global styles\n```\n\n## Development\n\n```sheell\n$ pnpm dev:fe # Starts types + web frontend\n```\n\n- [**Cmd-K**](https://react-cmdk.com/): Keyboard shortcuts to go around\n- **Code Formatting**: Uses Prettier\n- **Type Checking**: TypeScript strict mode\n- **Linting**: ESLint with Next.js config\n- **Testing**: (Coming soon)\n\n## Monorepo Commands\n\nThis project uses Turborepo for monorepo management. Here are the essential commands:\n\n### Package Management\n\n```bash\n# Add a package to web app\npnpm add \u003cpackage\u003e --filter @x-padlet/web\n\n# Add a dev dependency to web app\npnpm add -D \u003cpackage\u003e --filter @x-padlet/web\n\n# Install all dependencies (from root)\npnpm install\n\n# Install dependencies for web app only\npnpm install --filter @x-padlet/web\n\n# Update all dependencies\npnpm update\n\n# Update specific package\npnpm update \u003cpackage\u003e --filter @x-padlet/web\n```\n\n### Development\n\n```bash\n# Run dev server for web app\npnpm dev\n\n# Run storybook\npnpm storybook\n\n# Run both dev and storybook in parallel\npnpm dev \u0026 pnpm storybook\n```\n\n### Building\n\n```bash\n# Build all packages\npnpm build\n\n# Build web app only\npnpm build --filter @x-padlet/web\n\n# Starting\npnpm --filter @x-padlet/web start\n\n# Generate build dependency graph\nnpx turbo run build --graph=graph.png\n```\n\n### Linting and Formatting\n\n```bash\n# Lint all packages\npnpm lint\n\n# Lint web app only\npnpm lint --filter @x-padlet/web\n\n# Format all packages\npnpm format\n\n# Format web app only\npnpm format --filter @x-padlet/web\n```\n\n### Testing\n\n```bash\n# Run tests for all packages\npnpm test\n\n# Run tests for web app only\npnpm test --filter @x-padlet/web\n```\n\n### Cleaning\n\n```bash\n# Clean all packages\npnpm clean\n\n# Clean web app only\npnpm clean --filter @x-padlet/web\n```\n\n### Helpful Commands\n\n```bash\n# List all packages\npnpm list -r\n\n# Check for unused dependencies\npnpm knip\n```\n\n### Vercel deployment\n\n- \"Root directory is at https://vercel.com/daryllxds-projects/x-padlet/settings/build-and-deployment - should be apps/web, we cannot really change this in vercel.json\"\n\n\u003cdiv style=\"text-align: center;\"\u003e\n  \u003cimg src=\"apps/web/public/wow-pug.png\" alt=\"Poggers\" height=\"200\" width=\"200\" style=\"border-radius: 50%;\"\u003e\n  \u003cp\u003eThis is Poggers the Pug\u003c/p\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaryllxd%2Fx-padlet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaryllxd%2Fx-padlet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaryllxd%2Fx-padlet/lists"}