ClassiAd – Classified Ads Website Template

🎉 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 StructurePublic 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 StackFrontend

- 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 StartedPrerequisites

- Node.js 18.17 or later

- pnpm (recommended) or npm

Installation

```bash

# Install dependencies

pnpm install

# Set up environment variables

cp apps/nextjs/example.env apps/nextjs/.env.local

# Start development server

pnpm 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