Hoppa till huvudinnehåll

Om Projektet

Teknisk dokumentation och arkitektur

Portfolio & Blog Platform

A modern full-stack web application built with Next.js, TypeScript, and PostgreSQL. The platform combines a personal portfolio with blog functionality, project management, analytics, and dynamic content.

📦View on GitHub

Features

📝

Content Management

  • Markdown Blog with GitHub CMS
    Write and publish blog posts in markdown with GitHub as version-controlled backend
  • ISR (60s)
    Incremental Static Regeneration for fresh content without rebuilds
  • Dynamic Bio & Journey
    Editable bio and timeline via admin panel with real-time updates
  • Project Showcase
    Automatic GitHub repository import with CI/CD deployment status
  • NPM Package Integration
    Live download stats and quality metrics from NPM Registry API
📊

Analytics & Tracking

  • Privacy-First Analytics
    SHA-256 IP hashing, no cookies, GDPR-compliant visitor tracking
  • Token-Based API Auth
    Bcrypt hashed tokens with rate limiting per project
  • Action Tracking
    Track visits, clicks, scrolls, downloads, and shares
  • Real-Time Dashboard
    Live stats with auto-refresh (30s polling) and admin filtering
  • Public Stats Widget
    Visitor-facing metrics (total visits, unique visitors, popular pages)
🛠️

Developer Experience

  • TypeScript (99.82%)
    Full type-safety with strict mode across entire stack
  • Kysely ORM
    Type-safe SQL query builder with CamelCase plugin
  • Server Actions
    RPC-style functions replacing 9 API routes for cleaner code
  • Path Aliases
    @/types, @/components, @/lib, @/actions for clean imports
  • Hot Reload
    Turbopack for instant feedback during development
⚡

Performance

  • SSR & ISR
    Server-side rendering with 60s incremental static regeneration
  • Parallel Queries
    Promise.all for concurrent data fetching (~50ms response time)
  • Smart Caching
    Database query optimization with proper indexing
  • Code Splitting
    Dynamic imports for reduced initial bundle size
  • Database Pooling
    Connection pooling with max 10 concurrent connections
🔒

Security & Auth

  • TOTP 2FA
    Two-factor authentication with Google Authenticator (otplib)
  • Iron Session
    Encrypted, stateless sessions with rotation
  • Protected Routes
    Server-side authentication guards for admin pages
  • IP Hashing (SHA-256)
    Privacy-preserving visitor tracking without storing PII
  • Rate Limiting
    Configurable per-token limits to prevent API abuse
🎨

UI & UX

  • Liquid Glass Design
    Glassmorphism with backdrop-blur and muted okLCH color palette
  • 6-Level Shadow System
    Depth through shadows instead of color saturation
  • Accessibility (WCAG AA)
    0 WAVE alerts, semantic HTML, ARIA labels, keyboard nav
  • Smooth Animations
    1s CSS transitions with prefers-reduced-motion support
  • Responsive Design
    Mobile-first approach tested across all breakpoints

Tech Stack

⚛️Frontend

  • ▸
    Next.js 16v16.1.1

    React framework with App Router and Server Actions

  • ▸
    React 19v19.0.0

    UI library with latest features

  • ▸
    TypeScriptv5.7.2

    Type-safe JavaScript (99.82% coverage)

  • ▸
    Tailwind CSS v4v4.0.0-alpha

    Utility-first CSS with okLCH color space

🔧Backend

  • ▸
    Server Actions

    RPC-style functions replacing REST API routes

  • ▸
    Kyselyv0.27.4

    Type-safe SQL query builder with CamelCase plugin

  • ▸
    PostgreSQL (Neon)

    Serverless Postgres with connection pooling

  • ▸
    Iron Sessionv8.0.3

    Encrypted stateless session management

  • ▸
    bcryptjsv2.4.3

    Secure password and token hashing

🔌Integrations

  • ▸
    Octokitv4.0.2

    GitHub API client for repo and content management

  • ▸
    NPM Registry API

    Package stats and metadata fetching

  • ▸
    otplibv12.0.1

    TOTP generation and validation for 2FA

  • ▸
    GitHub Webhooks

    Post-publish triggers for database sync

🛠️Dev Tools

  • ▸
    Turbopack

    Next-gen bundler for fast development

  • ▸
    ESLint

    Code linting and quality checks

  • ▸
    dotenvx

    Environment variable management

  • ▸
    tsx

    TypeScript execution for scripts

Arkitektur

The project follows a modern Next.js App Router architecture with separation of concerns, type-safety, and modular design enabling easy feature extraction.

Presentation Layer

src/app/

React Server Components, Client Components, and file-based routing

RSCApp RouterLayoutsLoading StatesError Boundaries

Action Layer

src/lib/actions/

Server Actions organized by domain (auth, posts, analytics, journey, bio, projects)

Server ActionsType-safe RPCIsolated featuresRevalidation

Data Layer

src/lib/

Database interaction and external API calls with connection pooling

KyselyType-safe queriesPostgreSQLGitHub APINPM API

Component Layer

src/components/

Reusable UI components organized by domain (layout, blog, forms, common, projects, bio, npm, ui)

Atomic DesignBarrel ExportsProps TypingClient/Server Split

Intresserad av koden?

Projektet är open source och alla kan utforska källkoden

🚀Utforska Repository