ca-grow-ops-manager/plans/tasks-week-1-infrastructure.md

# Tasks: Week 1 — Infrastructure Setup

**Plan**: Phase 1 Foundation  
**Week**: 1 of 6  
**Status**: Ready  
**Created**: 2025-12-08

---

## Overview

Week 1 focuses on setting up the development environment, project structure, and foundational tooling for both backend and frontend. By the end of this week, developers should be able to run the full stack locally with hot reload.

**Success Criteria**:

- ✅ Backend runs on `http://localhost:3000` with hot reload
- ✅ Frontend runs on `http://localhost:5173` with hot reload
- ✅ PostgreSQL database accessible
- ✅ Docker Compose brings up entire stack
- ✅ Linting and formatting configured
- ✅ Testing frameworks configured

---

## Task List

### Backend Setup

#### TASK-001: Initialize Backend Project

**Priority**: P0 (Blocker)  
**Estimated Time**: 1 hour  
**Assignee**: Backend Lead

**Description**: Create Node.js project with TypeScript and Fastify

**Steps**:

```bash
cd ca-grow-ops-manager
mkdir backend
cd backend
npm init -y
npm install fastify @fastify/cors @fastify/helmet @fastify/jwt
npm install -D typescript @types/node tsx nodemon
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier
npx tsc --init
```

**Acceptance Criteria**:

- [ ] `package.json` created with correct dependencies
- [ ] `tsconfig.json` configured for Node.js
- [ ] TypeScript compiles without errors
- [ ] Basic Fastify server runs on port 3000

**Files to Create**:

- `backend/package.json`
- `backend/tsconfig.json`
- `backend/src/server.ts` (basic Fastify server)
- `backend/src/app.ts` (Fastify app configuration)

---

#### TASK-002: Configure Prisma with PostgreSQL

**Priority**: P0 (Blocker)  
**Estimated Time**: 1.5 hours  
**Assignee**: Backend Lead  
**Depends On**: TASK-001

**Description**: Set up Prisma ORM with PostgreSQL connection

**Steps**:

```bash
cd backend
npm install prisma @prisma/client
npm install -D prisma
npx prisma init
```

**Acceptance Criteria**:

- [ ] Prisma schema file created (`prisma/schema.prisma`)
- [ ] Database connection string configured in `.env`
- [ ] Prisma Client generated
- [ ] Can connect to PostgreSQL database

**Files to Create**:

- `backend/prisma/schema.prisma`
- `backend/.env.example`
- `backend/.env` (gitignored)

**Prisma Schema (Initial)**:

```prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
```

---

#### TASK-003: Configure ESLint and Prettier (Backend)

**Priority**: P1  
**Estimated Time**: 30 minutes  
**Assignee**: Backend Lead  
**Depends On**: TASK-001

**Description**: Set up code quality tools for backend

**Acceptance Criteria**:

- [ ] ESLint configured for TypeScript
- [ ] Prettier configured
- [ ] `npm run lint` works
- [ ] `npm run format` works
- [ ] VS Code auto-formats on save

**Files to Create**:

- `backend/.eslintrc.json`
- `backend/.prettierrc`
- `backend/.prettierignore`

**ESLint Config**:

```json
{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}
```

---

#### TASK-004: Configure Jest for Backend Testing

**Priority**: P1  
**Estimated Time**: 1 hour  
**Assignee**: Backend Lead  
**Depends On**: TASK-001

**Description**: Set up Jest for unit and integration testing

**Steps**:

```bash
cd backend
npm install -D jest @types/jest ts-jest supertest @types/supertest
npx ts-jest config:init
```

**Acceptance Criteria**:

- [ ] Jest configured for TypeScript
- [ ] `npm test` runs tests
- [ ] Sample test passes
- [ ] Test coverage report generated

**Files to Create**:

- `backend/jest.config.js`
- `backend/src/__tests__/example.test.ts`

**Sample Test**:

```typescript
describe('Example Test', () => {
  it('should pass', () => {
    expect(1 + 1).toBe(2);
  });
});
```

---

#### TASK-005: Create Backend Docker Configuration

**Priority**: P1  
**Estimated Time**: 1 hour  
**Assignee**: Backend Lead  
**Depends On**: TASK-001, TASK-002

**Description**: Create Dockerfile and Docker Compose for backend

**Acceptance Criteria**:

- [ ] Dockerfile builds successfully
- [ ] Backend runs in Docker container
- [ ] Hot reload works in Docker
- [ ] Environment variables passed correctly

**Files to Create**:

- `backend/Dockerfile`
- `backend/Dockerfile.dev`
- `backend/.dockerignore`

**Dockerfile.dev**:

```dockerfile
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "run", "dev"]
```

---

### Frontend Setup

#### TASK-006: Initialize Frontend Project with Vite

**Priority**: P0 (Blocker)  
**Estimated Time**: 1 hour  
**Assignee**: Frontend Lead

**Description**: Create Vite + React + TypeScript project

**Steps**:

