Premium printing solutions website built with modern web technologies.

Website: https://parasgraphics.com (or your deployment URL)

• Features
• Tech Stack
• Quick Start
• Development
• Testing
• Building
• Deployment
• Contributing
• Documentation

• ✅ Responsive Design - Mobile-first, works on all devices
• ✅ High Performance - Lazy loading, code splitting, optimized images
• ✅ Accessible - WCAG 2.1 AA compliant
• ✅ SEO Optimized - Structured data, meta tags, sitemap
• ✅ CMS Integration - Sanity CMS for content management
• ✅ Beautiful UI - Tailwind CSS + shadcn/ui components
• ✅ Dark Mode - Built-in dark theme support
• ✅ Contact Forms - Secure form handling with validation
• ✅ Portfolio Showcase - Filterable portfolio items
• ✅ Service Listings - Categorized services display

• React 18.3 - UI library
• TypeScript 5.4 - Type safety
• Vite 7.1 - Build tool and dev server
• Tailwind CSS 3.4 - Utility-first styling
• Framer Motion - Smooth animations

• Sanity CMS 4.10 - Content management
• React Query 5.90 - Data fetching and caching

• shadcn/ui - Accessible component library
• Radix UI - Unstyled, accessible components
• Lucide Icons - Beautiful icons

• Vitest 3.2 - Unit testing
• React Testing Library - Component testing
• ESLint - Code quality
• Prettier - Code formatting

• GitHub Actions - CI/CD pipeline
• GitHub Pages - Hosting

• Node.js v20 or higher
• npm v10 or higher
• Git

# Clone the repository
git clone <repository-url>
cd printperfect-pg

# Install dependencies
npm install

# Setup environment variables
cp .env.example .env.local
# Edit .env.local with your Sanity credentials

# Start development server
npm run dev

Open http://localhost:8080 in your browser.

# Development server
npm run dev

# Type checking
npm run typecheck

# Linting
npm run lint

# Testing
npm run test          # Watch mode
npm run test -- --run # Single run
npm run test:coverage # With coverage report

# Building
npm run build

# Preview production build
npm run preview

# Sanity CMS dev
npm run sanity:dev

src/
├── components/       # React components
│   ├── ui/          # shadcn/ui components
│   └── magicui/     # Custom UI components
├── pages/           # Page components
├── hooks/           # Custom React hooks
├── lib/             # Utility functions
├── config/          # Configuration
├── types/           # TypeScript definitions
├── assets/          # Images and static files
├── cms/             # Sanity queries
└── integrations/    # Third-party integrations

This project includes:

• ✅ ESLint configuration for code quality
• ✅ Prettier configuration for consistent formatting
• ✅ Pre-commit hooks with Husky
• ✅ TypeScript strict mode
• ✅ Accessibility checks

# Format code
npx prettier --write 'src/**/*.{ts,tsx,css,js}'

# Check formatting
npm run format:check

# Run all tests
npm run test

# Run specific test file
npm run test -- Contact.test.tsx

# Watch mode
npm run test

# Coverage report
npm run test:coverage

• Portfolio.test.tsx - Portfolio component tests
• Lightbox.test.tsx - Lightbox component tests
• ServicesGrid.test.tsx - Services grid tests
• Contact.test.tsx - Contact form tests
• Header.test.tsx - Header navigation tests

# Production build
npm run build

# Preview build output
npm run preview

# Check bundle size
npm run build
# Review dist/ folder

Build output is in the dist/ directory, optimized for production.

git push origin main
# Deployment runs automatically via GitHub Actions

For detailed deployment instructions, see DEPLOYMENT.md

• GitHub Pages (included)
• Vercel
• Netlify
• Docker/Self-hosted

• DEVELOPMENT.md - Development setup and workflow
• DEPLOYMENT.md - Deployment procedures
• PROJECT_AUDIT_REPORT.md - Comprehensive project analysis

1. Create a feature branch: git checkout -b feature/your-feature
2. Make your changes
3. Run tests: npm run test -- --run
4. Run linting: npm run lint
5. Commit with clear message: git commit -m 'feat: add your feature'
6. Push and create a Pull Request

type(scope): subject

feat: add new feature
fix: fix a bug
docs: update documentation
test: add tests
chore: update dependencies

• Lighthouse Score: 90+
• Bundle Size: ~280KB uncompressed (~80KB gzipped)
• Lazy Loading: Images and components
• Code Splitting: Automatic route-based splitting
• Caching: QueryClient optimized

• WCAG 2.1 AA compliant
• Keyboard navigation
• Screen reader support
• Color contrast verified
• Semantic HTML

• Content Security Policy headers
• No hardcoded secrets
• Environment variable isolation
• Form validation and sanitization
• Honeypot bot protection

• Cyan: Primary accent
• Magenta: Secondary accent
• Yellow: Tertiary accent
• Charcoal: Dark neutral

• Headings: Montserrat
• Body: Inter, Poppins

• Tailwind CSS default spacing scale
• Responsive breakpoints (sm, md, lg, xl, 2xl)
• Flexible grid system

• Report issues on GitHub Issues
• Check existing issues before creating new ones
• Include reproduction steps for bugs

This project is licensed under the MIT License - see LICENSE.md

Paras Graphics
Ahmedabad, India

Last Updated: October 2024
Project Status: Active Development