🐶 Puglet

One of the todo list applications of all time

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

Getting Started

1. Clone the repository
2. Install dependencies:

   pnpm install

3. Set up environment variables:

   cp .env.local.example .env.local

4. Start the development server:

   pnpm dev

The application will be available at 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

$ pnpm dev:fe # Starts types + web frontend

• Cmd-K: 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

# Add a package to web app
pnpm add <package> --filter @x-padlet/web

# Add a dev dependency to web app
pnpm add -D <package> --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 <package> --filter @x-padlet/web

Development

# Run dev server for web app
pnpm dev

# Run storybook
pnpm storybook

# Run both dev and storybook in parallel
pnpm dev & pnpm storybook

Building

# 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

# 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

# Run tests for all packages
pnpm test

# Run tests for web app only
pnpm test --filter @x-padlet/web

Cleaning

# Clean all packages
pnpm clean

# Clean web app only
pnpm clean --filter @x-padlet/web

Helpful Commands

# 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