Psie Przedszkole

Dog training school website with Next.js frontend and ASP.NET Core API backend. Built as client demo, currently archived.

Overview

Professional website for a dog training school in Warsaw/Zielonka area (Poland) featuring:

• Frontend: Next.js 14+ with Server Components and JSON-based CMS
• Backend: ASP.NET Core 8.0 Minimal API with JWT authentication
• Content Management: File-based CMS with JSON storage (no database)
• Blog: MDX support with Contentlayer

Status: Demo project - functional but development discontinued.

Features

Frontend (Next.js)

• Server-side rendering with no-cache (instant content updates)
• JSON-based content management (CMS-ready architecture)
• Dynamic offer pages (/oferta/[slug])
• MDX blog with syntax highlighting
• SEO-optimized with 301 redirects from old URLs
• Dark/light theme with no flash on load
• Mobile-responsive navigation with dropdowns
• Photo gallery with lightbox
• Contact form integration

Backend (ASP.NET Core)

• JWT authentication with HTTP-only cookies
• BCrypt password hashing
• SMTP email sending (MailKit)
• File-based JSON storage
• Image upload with validation
• MDX file generation for blog posts
• Role-based access control (mod, admin)

Tech Stack

Frontend (pp-web)

• Next.js 14+ - App Router, Server Components
• TypeScript 5.0 - Type safety
• Tailwind CSS - Utility-first styling
• Contentlayer - MDX blog posts
• KBar - Command palette search
• Fancybox - Image lightbox

Backend (pp-api)

• ASP.NET Core 8.0 - Minimal API
• JWT - Authentication tokens
• BCrypt.Net - Password hashing
• MailKit - SMTP email client
• System.Text.Json - JSON serialization

Project Structure

psie-przedszkole/
├── pp-web/                 # Next.js frontend
│   ├── app/[locale]/       # Pages (Polish only, locale for future expansion)
│   ├── components/         # React components
│   ├── data/blog/          # MDX blog posts
│   ├── layouts/            # Page layouts
│   └── public/static/      # Static assets
├── pp-api/                 # ASP.NET Core API
│   ├── Controllers/        # API endpoints
│   ├── Models/             # DTOs and entities
│   └── Services/           # Business logic
├── content/                # JSON CMS files
│   ├── settings.json       # Navigation, site config
│   ├── common.json         # UI labels and translations
│   ├── contact.json        # Contact info, address, map
│   ├── reviews.json        # Client testimonials
│   ├── offers.json         # Services and pricing
│   ├── gallery.json        # Photo gallery
│   └── homepage.json       # Homepage sections
├── uploads/gallery/        # Uploaded images
└── docker-compose.yml      # Container orchestration

Getting Started

Prerequisites

• Node.js 18+
• .NET 8.0 SDK
• Docker & Docker Compose (optional)

Development

Frontend:

cd pp-web
npm install
npm run dev
# Open http://localhost:3000

Backend:

cd pp-api
dotnet restore
dotnet run
# API runs on http://localhost:5000

Docker:

docker-compose up -d
# Frontend: http://localhost:3000
# API: http://localhost:5000

Content Management

JSON-Based CMS

All content managed through JSON files in content/ directory. Changes visible immediately after refresh (no rebuild required).

File	Purpose
settings.json	Navigation menu, site metadata, social links
common.json	UI labels, button texts, form placeholders
contact.json	Address, phone, email, service area
offers.json	Services with pricing and details
reviews.json	Client testimonials
homepage.json	Hero section, benefits, CTA
gallery.json	Photo gallery images

Example: Adding an Offer

Edit content/offers.json:

{
  "offers": [
    {
      "slug": "przedszkole",
      "title": "Psie Przedszkole",
      "description": "Socjalizacja i zabawy dla szczeniąt",
      "price": "150 zł/miesiąc",
      "features": [
        "Grupy wiekowe",
        "Plac zabaw dla psów",
        "Profesjonalna opieka"
      ]
    }
  ]
}

URL Structure

/                        → Homepage
/o-mnie                  → About
/oferta                  → Services list
/oferta/[slug]           → Service details (przedszkole, konsultacje, wizyta-domowa)
/referencje              → Testimonials
/blog                    → Blog posts
/blog/[slug]             → Single post
/galeria                 → Photo gallery
/kontakt                 → Contact form

API Endpoints

Authentication

• POST /api/auth/login - Login, returns JWT cookie
• POST /api/auth/logout - Clear JWT cookie
• GET /api/auth/me - Get current user (auth required)

Content Management

• GET /api/offers - List offers
• PUT /api/offers/{slug} - Update offer (mod+)
• GET /api/reviews - List reviews
• POST /api/reviews - Create review (mod+)
• GET /api/posts - List posts
• POST /api/posts - Create MDX post (mod+)
• POST /api/gallery/upload - Upload image (mod+)
• POST /api/contact - Send contact email

Configuration

Frontend (pp-web/.env.local):

NEXT_PUBLIC_API_URL=http://localhost:5000

Backend (pp-api/appsettings.json):

{
  "Jwt": {
    "Secret": "your-32-char-secret-key",
    "ExpirationDays": 7
  },
  "Paths": {
    "Content": "../content",
    "Uploads": "../uploads",
    "Posts": "../data/blog"
  },
  "Smtp": {
    "Host": "smtp.example.com",
    "Port": 587,
    "User": "user@example.com",
    "Password": "password",
    "From": "noreply@example.com",
    "To": "contact@example.com"
  }
}

Sub-Projects

pp-web

Next.js frontend with Tailwind CSS and MDX blog.

pp-api

ASP.NET Core API with JWT auth and file-based storage.

Roadmap (Archived)

• ✅ JSON-based CMS
• ✅ MDX blog support
• ✅ JWT authentication
• ✅ Image upload
• ✅ Contact form
• ❌ Admin panel with WYSIWYG editor
• ❌ Database migration (PostgreSQL)
• ❌ Full Docker deployment
• ❌ Design overhaul

Credits

Built with Tailwind Nextjs Starter Blog by Timothy Lin, based on template by CultureDevOps.

License

MIT License - Based on Tailwind Nextjs Starter Blog by Timothy Lin.

Copyright (c) 2021 Timothy Lin, 2025 Dominik Karczewski