T9 Pixel Perfect

A modern, headless CMS-powered website built with Next.js 15 and Storyblok, featuring pixel-perfect design implementation and optimized performance.

🚀 Project Overview

T9 Pixel Perfect is a cutting-edge web application that demonstrates best practices in modern web development. Built with Next.js 15's latest features and powered by Storyblok's headless CMS, it delivers exceptional performance, SEO optimization, and content management capabilities.

🛠 Tech Stack

Core Technologies

• Framework: Next.js 15.5.2 (App Router)
• Runtime: React 19.1.0
• Language: TypeScript 5
• Styling: Tailwind CSS 4
• CMS: Storyblok (Headless CMS)

Development Tools

• Linting: ESLint 9 with Next.js config
• Formatting: Prettier 3.6.2
• Git Hooks: Husky + lint-staged
• Commit Standards: Commitlint (Conventional Commits)
• Package Manager: npm

Key Libraries

• Carousel: Keen Slider 6.8.6
• Environment: dotenv 17.2.2
• Build Tool: tsx 4.20.5

📋 Features & Progress

✅ Implemented Features

• Headless CMS Integration: Full Storyblok integration with type-safe components
• Dynamic Routing: Catch-all routes with ISR (Incremental Static Regeneration)
• Component Architecture: Modular, reusable React components
• Type Safety: Auto-generated TypeScript types from Storyblok schema (storyblok.generated.ts)
• Performance Optimization: ISR with 600-second revalidation
• SEO Ready: Meta tags, structured data, and optimized loading
• Responsive Design: Mobile-first approach with Tailwind CSS
• Development Workflow: Automated linting, formatting, and commit standards

🧩 Available Components

• Page: Root page renderer with dynamic content
• Header: Navigation with responsive design
• Footer: Site footer with links and branding
• Teaser: Content teaser blocks
• Testimonials: Customer testimonial carousel
• Case Studies: Portfolio showcase
• CTA: Call-to-action sections

🎨 Design System

• Custom Color Palette: Brand colors with CSS custom properties
• Typography: Inter (sans-serif) and Playfair Display (serif) fonts
• Dark Mode: Class-based dark mode support
• Responsive Breakpoints: Mobile-first responsive design

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Storyblok account and space

Installation

1. Clone the repository

   git clone https://github.com/vdipinto/t9-pixel-perfect.git
   cd t9-pixel-perfect

2. Install dependencies

   npm install

3. Environment Setup Create a .env.local file in the root directory:

   NEXT_PUBLIC_STORYBLOK_CONTENT_API_ACCESS_TOKEN=your_storyblok_token_here
   SB_REGION=eu  # or 'us' for US region

4. Generate TypeScript Types

   npm run gen:sb-types

   This creates src/types/storyblok.generated.ts with type-safe interfaces for all your Storyblok components.

Running Locally

1. Start the development server

   npm run dev

2. Open your browser Navigate to http://localhost:3000

3. Build for production

   npm run build
   npm start

🏗 Development Approach

Architecture

• App Router: Next.js 15 App Router for modern routing
• Server Components: Optimized server-side rendering
• Component Composition: Modular, reusable component architecture
• Type Safety: End-to-end TypeScript with auto-generated types

Content Management

• Headless CMS: Storyblok for content management
• Dynamic Content: Real-time content updates without deployments
• Visual Editor: In-context editing capabilities
• Asset Management: Optimized image and media handling

Performance Strategy

• ISR: Incremental Static Regeneration for optimal performance
• Code Splitting: Automatic code splitting with Next.js
• Image Optimization: Next.js Image component with lazy loading
• Bundle Analysis: Optimized bundle sizes

Development Workflow

• Git Hooks: Automated linting and formatting on commit
• Conventional Commits: Standardized commit messages
• Type Generation: Automated TypeScript types from CMS schema
• Hot Reload: Fast development with Next.js dev server

🗺 Roadmap & TODOs

🎯 Short Term (Next Sprint)

• Performance Audit: Lighthouse score optimization
• SEO Enhancement: Meta tags, structured data, sitemap
• Error Handling: Global error boundaries and 404 pages
• Loading States: Skeleton loaders and loading indicators
• Accessibility: WCAG 2.1 AA compliance audit

🚀 Medium Term (Next Month)

• Analytics Integration: Google Analytics 4 setup
• Search Functionality: Full-text search implementation
• Internationalization: Multi-language support (i18n)
• Progressive Web App: PWA features and offline support
• Advanced Animations: Framer Motion integration

🌟 Long Term (Next Quarter)

• E-commerce Integration: Product catalog and checkout
• User Authentication: User accounts and personalization
• Advanced CMS Features: Custom field types and workflows
• Performance Monitoring: Real-time performance tracking
• A/B Testing: Content experimentation platform

🔧 Technical Debt

• Test Coverage: Unit and integration tests
• Documentation: Component documentation with Storybook
• CI/CD Pipeline: Automated testing and deployment
• Security Audit: Security best practices implementation
• Bundle Optimization: Advanced code splitting strategies

📚 Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server

# Code Quality
npm run lint         # Run ESLint
npm run gen:sb-types # Generate Storyblok TypeScript types

# Git Workflow
npm run prepare      # Setup Husky git hooks

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is private and proprietary. All rights reserved.

---

Built with ❤️ using Next.js 15 and Storyblok