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.
- 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
- Framework: Next.js 15 with React 19
- Styling: Tailwind CSS with custom dark mode
- Typography: Tailwind Typography plugin
- Icons: Lucide React
- Markdown: React Markdown
- 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.localRequired 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 devOpen http://localhost:3000 to view the site.
├── 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
- Dynamic article fetching with timezone-aware publishing
- Tag-based categorization and search functionality
- Author profiles with biographical information
- SEO-optimized metadata generation
- System preference detection with manual override
- Smooth transitions between light and dark modes
- Tailwind CSS integration with custom color schemes
- Responsive sidebar with category dropdowns
- Tag-based navigation with dynamic tag loading
- Pagination for article listings
- Exit intent detection with image carousel
- Cookie consent management with granular controls
- Social media integration and sharing
- Etsy store integration with product rotation
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- 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
Custom configuration with:
- Dark mode support (
classstrategy) - Custom color palette for light/dark themes
- Typography plugin for article content
- Responsive breakpoints
Next.js recommended configuration with TypeScript support.
Strict mode enabled with:
- Path aliases (
@/*pointing to root) - Next.js plugin integration
- Comprehensive type definitions
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 startThe site includes:
- Metricool tracking integration
- RSS feed analytics
- Performance monitoring ready
- 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
Articles and authors are managed through static data files:
data/articles.ts- Article content and metadatadata/authors.ts- Author profiles and biographies
New York timezone is used for all publication scheduling.
- GDPR-compliant cookie consent management
- Honeypot protection on contact forms
- Secure external link handling
- Content Security Policy ready
This project is licensed under the MIT License - see the LICENSE file for details.
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. 🤖✨