```bash
cd ca-grow-ops-manager
npm create vite@latest frontend -- --template react-ts
cd frontend
npm install
npm install react-router-dom
npm install -D @types/react-router-dom
```

**Acceptance Criteria**:

- [ ] Vite project created
- [ ] React + TypeScript configured
- [ ] Dev server runs on port 5173
- [ ] Hot reload works

**Files Created** (by Vite):

- `frontend/package.json`
- `frontend/tsconfig.json`
- `frontend/vite.config.ts`
- `frontend/src/main.tsx`
- `frontend/src/App.tsx`

---

#### TASK-007: Install and Configure Tailwind CSS

**Priority**: P0 (Blocker)  
**Estimated Time**: 1 hour  
**Assignee**: Frontend Lead  
**Depends On**: TASK-006

**Description**: Set up Tailwind CSS with custom design tokens

**Steps**:

```bash
cd frontend
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

**Acceptance Criteria**:

- [ ] Tailwind CSS configured
- [ ] Custom design tokens defined (colors, spacing, fonts)
- [ ] Dark mode configured
- [ ] Tailwind classes work in components

**Files to Create/Modify**:

- `frontend/tailwind.config.js`
- `frontend/postcss.config.js`
- `frontend/src/index.css`

**Tailwind Config**:

```javascript
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: '#10b981',
        secondary: '#3b82f6',
        danger: '#ef4444',
        warning: '#f59e0b',
        success: '#10b981',
      },
    },
  },
  plugins: [],
};
```

---

#### TASK-008: Set Up shadcn/ui Components

**Priority**: P1  
**Estimated Time**: 1.5 hours  
**Assignee**: Frontend Lead  
**Depends On**: TASK-007

**Description**: Install shadcn/ui and create base components

**Steps**:

```bash
cd frontend
npx shadcn-ui@latest init
npx shadcn-ui@latest add button
npx shadcn-ui@latest add input
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog
npx shadcn-ui@latest add dropdown-menu
```

**Acceptance Criteria**:

- [ ] shadcn/ui configured
- [ ] Base components installed (Button, Input, Card, Dialog, Dropdown)
- [ ] Components render correctly
- [ ] Dark mode works with components

**Files Created**:

- `frontend/components.json`
- `frontend/src/components/ui/button.tsx`
- `frontend/src/components/ui/input.tsx`
- `frontend/src/components/ui/card.tsx`
- etc.

---

#### TASK-009: Configure React Router

**Priority**: P1  
**Estimated Time**: 1 hour  
**Assignee**: Frontend Lead  
**Depends On**: TASK-006

**Description**: Set up React Router with basic routes

**Acceptance Criteria**:

- [ ] React Router configured
- [ ] Basic routes created (/, /login, /dashboard)
- [ ] Navigation works
- [ ] 404 page created

**Files to Create**:

- `frontend/src/router.tsx`
- `frontend/src/pages/HomePage.tsx`
- `frontend/src/pages/LoginPage.tsx`
- `frontend/src/pages/DashboardPage.tsx`
- `frontend/src/pages/NotFoundPage.tsx`

**Router Setup**:

```typescript
import { createBrowserRouter } from 'react-router-dom';
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import DashboardPage from './pages/DashboardPage';

export const router = createBrowserRouter([
  { path: '/', element: <HomePage /> },
  { path: '/login', element: <LoginPage /> },
  { path: '/dashboard', element: <DashboardPage /> },
  { path: '*', element: <NotFoundPage /> },
]);
```

---

#### TASK-010: Configure ESLint and Prettier (Frontend)

**Priority**: P1  
**Estimated Time**: 30 minutes  
**Assignee**: Frontend Lead  
**Depends On**: TASK-006

**Description**: Set up code quality tools for frontend

**Acceptance Criteria**:

- [ ] ESLint configured for React + TypeScript
- [ ] Prettier configured
- [ ] `npm run lint` works
- [ ] `npm run format` works
- [ ] VS Code auto-formats on save

**Files to Create**:

- `frontend/.eslintrc.json`
- `frontend/.prettierrc`
- `frontend/.prettierignore`

---

#### TASK-011: Configure Vitest for Frontend Testing

**Priority**: P1  
**Estimated Time**: 1 hour  
**Assignee**: Frontend Lead  
**Depends On**: TASK-006

**Description**: Set up Vitest and React Testing Library

**Steps**:

```bash
cd frontend
npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom
```

**Acceptance Criteria**:

- [ ] Vitest configured
- [ ] React Testing Library configured
- [ ] `npm test` runs tests
- [ ] Sample component test passes

**Files to Create**:

- `frontend/vite.config.ts` (add test config)
- `frontend/src/setupTests.ts`
- `frontend/src/components/__tests__/Button.test.tsx`

---

### Infrastructure & DevOps

#### TASK-012: Create Docker Compose Configuration

**Priority**: P0 (Blocker)  
**Estimated Time**: 2 hours  
**Assignee**: DevOps/Backend Lead  
**Depends On**: TASK-005, TASK-006

**Description**: Create Docker Compose for full stack (backend, frontend, db, redis)

**Acceptance Criteria**:

- [ ] `docker-compose up` starts all services
- [ ] Backend accessible at `http://localhost:3000`
- [ ] Frontend accessible at `http://localhost:5173`
- [ ] PostgreSQL accessible at `localhost:5432`
- [ ] Redis accessible at `localhost:6379`
- [ ] Hot reload works for backend and frontend

