Merge pull request #44 from pennlabs/james/linting-setup

set up pre-commit hook for linting

Author: jamesdoh0109

.pre-commit-config.yaml

@@ -0,0 +1,81 @@
+# Pre-commit hooks configuration for Penn Marketplace
+# See https://pre-commit.com for more information
+#
+# Setup: pip install pre-commit && pre-commit install
+# Or:    cd backend && uv run pre-commit install
+#
+# Run manually: pre-commit run --all-files
+# Run same checks as CI: ./scripts/check.sh
+
+repos:
+  # =============================================================================
+  # General file checks (fast, always run)
+  # =============================================================================
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.6.0
+    hooks:
+      - id: trailing-whitespace
+        exclude: ^(.*\.lock|.*\.min\.js|.*\.min\.css)
+      - id: end-of-file-fixer
+        exclude: ^(.*\.lock|.*\.min\.js|.*\.min\.css)
+      - id: check-yaml
+      - id: check-json
+      - id: check-toml
+      - id: check-added-large-files
+        args: ['--maxkb=1000']
+
+  # =============================================================================
+  # Backend: Python formatting and linting
+  # =============================================================================
+  # Note: CI uses ruff format (not Black), so we match that in pre-commit
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    rev: v0.8.4
+    hooks:
+      - id: ruff
+        name: ruff check (Python linter)
+        files: ^backend/.*\.py$
+        args: ['--fix']  # Auto-fix what can be fixed
+      - id: ruff-format
+        name: ruff format (Python formatter)
+        files: ^backend/.*\.py$
+        # Auto-formats (standard pre-commit behavior)
+
+  # =============================================================================
+  # Frontend: Formatting and linting via local commands
+  # (Uses your installed pnpm/node for better compatibility)
+  # =============================================================================
+  - repo: local
+    hooks:
+      - id: frontend-prettier
+        name: prettier (frontend)
+        entry: bash -c 'cd frontend && pnpm format'
+        language: system
+        files: ^frontend/.*\.(ts|tsx|js|jsx|json|css|md)$
+        pass_filenames: false
+        # Auto-formats (standard pre-commit behavior)
+
+      - id: frontend-eslint
+        name: eslint (frontend)
+        entry: bash -c 'cd frontend && pnpm lint:fix'
+        language: system
+        files: ^frontend/.*\.(ts|tsx|js|jsx)$
+        pass_filenames: false
+        # Auto-fixes what can be fixed
+
+      - id: frontend-typecheck
+        name: TypeScript type check (frontend)
+        entry: bash -c 'cd frontend && pnpm typecheck'
+        language: system
+        files: ^frontend/.*\.(ts|tsx)$
+        pass_filenames: false
+        # Type checking (whole project, but runs on commit)
+
+# =============================================================================
+# Notes:
+# - Pre-commit hooks AUTO-FIX issues (convenient for developers)
+# - check.sh only CHECKS (use --fix flag to auto-fix)
+# - TypeScript type checking runs in both pre-commit and check.sh
+# - CI doesn't run TypeScript explicitly (Next.js build catches type errors)
+# - CI uses ruff format (not Black), so pre-commit matches that
+# - Frontend: CI and pre-commit both use pnpm
+# =============================================================================

README.md

@@ -4,14 +4,22 @@ A secure platform where Penn students can buy/sell items and browse/post sublet
 
 ## 1. Requirements
 
-This project uses **Docker** for the entire development environment.
+**App runtime is Docker-first.**
 
-Install:
+You do not need Python, Node, Postgres, or Redis installed locally to run the app.
 
-- Docker Desktop  
-- Git  
+### Required for Development
 
