Washington State PCO Guide

A modern, accessible website designed to educate young voters in Washington State about Precinct Committee Officers (PCOs) and local political engagement opportunities.

🌟 About This Project

This website serves as an educational resource for Washington State residents, particularly young voters (18-24), to learn about:

• What Precinct Committee Officers (PCOs) are and what they do
• How to become a PCO
• Party platform comparisons
• Finding your precinct
• Resources for civic engagement

🎯 Target Audience

• Young voters in Washington State
• People interested in local politics
• Anyone wanting to understand civic engagement

🏛️ Key Features

• Accessibility First: WCAG compliant with screen reader support
• Responsive Design: Works on all devices (mobile, tablet, desktop)
• Washington State Branding: Custom green and gold color scheme
• Interactive Elements: Typing animations, hover effects, parallax backgrounds
• Educational Content: Clear, informative explanations of PCO roles

🚀 Quick Start Guide

Prerequisites

Before you begin, make sure you have the following installed:

• Node.js (version 18 or higher) - Download here
• npm (comes with Node.js) or pnpm (recommended)

Step 1: Clone the Repository

git clone https://github.com/BUVKAUSHIK/TVW-PCO.git
cd TVW-PCO

Step 2: Install Dependencies

npm install
# OR if you prefer pnpm (faster):
pnpm install

Step 3: Run the Development Server

npm run dev
# OR with pnpm:
pnpm dev

Step 4: Open Your Browser

Open http://localhost:3000 in your browser to see the website!

📁 Project Structure

pco-website/
├── app/                    # Next.js pages and layouts
│   ├── page.tsx           # Homepage
│   ├── layout.tsx         # Main layout
│   ├── globals.css        # Global styles
│   ├── what-is-pco/       # PCO information page
│   ├── become-pco/        # How to become a PCO
│   ├── party-platforms/   # Party platform comparisons
│   ├── find-precinct/     # Precinct finder
│   └── resources/         # Educational resources
├── components/            # Reusable UI components
│   ├── ui/               # shadcn/ui components
│   └── theme-provider.tsx
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions
├── public/               # Static assets (images, logos)
└── styles/               # Additional styles

🛠️ Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🎨 Technology Stack

Frontend

• Next.js 15 - React framework with App Router
• React 19 - Latest React version
• TypeScript - Type safety and better development experience
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible UI primitives

Design System

• Custom Washington State Colors: Green and gold theme
• Inter Font - Clean, readable typography
• Responsive Design - Mobile-first approach
• Accessibility - WCAG 2.1 AA compliant

Key Libraries

• Lucide React - Beautiful icons
• React Hook Form - Form handling
• Zod - Schema validation
• Sonner - Toast notifications

🌐 Website Pages

1. Homepage (/)

• Hero section with typing animation
• Statistics about young voter engagement
• Quick navigation cards
• Washington State map background

2. What is a PCO? (/what-is-pco)

• Detailed explanation of PCO roles
• Responsibilities and duties
• Community impact examples

3. Party Platforms (/party-platforms)

• Democratic and Republican platform comparisons
• Key issue positions
• Non-partisan educational content

4. Become a PCO (/become-pco)

• Step-by-step guide to becoming a PCO
• Requirements and qualifications
• Application process

5. Find Your Precinct (/find-precinct)

• Interactive precinct locator
• PCO vacancy information
• Contact details

6. Resources (/resources)

• Educational materials
• FAQ section
• Additional links and references

♿ Accessibility Features

• Screen Reader Support: ARIA labels and semantic HTML
• Keyboard Navigation: Full keyboard accessibility
• High Contrast Mode: Support for high contrast preferences
• Reduced Motion: Respects user motion preferences
• Skip Navigation: Quick access to main content
• Focus Management: Proper focus indicators

🎯 Development Guidelines

Code Style

• Use TypeScript for type safety
• Follow ESLint rules
• Use Tailwind CSS for styling
• Implement accessibility best practices

Component Structure

• Use functional components with hooks
• Implement proper error boundaries
• Follow React best practices
• Use semantic HTML elements

Performance

• Optimize images and assets
• Implement lazy loading
• Use Next.js optimization features
• Minimize bundle size

🚀 Deployment

Vercel (Recommended)

1. Connect your GitHub repository to Vercel
2. Vercel will automatically detect Next.js
3. Deploy with one click

Netlify

1. Build the project: npm run build
2. Deploy the out folder to Netlify

Manual Deployment

1. Build: npm run build
2. Start: npm run start
3. Deploy to your preferred hosting service

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Make your changes
4. Commit: git commit -m 'Add feature'
5. Push: git push origin feature-name
6. Submit a pull request

📝 License

This project is for educational purposes and civic engagement in Washington State.

📞 Support

If you have questions or need help:

• Check the FAQ section on the website
• Review the resources page
• Contact local party organizations

🙏 Acknowledgments

• Washington State Democratic Party
• Washington State Republican Party
• Local civic engagement organizations
• Accessibility advocates and testers

---

Built with ❤️ for Washington State voters

Empowering young voters to understand and engage with local politics through accessible education about Precinct Committee Officer roles.