Painting Analyzer

A full-stack web application that provides deep analysis of classical paintings, including art movement context, color theory, thematic interpretation, storytelling elements, and esoteric symbolism. Built with modern web technologies and a clean, glassmorphic UI inspired by the original single-page art gallery.

Tech Stack

Frontend

• Next.js 14 with App Router and React 18
• TypeScript for type safety and better developer experience
• Tailwind CSS for utility-first styling with custom glassmorphism effects
• SWR for efficient data fetching and caching
• Next.js Image for optimized image loading

Backend

• .NET 8 with ASP.NET Core Web API
• Entity Framework Core 8 for ORM
• Pomelo.EntityFrameworkCore.MySql for MySQL integration
• Swashbuckle/Swagger for API documentation

Database

• MySQL 8.0+ with a relational schema supporting paintings, movements, analyses, and annotations

Project Overview

Purpose

The Painting Analyzer transforms a static art gallery into an interactive learning platform, allowing users to explore classical paintings through multiple analytical lenses. Each painting includes detailed annotations and five types of analysis: movement context, color composition, themes, storytelling, and esoteric symbolism.

Frontend Architecture

• App Router Structure: Pages for gallery, about, and dynamic painting details
• Component-Based Design: Reusable components for navigation, search, cards, tabs, and annotations
• Type Safety: Full TypeScript definitions mirroring backend DTOs
• Responsive UI: Glassmorphic design with dark theme and smooth interactions
• API Integration: SWR hooks for seamless data fetching with loading/error states

Backend Architecture

• RESTful API: Clean endpoints for paintings, analyses, and annotations
• Data Models: EF Core entities with proper relationships and navigation properties
• DTOs: Transfer objects optimized for frontend consumption
• CORS Support: Configured for local development with the Next.js frontend
• Database Context: Configured for MySQL with proper table mappings

Database Schema

The MySQL database includes:

• movements: Art movements with characteristics
• paintings: Core painting metadata linked to movements
• color_analyses, theme_analyses, storytelling_analyses, esoteric_messages: Detailed analysis tables
• annotation_markers: Interactive markers for painting annotations

API Endpoints

Paintings

• GET /api/paintings - Paginated list with search and filtering
• GET /api/paintings/{id} - Detailed painting information
• GET /api/paintings/{id}/annotations - Annotation markers for a painting

Analyses

• GET /api/analysis/{paintingId}/movement - Movement analysis
• GET /api/analysis/{paintingId}/color - Color analysis
• GET /api/analysis/{paintingId}/theme - Theme analysis
• GET /api/analysis/{paintingId}/storytelling - Storytelling analysis
• GET /api/analysis/{paintingId}/esoteric - Esoteric analysis

Getting Started

Prerequisites

• .NET 8 SDK
• Node.js 18+
• MySQL 8.0+

Backend Setup

1. Clone and navigate to the backend directory:

   cd backend/ArtAnalyzerApi

2. Restore dependencies:

   dotnet restore

3. Configure appsettings.Development.json with your MySQL connection string
4. Run the API:

   dotnet run

   The API will be available at http://localhost:5000

Frontend Setup

1. Clone and navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Create .env.local with:

   NEXT_PUBLIC_API_BASE_URL=http://localhost:5000
   

4. Run the development server:

   npm run dev

   The frontend will be available at http://localhost:3002

Database Setup

1. Create the MySQL database:

   CREATE DATABASE art_analyzer;

2. Run the schema and seed scripts from the database/ directory

Features

• Gallery View: Searchable and filterable grid of paintings
• Detailed Analysis: Five analytical perspectives for each painting
• Interactive Annotations: Hover over markers to reveal insights
• Responsive Design: Works seamlessly on desktop and mobile
• Type Safety: End-to-end TypeScript integration
• Modern UI: Glassmorphic effects with smooth transitions

Development Notes

• The frontend uses SWR for optimistic UI updates and caching
• CORS is configured to allow the frontend running on localhost:3002
• The API includes Swagger documentation at /swagger
• Database migrations can be added using EF Core tools if needed
• The project structure separates concerns between API, data, and models

License

This project demonstrates full-stack development capabilities and educational content integration. Feel free to use it as a reference for similar applications.