NicheWriterTools.com

A high-performance, SEO-optimized affiliate review website built with Next.js 14, showcasing AI writing tool reviews and comparisons.

📸 Screenshots

Modern homepage with hero section, stats, and featured reviews

Advanced search and filter system with comprehensive reviews

Detailed review page with ratings, pros/cons, and pricing

✨ Features

• ⚡ Next.js 14 with App Router for optimal performance
• 🎨 Modern UI with TailwindCSS and ShadCN UI components
• 🌓 Dark/Light Mode with smooth theme transitions
• 🔍 Advanced Search & Filter - Real-time filtering by category, price, rating
• 📧 Newsletter Signup with lead magnet integration
• ⭐ Social Proof - Testimonials and trust indicators
• 📊 Google Analytics 4 integration ready
• 🔍 SEO Optimized with structured data, meta tags, and sitemap
• 📱 Fully Responsive mobile-first design
• ✨ Smooth Animations powered by Framer Motion
• 📝 13 Comprehensive Reviews with pros, cons, pricing, and FAQs
• 🔗 Affiliate Management centralized in JSON files
• 🚀 Performance First - Lighthouse 90+ score goal

🎯 Production-Ready Features

This is a complete, production-ready affiliate review website with:

Core Features

• ✅ 13 Comprehensive Tool Reviews (Koala AI, Jasper, Writesonic, Copy.ai, Grammarly, Rytr, Notion AI, ChatGPT Plus, Claude Pro, Wordtune, QuillBot, Frase.io, Surfer SEO)
• ✅ Theme Toggle - Light/Dark mode with smooth transitions
• ✅ Advanced Search & Filter - Real-time filtering by category, price, rating, and sorting
• ✅ Newsletter Signup - Lead capture with free guide offer
• ✅ Testimonials Section - Social proof with 6 user testimonials
• ✅ Google Analytics 4 - Full tracking integration ready
• ✅ SEO Optimized - Sitemap, meta tags, Open Graph, Twitter Cards
• ✅ Mobile Responsive - Perfect on all devices
• ✅ Performance Optimized - 87.2 kB First Load JS

Content

• 28 Static Pages generated
• 13 Tool Reviews with detailed pros/cons, pricing, FAQs
• 2 Comparison Pages with side-by-side features
• Multiple Category Pages for easy navigation
• Trust Indicators - 50K+ users, 4.9/5 rating stats

Ready to Deploy

• ✅ Build tested and passing
• ✅ TypeScript type-safe
• ✅ Zero ESLint errors
• ✅ Production build optimized
• ✅ Vercel/Netlify ready

🛠 Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: TailwindCSS + ShadCN UI
• Typography: Plus Jakarta Sans (modern Google Font)
• Icons: Lucide React
• Animation: Framer Motion
• Theme: next-themes (dark/light mode)
• Analytics: Google Analytics 4
• Deployment: Vercel (recommended)

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository: ```bash git clone https://github.com/yourusername/nichewritertools.git cd nichewritertools ```

2. Install dependencies: ```bash npm install

or

yarn install ```

3. Create environment file: ```bash cp .env.example .env.local ```

4. Run the development server: ```bash npm run dev

or

yarn dev ```

5. Open http://localhost:3000 in your browser

Project Structure

``` ├── app/ # Next.js app directory │ ├── (routes)/ # Page routes │ ├── globals.css # Global styles │ └── layout.tsx # Root layout ├── components/ # React components │ ├── ui/ # Base UI components │ ├── layout/ # Layout components │ ├── home/ # Homepage components │ ├── reviews/ # Review components │ └── affiliates/ # Affiliate components ├── data/ # JSON data files │ ├── affiliates.json # Affiliate links │ ├── reviews.json # Review content │ └── comparisons.json # Tool comparisons ├── lib/ # Utility functions ├── types/ # TypeScript types └── public/ # Static assets ```

Content Management

Adding a New Review

Edit `data/reviews.json` and add a new review object:

```json { "slug": "tool-name-review", "title": "Tool Name Review 2025", "excerpt": "Brief description...", "rating": 4.5, "pros": ["Pro 1", "Pro 2"], "cons": ["Con 1"], "affiliate": "Tool Name", "content": "

Full review content...

", "image": "/images/tool-review.jpg", "category": "ai-writing" } ```

Adding an Affiliate

Edit `data/affiliates.json`:

```json { "name": "Tool Name", "status": "approved", "url": "https://affiliate-link.com", "coupon": "DISCOUNT20", "description": "Tool description", "logo": "/images/tool-logo.png", "category": "ai-writing" } ```

Deployment

Deploy to Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Configure environment variables
4. Deploy!

The site will automatically redeploy on every push to main.

Build for Production

```bash npm run build npm run start ```

Performance Optimization

• Image Optimization: Uses Next.js Image component
• Static Generation: Pages are pre-rendered at build time
• ISR: Reviews revalidate every hour
• Code Splitting: Automatic route-based splitting
• Font Optimization: Self-hosted Google Fonts

SEO Features

• Dynamic meta tags for every page
• Open Graph and Twitter Card support
• Structured data (Schema.org) for reviews
• Automatic sitemap generation
• Robots.txt configuration
• Semantic HTML structure

License

MIT License - feel free to use this project for your own affiliate sites!

Author

Created by Wesley Jones

• Website: nichewritertools.com
• Email: hello@nichewritertools.com

Acknowledgments

• Built with Next.js
• UI components from ShadCN UI
• Icons by Lucide