Appliance Repair Service Platform

A modern, content-driven platform for connecting users with local appliance repair professionals and providing troubleshooting guides for major home appliances

Features

Dynamic Appliance Support: Browse and get help for refrigerators, washers, dryers, dishwashers, ovens, microwaves, cooktops, and more.
Find Local Providers: Enter your ZIP code or select your state to view local repair listings.
Problem & Troubleshooting Guides: Step-by-step guides for common appliance issues, including DIY tips and when to call a pro.
SEO Optimized: Each page includes dynamic SEO metadata for better search engine visibility.
Reusable UI Components: Modular React components for listings, CTAs, features, and more.
Content Management: All appliance, problem, and troubleshooting content is managed centrally in JSON for easy updates.

Project Overview

A modern, content-driven Next.js platform for connecting users with local appliance repair professionals and providing comprehensive troubleshooting guides for major home appliances. Built as a freelance project by Jiwan Ghosal at Appliance Repairly.

Architecture

This is a Next.js 15 application with React 19, utilizing a content-management driven approach where all appliance data, problems, and troubleshooting guides are centrally managed through JSON files for easy updates and scalability.

Technology Stack

Frontend Framework:

Next.js 15.2.4 - React framework with SSR/SSG capabilities
React 19.1.0 - Latest React with concurrent features
Tailwind CSS 4.1.4 - Utility-first CSS framework
Sass 1.86.3 - CSS preprocessor for advanced styling

Development & Build Tools:

ESLint 9.24.0 - Code linting and quality
PostCSS 8.5.3 - CSS processing pipeline
Autoprefixer - Automatic vendor prefixes
Bundle Analyzer - Performance optimization
Next Sitemap - Automatic sitemap generation

Utilities & Libraries:

Axios 1.9.0 - HTTP client for API calls
Lodash 4.17.21 - JavaScript utility library
Prop Types - Runtime type checking

Root Directory Structure

appliance2025/
├── src/                           # Main source code
│   ├── components/               # Reusable UI components
│   ├── pages/                   # Next.js pages (routing)
│   ├── utils/                   # Utilities and content management
│   ├── wrapper/                 # Layout wrappers
│   ├── hooks/                   # Custom React hooks
│   ├── context/                 # React context providers
│   ├── apis/                    # API integration layer
│   ├── lib/                     # External library configurations
│   ├── assets/                  # Static assets
│   └── styles/                  # Global styles and SCSS
├── public/                       # Public static files
│   ├── favicon.ico
│   ├── sitemap.xml
│   └── robots.txt
├── .next/                       # Next.js build output
├── node_modules/                # Dependencies
├── package.json                 # Project dependencies and scripts
├── next.config.js               # Next.js configuration
├── next-sitemap.config.mjs      # Sitemap generation config
├── postcss.config.mjs           # PostCSS configuration
├── jsconfig.json                # JavaScript/paths configuration
├── build-deploy.sh              # Deployment script
├── bitbucket-pipelines.yml      # CI/CD pipeline
├── .env                         # Environment variables
└── README.md                    # Project documentation

Detailed Source Structure

Pages Architecture (`src/pages/`)

Next.js file-based routing with dynamic and static pages:

pages/
├── _app.js                      # Global app wrapper
├── _document.js                 # Custom document structure
├── _index.js                    # Index redirect
├── 404.js                       # Custom 404 page
├── home/                        # Homepage components
├── [repairSlug]/               # Dynamic appliance repair pages
│   ├── index.js                # Main appliance page
│   ├── [problemSlug].js        # Specific problem pages
│   └── [...troubleshootingSlug].js # Nested troubleshooting guides
├── location/                    # Location-based pages
│   ├── [state].js              # State-specific listings
│   └── [state]/[city].js       # City-specific listings
├── l/                          # Short URL location pages
├── find-repair/                # Repair finder functionality
├── services/                   # All services overview
├── contact/                    # Contact page
├── about/                      # About page
├── blog/                       # Blog section
├── api/                        # API routes
│   ├── location.js            # Location API
│   ├── contact.js             # Contact form API
│   └── sitemap.js             # Dynamic sitemap
├── privacy-policy/             # Legal pages
├── terms-of-service/
├── ccpa-notice/
└── brand-disclaimer/

Components Library (`src/components/`)

Modular, reusable React components:

components/
├── index.js                     # Component exports
├── Autocomplete/               # Location autocomplete
├── BlogCard/                   # Blog post cards
├── Breadcrumb/                 # Navigation breadcrumbs
├── Button/                     # Reusable button components
├── Checkbox/                   # Form checkbox inputs
├── ConfirmationPopup/          # Modal confirmations
├── ContactUsForm/              # Contact form component
├── Coverage/                   # Service coverage display
├── Cta/                        # Call-to-action components
├── Features/                   # Feature listing components
├── Footer/                     # Site footer
├── GoogleMap/                  # Map integration
├── Header/                     # Site header and navigation
├── HeroHome/                   # Homepage hero section
├── Image/                      # Optimized image component
├── Input/                      # Form input components
├── ListingCard/                # Provider listing cards
├── Loader/                     # Loading indicators
├── Modal/                      # Modal dialog component
├── Pagination/                 # Results pagination
├── ProviderCard/               # Service provider cards
├── Rating/                     # Star rating component
├── SearchBox/                  # Search functionality
├── SeoHead/                    # SEO meta tags
├── ServiceCard/                # Service offering cards
├── Svg/                        # SVG icon components
├── Tag/                        # Content tags
├── TestimonialCard/            # Customer testimonials
├── Text/                       # Typography components
├── TrustedBy/                  # Brand trust indicators
├── ZipCode/                    # ZIP code input
└── [Additional components]/