-You **do not** need Python, Node, Postgres, or Redis installed locally. It is also **not** a requirement that you have `pnpm` and `uv` (our dependency managers for frontend and backend, respectively) installed locally. All of these are not required *as long as* you are running all commands inside Docker containers using `docker compose exec <service> <cmd>` (more explained below).
+- **Docker Desktop** - For running the app
+- **Git** - Version control
+
+### Recommended for Local Development
+
+We use pre-commit hooks to automatically run formatters, linters, and type checks before every commit.
+To use them, you must install these tools locally:
+
+- [uv](https://docs.astral.sh/uv/getting-started/installation/) - Python package manager
+- [pnpm](https://pnpm.io/installation) - Node.js package manager
 
 ### Environment Variables
 
@@ -20,8 +28,7 @@ You will need environment variable files for both the backend and frontend:
 - `backend/.env`
 - `frontend/.env`
 
-Make sure these files are configured before running the application. If you are a member of PennLabs, you can
-reach out to one of them for the credentials.
+Make sure these files are configured before running the application. If you are a member of PennLabs, you can reach out to one of them for the credentials.
 
 ## 2. Clone the Repository
 
@@ -30,21 +37,36 @@ git clone https://github.com/pennlabs/penn-marketplace.git
 cd penn-marketplace
 ```
 
+## 3. Setup (One Time)
+
+**Run this on your local machine (not in Docker):**
+
+```bash
+./scripts/setup.sh
+```
+
+**What this does:**
+1. Checks if you have `uv` and `pnpm` installed locally
+2. Installs backend Python dependencies locally (creates `backend/.venv/`)
+3. Installs frontend Node dependencies locally (creates `frontend/node_modules/`)
+4. Installs pre-commit hooks in your local `.git/hooks/` directory
+
+**Note:** If you don't have `uv` or `pnpm` installed locally, the script will tell you how to install them.
 
-## 3. Start the Development Environment
+## 4. Start the Development Environment
 
 ```bash
 docker compose up --build
 ```
 
 This will:
 
-- Build backend & frontend Docker images  
-- Start Postgres + Redis  
-- Run Django migrations  
+- Build backend & frontend Docker images
+- Start Postgres + Redis
+- Run Django migrations
 - Launch:
-  - Frontend → http://localhost:3000  
-  - Backend → http://localhost:8000  
+  - Frontend → http://localhost:3000
+  - Backend → http://localhost:8000
 
 Stop:
 
@@ -59,8 +81,45 @@ Remove DB/storage volumes:
 docker compose down -v
 ```
 
+## 5. Code Quality
+
+### Running Checks
+
+You can run the full check script by:
+
+```bash
+./scripts/check.sh
+```
+
+To auto-fix formatting issues:
+
+```bash
+./scripts/check.sh --fix
+```
+
+### What Gets Checked
+
+| Area | Checks |
+|------|--------|
+| **Frontend** | Lint (pnpm), TypeScript typecheck |
+| **Backend** | ruff check, ruff format |
+
+### Pre-Commit Hooks
+
+If you ran `./scripts/setup.sh`, pre-commit hooks are installed. They automatically format and lint your code when you run `git commit`.
+
+**What hooks do:**
+- Auto-fix Python code formatting (ruff format)
+- Auto-fix Python code linting (ruff check --fix)
+- Auto-fix TypeScript/JavaScript code formatting (Prettier)
+- Auto-fix TypeScript/JavaScript code linting (ESLint --fix)
+- Check TypeScript types (pnpm typecheck)
+- Auto-fix trailing whitespace, file endings
+
+**Note:** Hooks auto-fix issues when possible. TypeScript type checking can't be auto-fixed, so the commit is blocked if there are type errors.
+
+## 6. Generating Test Data (optional)
 
-## 4. Generating Test Data (optional)
 To populate the database with random sample listings for testing:
 ```bash
 docker compose exec backend python manage.py generate_listings
@@ -75,21 +134,20 @@ Use this to quickly test the marketplace UI and features with realistic data.
 
 **Note:** Make sure `docker compose up` is running before executing this command, as you need the backend container and database to be active.
 
-
-## 5. Hot Reload
+## 7. Hot Reload
 
 ### Frontend (Next.js)
 
-- Edit files in `frontend/`  
-- Next.js refreshes automatically  
+- Edit files in `frontend/`
+- Next.js refreshes automatically
 
 ### Backend (Django)
 
-- Edit files in `backend/`  
-- Django dev server auto-reloads  
+- Edit files in `backend/`
+- Django dev server auto-reloads
 
 
-## 6. Running Migrations
+## 8. Running Migrations
 
 ### When YOU change models in `models.py`:
 
@@ -112,12 +170,12 @@ docker compose up
 
 Migrations are applied automatically on startup.
 
-> ⚠️ **You must run BOTH commands when changing models.**  
+> ⚠️ **You must run BOTH commands when changing models.**
 > `makemigrations` creates the migration file, `migrate` applies it to the database.
 
 
 
-## 7. Installing New Packages
+## 9. Installing New Packages
 
 ### Backend (Python • uv)
 
@@ -148,21 +206,15 @@ docker compose up
 ```
 
 **Option 3: Use uv CLI (if you have uv installed locally)**
-
-1. Install package:
 ```bash
-   cd backend
-   uv add <package>
-   cd ..
-```
-
-2. Rebuild container:
-```bash
-   docker compose build backend
-   docker compose up
+cd backend
+uv add <package>
+cd ..
+docker compose build backend
+docker compose up
 ```
 
-> ⚠️ **Always rebuild after changing dependencies.**  
+> ⚠️ **Always rebuild after changing dependencies.**
 > The `uv.lock` file must be synchronized with your Docker image.
 
 ### Frontend (Node • pnpm)
@@ -191,4 +243,4 @@ pnpm add <package>
 cd ..
 docker compose build frontend
 docker compose up
-```
+```

backend/config/asgi.py

@@ -11,6 +11,7 @@
 
 from django.core.asgi import get_asgi_application
 
+
 os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
 
 application = get_asgi_application()

backend/config/settings/base.py

@@ -1,9 +1,11 @@
 """
 Base settings shared across all environments
 """
+
 import os
 from pathlib import Path
 
+
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent.parent
 
@@ -26,9 +28,8 @@
     "django.contrib.staticfiles",
     "rest_framework",
     "market",
-
     # DLA for authentication management
-    'accounts.apps.AccountsConfig',
+    "accounts.apps.AccountsConfig",
 ]
 
 MIDDLEWARE = [
@@ -67,7 +68,9 @@
 
 AUTH_PASSWORD_VALIDATORS = [
     {
-        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
+        "NAME": (
+            "django.contrib.auth.password_validation.UserAttributeSimilarityValidator"
+        ),
     },
     {
         "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
@@ -120,4 +123,4 @@
 TWILIO_ACCOUNT_SID = os.environ.get("TWILIO_ACCOUNT_SID", "")
 TWILIO_AUTH_TOKEN = os.environ.get("TWILIO_AUTH_TOKEN", "")
 TWILIO_PHONE_NUMBER = os.environ.get("TWILIO_PHONE_NUMBER", "")
-PHONE_VERIFICATION_CODE_EXPIRY_MINUTES=10
+PHONE_VERIFICATION_CODE_EXPIRY_MINUTES = 10

backend/config/settings/development.py

@@ -1,19 +1,20 @@
 """
 Dev settings - for local development with docker-compose
 """
-from .base import *
+
 import dj_database_url
 
+from .base import *
+
+
 DEBUG = True
 
-ALLOWED_HOSTS = ['localhost', '127.0.0.1', 'backend']
+ALLOWED_HOSTS = ["localhost", "127.0.0.1", "backend"]
 
 # Database
 # https://docs.djangoproject.com/en/5.0/ref/settings/#databases
 
-DATABASES = {
-    "default": dj_database_url.config()
-}
+DATABASES = {"default": dj_database_url.config()}
 
 # Redis - from docker-compose
 REDIS_URL = os.environ.get("REDIS_URL", "redis://redis:6379/0")
@@ -37,4 +38,4 @@
 CORS_ALLOWED_ORIGINS = [
     "http://localhost:3000",
     "http://127.0.0.1:3000",
-]
+]

backend/config/settings/production.py

@@ -1,9 +1,12 @@
 """
 Production settings
 """
-from .base import *
+
 import dj_database_url
 
+from .base import *
+
+
 DEBUG = False
 
 ALLOWED_HOSTS = os.environ.get("ALLOWED_HOSTS", "").split(",")
@@ -44,5 +47,5 @@
 CSRF_COOKIE_SECURE = True
 SECURE_BROWSER_XSS_FILTER = True
 SECURE_CONTENT_TYPE_NOSNIFF = True
-X_FRAME_OPTIONS = 'DENY'
-SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
+X_FRAME_OPTIONS = "DENY"
+SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")