Home

Next.js Templates

ClassiAd – Classified Ads Website Template

ClassiAd – Classified Ads Website Template

React, Next.js, and HTML Versions Included

product_thumbnail
Commercial Bundle$NaN$18 Lifetime
Include Nextjs Version
Include React JS Version
Include HTML/Tailwind Version

Version

1.0.0

Updated

Jun 29, 2025

Published

Jun 29, 2025
DescriptionDocumentation

🎉 ClassiAd V1.0.0

We're excited to announce the first stable release of ClassiAd - a modern, full-featured classified ads platform built with cutting-edge web technologies!

🚀 What is ClassiAd?

ClassiAd is a comprehensive web application designed for creating, managing, and browsing classified advertisements. Built with Next.js 15, React 19, and Material UI, it offers a modern, responsive, and accessible user experience with powerful internationalization and theming capabilities.

✨ Key Features

🌍 Internationalization (i18n)

  • Multi-language support with English and French out of the box
  • Dynamic locale routing (/en, /fr)
  • RTL/LTR text direction support for global accessibility
  • Seamless language switching without page reload

🔐 Authentication & Security

  • Secure authentication powered by NextAuth v5
  • Protected routes for dashboard and user-specific content
  • Public routes for browsing and general information
  • Session management with automatic token handling

🎨 Customizable User Experience

  • Light/Dark theme switching with system preference detection
  • Dynamic primary color selection (Blue, Green, Red, Purple, Orange, Teal)
  • Adjustable border radius for UI components (4px, 8px, 16px, etc.)
  • Font size customization for accessibility
  • Animation speed controls (Slow, Normal, Fast)
  • Compact mode for dense layouts
  • Reduced motion support for accessibility
  • Persistent settings saved in localStorage

🏗️ Robust Architecture

  • Next.js 15 App Router with server-side rendering
  • Redux Toolkit for state management
  • TypeScript for type safety
  • Material UI (MUI) for consistent design system
  • Monorepo structure with pnpm workspaces
  • Component-driven development with reusable UI components

📱 Application Structure

Public Pages

  • Homepage - Hero section with search and category browsing
  • Listings - Browse and search classified ads
  • Categories - Organized ad categories and subcategories
  • About, Contact, Help - Company information and support
  • Authentication - Sign in, sign up, password reset
  • Legal - Terms, Privacy, GDPR, Cookies policies
  • Blog - Content management system
  • Pricing - Service plans and features

Protected Dashboard

  • Overview - Dashboard with statistics and quick actions
  • My Ads - Manage user's classified advertisements
  • Messages - Communication between buyers and sellers
  • Favorites - Saved ads and wishlist management
  • Profile - User account settings and information
  • Settings - UI preferences and application configuration

Advanced Features

  • Search & Filtering - Advanced search with multiple criteria
  • Post Ad - Rich ad creation form with image uploads
  • Seller Profiles - User reputation and ad history
  • Responsive Design - Mobile-first, works on all devices
  • Performance Optimized - Static generation, optimized images
  • SEO Friendly - Meta tags, structured data, sitemap

🛠️ Technical Stack

Frontend

  • Next.js 15 - React framework with App Router
  • React 19 - Latest React with concurrent features
  • TypeScript - Static type checking
  • Material UI (MUI) 7 - Design system and components
  • Emotion - CSS-in-JS styling
  • Framer Motion - Smooth animations and transitions

State Management

  • Redux Toolkit - Predictable state container
  • React Context - Theme and authentication context
  • localStorage - Settings persistence

Internationalization

  • next-intl - Type-safe internationalization
  • Custom routing - Locale-based navigation
  • Message management - Organized translation files

Development Tools

  • ESLint & Prettier - Code formatting and linting
  • Turbo - Monorepo build system
  • pnpm - Fast, efficient package manager

🎯 Target Use Cases

  • Personal Marketplaces - Buy and sell personal items
  • Business Classifieds - B2B and B2C advertisements
  • Real Estate Listings - Property rentals and sales
  • Job Boards - Employment opportunities
  • Service Directories - Local business listings
  • Community Boards - Local community announcements

🚦 Getting Started

Prerequisites

  • Node.js 18.17 or later
  • pnpm (recommended) or npm

Installation

1# Install dependencies 2pnpm install 3 4# Set up environment variables 5cp apps/nextjs/example.env apps/nextjs/.env.local 6 7# Start development server 8pnpm run dev

Environment Setup

Configure your .env.local file with:

  • Database connection strings
  • Authentication providers (Google, GitHub, etc.)
  • Email service configuration
  • File upload settings

🌟 What's New in v1.0.0

🎨 Theme System Enhancements

  • Fixed border radius theming - Now properly uses pixel values (4px, 8px, 16px)
  • Global theme integration - All dashboard components respect theme settings
  • Improved consistency - Unified theming across all UI components

🏗️ Core Platform

  • Complete application foundation with authentication, routing, and state management
  • Full dashboard implementation with ads, messages, favorites, and settings
  • Comprehensive public pages with listings, categories, and information pages
  • Responsive design that works seamlessly on desktop, tablet, and mobile

🌍 Internationalization

  • English and French language support
  • RTL/LTR direction handling for international markets
  • Locale-aware routing with automatic detection

⚡ Performance & SEO

  • Static page generation for optimal loading speeds
  • SEO optimization with proper meta tags and structured data
  • Image optimization with Next.js Image component
  • Code splitting for efficient bundle sizes

📚 Documentation

  • README.md - Project overview and setup instructions
  • API Documentation - Available in /docs folder
  • Component Library - Storybook documentation (planned)
  • Deployment Guide - Vercel, Docker, and self-hosting options

🤝 Contributing

We welcome contributions from the community! Please check our:

  • Contributing Guidelines - How to submit issues and pull requests
  • Code of Conduct - Community standards and expectations
  • Development Setup - Local development environment setup

🙏 Acknowledgments

Special thanks to the open-source community and the maintainers of:

  • Next.js team for the incredible framework
  • Material UI team for the design system
  • Redux team for state management tools
  • All contributors and beta testers