Content Management (`src/utils/Content/`)

Centralized content management system:

utils/Content/
├── PageContent.json            # Main appliance content database
│   ├── APPLIANCES              # All appliance types and problems
│   ├── PROBLEMS                # Common appliance issues
│   └── TROUBLESHOOTING         # Step-by-step guides
├── BlogContent.json            # Blog posts and articles
├── LocationContent.js          # Cities, states, service areas
└── index.js                    # Content utility functions

Utilities & Configuration (`src/utils/`)

utils/
├── Content/                    # Content management (above)
├── SEOMapping.js               # Dynamic SEO metadata
├── States.js                   # US states data
├── CommonUtils.js              # Shared utility functions
└── Constant.js                 # Application constants

Layout Wrappers (`src/wrapper/`)

wrapper/
├── index.js                    # Wrapper exports
├── AppLayoutWrapper/           # Main app layout
│   ├── index.js
│   └── AppLayoutWrapper.js
└── PageWrapper/                # Individual page wrapper
    ├── index.js
    └── PageWrapper.js

API Integration (`src/apis/`)

apis/
├── index.js                    # API exports
├── commonAPI.js                # Shared API functions
└── [additional API modules]

Custom Hooks (`src/hooks/`)

hooks/
├── [Custom React hooks for:
├── - Location detection
├── - Form handling
├── - SEO management
├── - Content fetching
└── - State management]

Key Features & Functionality

Content-Driven Architecture

JSON-based content management for easy updates without code changes
Dynamic page generation for appliances, problems, and troubleshooting
SEO-optimized content with dynamic meta tags and structured data

Location-Based Services

ZIP code lookup for local service providers
State and city pages for local SEO
Google Maps integration for provider locations
Autocomplete location search

Appliance Support System

Comprehensive appliance database (refrigerators, washers, dryers, etc.)
Problem categorization with symptom-based navigation
Step-by-step troubleshooting guides
When to call a professional recommendations

SEO & Performance

Dynamic sitemap generation with next-sitemap
Optimized meta tags for each page type
Bundle analysis for performance monitoring
Server-side rendering for better SEO

User Experience Features

Responsive design with Tailwind CSS
Fast search and filtering
Contact forms with validation
Provider ratings and reviews
Blog system for content marketing

Development Workflow

Available Scripts

# Development
npm run dev              # Start development server
npm run debug            # Debug mode with Node inspector

# Building
npm run build            # Production build
npm run start            # Start production server
npm run postbuild        # Generate sitemap after build

# Quality & Analysis
npm run lint             # Run ESLint
npm run analyze          # Bundle size analysis

# Deployment
npm run deploy           # Run deployment script
sh build-deploy.sh       # Manual deployment

Environment Setup

Prerequisites: Node.js 18+, npm
Installation: npm install
Environment: Configure .env file
Development: npm run dev
Access: http://localhost:3000

Content Management

Adding New Appliances

Edit src/utils/Content/PageContent.json:

{
  "APPLIANCES": {
    "new_appliance_repair": {
      "title": "New Appliance Repair Services",
      "subTitle": "Description...",
      "topics": [
        // Content structure
      ]
    }
  }
}

Adding New Problems

Add problem definitions with troubleshooting steps and when to call professionals.

SEO Management

Update src/utils/SEOMapping.js for new pages:

export const SEO_MAPPING = {
  '/new-page': {
    title: 'Page Title',
    description: 'Meta description',
    keywords: 'relevant, keywords'
  }
};

Deployment & CI/CD

Bitbucket Pipelines

Automated builds on code push
Environment-specific deployments
Quality checks and testing

Build Process

Dependency installation
ESLint code quality checks
Next.js production build
Sitemap generation
Bundle analysis (optional)
Deployment to hosting

Performance Optimizations

Next.js Features

Static Site Generation (SSG) for content pages
Server Side Rendering (SSR) for dynamic content
Image optimization with Next.js Image component
Code splitting for optimized loading

SEO Optimizations

Dynamic meta tags based on content
Structured data for rich snippets
Automatic sitemap generation
Optimized URL structure

Business Logic

Service Provider Connection

Lead generation through ZIP code forms
Local provider matching
Phone call routing for immediate service
Contact form submissions

Content Strategy

Problem-solution focused content structure
Local SEO through location pages
Educational content to build trust
Brand disclaimers for legal compliance

Technology Highlights

Modern Stack Benefits

React 19 with latest concurrent features
Next.js 15 with improved performance
Tailwind CSS 4 for rapid UI development
JSON-driven content for non-developer updates

Scalability Features

Component-based architecture
Content separation from code
API-ready structure for future integrations
Modular design for easy feature additions

Project: Appliance Repair Service Platform
Developer: Jiwan Ghosal
Website: Appliance Repairly
Framework: Next.js 15 + React 19
Styling: Tailwind CSS 4
Content Management: JSON-based system

Appliance Repair Service Platform

nextdotjs/black/white

react

nodedotjs

json/black/white

tailwindcss

axios

npm

pm2

digitalocean

lighthouse

bitbucket

Eslint

Prettier

github/black/white

Features

Dynamic Appliance Support: Browse and get help for refrigerators, washers, dryers, dishwashers, ovens, microwaves, cooktops, and more.

Find Local Providers: Enter your ZIP code or select your state to view local repair listings.

Problem & Troubleshooting Guides: Step-by-step guides for common appliance issues, including DIY tips and when to call a pro.

SEO Optimized: Each page includes dynamic SEO metadata for better search engine visibility.

Reusable UI Components: Modular React components for listings, CTAs, features, and more.

Content Management: All appliance, problem, and troubleshooting content is managed centrally in JSON for easy updates.