https://github.com/daryllxd/x-padlet
My attempt at cloning Padlet
https://github.com/daryllxd/x-padlet
drag-and-drop nextjs react socket-io
Last synced: 2 months ago
JSON representation
My attempt at cloning Padlet
- Host: GitHub
- URL: https://github.com/daryllxd/x-padlet
- Owner: daryllxd
- License: mit
- Created: 2025-03-30T17:15:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-23T06:39:25.000Z (about 1 year ago)
- Last Synced: 2025-04-23T07:31:45.029Z (about 1 year ago)
- Topics: drag-and-drop, nextjs, react, socket-io
- Language: TypeScript
- Homepage: https://puglet.daryll.codes
- Size: 60.4 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🐶 Puglet
One of the todo list applications of all time
[](https://puglet.daryll.codes)
[](https://x-padlet.vercel.app)
[](https://puglet-chronicles.daryll.codes) [](https://x-padlet.pages.dev)
[](https://www.linkedin.com/in/daryll-santos/)
## What's it do?
I wanted to create a side project that would keep track of things + to learn and re-learn some front-end concepts!
## Tech Stack
[](https://nextjs.org/)
[](https://reactjs.org/)
[](https://tanstack.com/query/latest)
[](https://ui.shadcn.com/)
[](https://tailwindcss.com/)
[](https://atlassian.design/components/pragmatic-drag-and-drop/)
[](https://mswjs.io/)
[](https://aws.amazon.com/)
[](https://aws.amazon.com/s3/)
[](https://aws.amazon.com/cloudfront/)
[](https://www.namecheap.com/)
[](https://www.postgresql.org/)
[](https://supabase.com/)
[](https://redis.io/)
[](https://pnpm.io/)
[](https://www.typescriptlang.org/)
[](https://eslint.org/)
[](https://prettier.io/)
[](https://typicode.github.io/husky/)
[](https://www.docker.com/)
[](https://storybook.js.org/)
[](https://pages.cloudflare.com/)
## Getting Started
1. Clone the repository
2. Install dependencies:
```bash
pnpm install
```
3. Set up environment variables:
```bash
cp .env.local.example .env.local
```
4. Start the development server:
```bash
pnpm dev
```
The application will be available at [http://localhost:3001](http://localhost:3001)
## Project Structure
```
src/
├── app/ # Next.js app router pages
├── components/ # React components
│ ├── todos/ # Todo-related components
│ └── ui/ # UI components
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── types/ # TypeScript types
└── styles/ # Global styles
```
## Development
```sheell
$ pnpm dev:fe # Starts types + web frontend
```
- [**Cmd-K**](https://react-cmdk.com/): Keyboard shortcuts to go around
- **Code Formatting**: Uses Prettier
- **Type Checking**: TypeScript strict mode
- **Linting**: ESLint with Next.js config
- **Testing**: (Coming soon)
## Monorepo Commands
This project uses Turborepo for monorepo management. Here are the essential commands:
### Package Management
```bash
# Add a package to web app
pnpm add --filter @x-padlet/web
# Add a dev dependency to web app
pnpm add -D --filter @x-padlet/web
# Install all dependencies (from root)
pnpm install
# Install dependencies for web app only
pnpm install --filter @x-padlet/web
# Update all dependencies
pnpm update
# Update specific package
pnpm update --filter @x-padlet/web
```
### Development
```bash
# Run dev server for web app
pnpm dev
# Run storybook
pnpm storybook
# Run both dev and storybook in parallel
pnpm dev & pnpm storybook
```
### Building
```bash
# Build all packages
pnpm build
# Build web app only
pnpm build --filter @x-padlet/web
# Starting
pnpm --filter @x-padlet/web start
# Generate build dependency graph
npx turbo run build --graph=graph.png
```
### Linting and Formatting
```bash
# Lint all packages
pnpm lint
# Lint web app only
pnpm lint --filter @x-padlet/web
# Format all packages
pnpm format
# Format web app only
pnpm format --filter @x-padlet/web
```
### Testing
```bash
# Run tests for all packages
pnpm test
# Run tests for web app only
pnpm test --filter @x-padlet/web
```
### Cleaning
```bash
# Clean all packages
pnpm clean
# Clean web app only
pnpm clean --filter @x-padlet/web
```
### Helpful Commands
```bash
# List all packages
pnpm list -r
# Check for unused dependencies
pnpm knip
```
### Vercel deployment
- "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"
This is Poggers the Pug