**Files to Create**:

- `docker-compose.yml`
- `docker-compose.dev.yml`

**Docker Compose**:

```yaml
version: '3.8'

services:
  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_USER: ca_grow_ops
      POSTGRES_PASSWORD: dev_password
      POSTGRES_DB: ca_grow_ops_dev
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

  redis:
    image: redis:7-alpine
    ports:
      - "6379:6379"

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgresql://ca_grow_ops:dev_password@db:5432/ca_grow_ops_dev
      REDIS_URL: redis://redis:6379
      NODE_ENV: development
    volumes:
      - ./backend:/app
      - /app/node_modules
    depends_on:
      - db
      - redis

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    environment:
      VITE_API_URL: http://localhost:3000/api
    volumes:
      - ./frontend:/app
      - /app/node_modules
    depends_on:
      - backend

volumes:
  postgres_data:
```

---

#### TASK-013: Create Git Repository and .gitignore

**Priority**: P0 (Blocker)  
**Estimated Time**: 30 minutes  
**Assignee**: Any Developer

**Description**: Initialize Git repository with proper .gitignore files

**Acceptance Criteria**:

- [ ] Git repository initialized
- [ ] `.gitignore` files created for root, backend, frontend
- [ ] Initial commit made
- [ ] Remote repository created (GitHub/GitLab)

**Files to Create**:

- `.gitignore` (root)
- `backend/.gitignore`
- `frontend/.gitignore`

**Root .gitignore**:

```
node_modules/
.env
.env.local
*.log
.DS_Store
dist/
build/
coverage/
```

---

#### TASK-014: Create VS Code Workspace Settings

**Priority**: P2  
**Estimated Time**: 30 minutes  
**Assignee**: Any Developer

**Description**: Configure VS Code for optimal DX

**Acceptance Criteria**:

- [ ] Workspace settings configured
- [ ] Recommended extensions listed
- [ ] Auto-format on save enabled
- [ ] ESLint integration working

**Files to Create**:

- `.vscode/settings.json`
- `.vscode/extensions.json`

**VS Code Settings**:

```json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}
```

---

#### TASK-015: Create README Files

**Priority**: P2  
**Estimated Time**: 1 hour  
**Assignee**: Any Developer

**Description**: Update README files with setup instructions

**Acceptance Criteria**:

- [ ] Root README updated with quick start
- [ ] Backend README updated
- [ ] Frontend README updated
- [ ] Docker Compose instructions included

**Files to Update**:

- `README.md` (root)
- `backend/README.md`
- `frontend/README.md`

---

## Task Dependencies

```
TASK-001 (Backend Init)
  ├─> TASK-002 (Prisma)
  ├─> TASK-003 (ESLint/Prettier)
  ├─> TASK-004 (Jest)
  └─> TASK-005 (Docker)

TASK-006 (Frontend Init)
  ├─> TASK-007 (Tailwind)
  │     └─> TASK-008 (shadcn/ui)
  ├─> TASK-009 (React Router)
  ├─> TASK-010 (ESLint/Prettier)
  └─> TASK-011 (Vitest)

TASK-005 + TASK-006
  └─> TASK-012 (Docker Compose)

TASK-013 (Git) - No dependencies
TASK-014 (VS Code) - No dependencies
TASK-015 (READMEs) - After all setup tasks
```

---

## Verification Checklist

At the end of Week 1, verify:

### Backend

- [ ] `cd backend && npm install` works
- [ ] `npm run dev` starts server on port 3000
- [ ] `npm run lint` passes
- [ ] `npm test` passes
- [ ] Prisma Client generated
- [ ] Can connect to PostgreSQL

### Frontend

- [ ] `cd frontend && npm install` works
- [ ] `npm run dev` starts server on port 5173
- [ ] `npm run lint` passes
- [ ] `npm test` passes
- [ ] Tailwind classes work
- [ ] shadcn/ui components render

### Docker

- [ ] `docker-compose up` starts all services
- [ ] Backend accessible at <http://localhost:3000>
- [ ] Frontend accessible at <http://localhost:5173>
- [ ] Hot reload works for both

### Git

- [ ] Repository initialized
- [ ] Initial commit made
- [ ] Remote repository connected

---

## Estimated Total Time

**Backend**: 6 hours  
**Frontend**: 6.5 hours  
**Infrastructure**: 3 hours  
**Total**: ~15.5 hours (2 days for 1 developer, or 1 day for 2 developers)

---

## Next Steps

After completing Week 1 tasks:

1. **Review** all setup with the team
2. **Test** full stack locally
3. **Proceed to Week 2**: Authentication & RBAC