isGlitch.com - Satirical Tech News Site

Brock

Brock Penner

isGlitch.com

Where satire meets silicon and the truth isn't binary.
A satirical tech news website built with Next.js 15, featuring modern web technologies and a focus on performance, accessibility, and user experience.

๐Ÿš€ Features

Modern Next.js 15 with App Router and TypeScript
Responsive Design with Tailwind CSS and dark/light theme support
Dynamic Article Management with tag-based filtering and search
RSS Feed with automatic caching and New York timezone handling
SEO Optimized with Open Graph and Twitter Card support
Social Integration with share buttons and social media links
E-commerce Integration with Etsy store promotion
Cookie Consent Management with granular preferences
Exit Intent Marketing with image carousel
Contact Form with Web3Forms integration
Performance Optimized with Next.js Image optimization and caching

๐Ÿ› ๏ธ Tech Stack

Framework: Next.js 15 with React 19
Styling: Tailwind CSS with custom dark mode
Typography: Tailwind Typography plugin
Icons: Lucide React
Markdown: React Markdown

๐Ÿ“ฆ Installation

Clone the repository:
git clone https://github.com/yourusername/isglitch-next.git
cd isglitch-next
Install dependencies:
npm install
# or
yarn install
# or
pnpm install
Set up environment variables:
cp .env.example .env.local
Required environment variables:
NEXT_PUBLIC_CONTACT_FORM_KEY - Web3Forms API key for contact form
Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
Open http://localhost:3000 to view the site.

๐Ÿ“ Project Structure

โ”œโ”€โ”€ app/                    # Next.js App Router pages
โ”‚ โ”œโ”€โ”€ api/ # API routes
โ”‚ โ”œโ”€โ”€ article/ # Individual article pages
โ”‚ โ”œโ”€โ”€ author/ # Author profile pages
โ”‚ โ”œโ”€โ”€ search/ # Search results pages
โ”‚ โ””โ”€โ”€ [category]/ # Category pages
โ”œโ”€โ”€ components/ # React components
โ”œโ”€โ”€ data/ # Static data (articles, authors)
โ”œโ”€โ”€ lib/ # Utility functions and configurations
โ”‚ โ””โ”€โ”€ theme/ # Theme management
โ”œโ”€โ”€ public/ # Static assets
โ””โ”€โ”€ tests/ # Test files

๐ŸŽจ Key Components

Article Management

Dynamic article fetching with timezone-aware publishing
Tag-based categorization and search functionality
Author profiles with biographical information
SEO-optimized metadata generation

Theme System

System preference detection with manual override
Smooth transitions between light and dark modes
Tailwind CSS integration with custom color schemes

Navigation

Responsive sidebar with category dropdowns
Tag-based navigation with dynamic tag loading
Pagination for article listings

Marketing Features

Exit intent detection with image carousel
Cookie consent management with granular controls
Social media integration and sharing
Etsy store integration with product rotation

๐Ÿงช Testing

Run the test suite:
npm run test
# or
npm run test:watch # Watch mode
npm run test:ui # UI mode
npm run test:coverage # Coverage report

๐Ÿ“ˆ Performance Features

Image Optimization: Next.js Image component with responsive sizing
Caching Strategy: RSS feed caching based on publication schedule
Static Generation: Pre-generated static pages for articles and authors
Code Splitting: Automatic code splitting with Next.js
Lazy Loading: Components and images loaded on demand

๐Ÿ”ง Configuration

Tailwind CSS

Custom configuration with:
Dark mode support (class strategy)
Custom color palette for light/dark themes
Typography plugin for article content
Responsive breakpoints

ESLint

Next.js recommended configuration with TypeScript support.

TypeScript

Strict mode enabled with:
Path aliases (@/* pointing to root)
Next.js plugin integration
Comprehensive type definitions

๐Ÿš€ Deployment

The site is optimized for Vercel deployment:
Connect your repository to Vercel
Set environment variables in Vercel dashboard
Deploy automatically on push to main branch
For other platforms, build the production version:
npm run build
npm start

๐Ÿ“Š Analytics

The site includes:
Metricool tracking integration
RSS feed analytics
Performance monitoring ready

๐Ÿค Contributing

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

๐Ÿ“ Content Management

Articles and authors are managed through static data files:
data/articles.ts - Article content and metadata
data/authors.ts - Author profiles and biographies
New York timezone is used for all publication scheduling.

๐Ÿ”’ Privacy & Security

GDPR-compliant cookie consent management
Honeypot protection on contact forms
Secure external link handling
Content Security Policy ready

๐Ÿ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

๐Ÿ™‹โ€โ™‚๏ธ Support

For support, email us through the contact form on the website or open an issue in this repository.
isGlitch.com - The online-est of tech rags. ๐Ÿค–โœจ
Like this project

Posted Jun 2, 2025

Built a satirical tech news site with Next.js 15, focusing on performance and user experience.