ChanintornSrisittikumPersonalWebsite

Chanintorn Srisittikum — Personal Website (Local Development)

A modern, static single‑page application (SPA) for a personal portfolio. The site runs entirely on the client (React + Vite + Tailwind). When an API is not available, pages use built‑in static fallbacks so everything remains functional out of the box.

Features

• Clean, responsive UI (Home, Projects, Project Detail, About, Resume, Contact).
• Static project data with images and captions (works offline / without a backend).
• Project detail sections: Overview, Context, Architecture, Approach, Results, Lessons, Goals, Constraints.
• Robust image loading with lazy/async decoding and format fallbacks.
• Fast search with debounced filtering on the Projects page.

Tech Stack

• React 18, React Router
• Vite 5 (dev server + bundler)
• Tailwind CSS 3
• PNPM workspaces

Project Structure

apps/
  client/
    public/                # Static assets (images, pdf, CNAME, robots)
    src/
      index.css            # Global styles + utility classes
      main.jsx             # App entry (React + Router)
      modules/
        App.jsx            # Layout/shell
        components/        # Reusable UI
        data/fallback.js   # Static projects + case studies
        pages/             # Route pages (Home, Projects, Detail, etc.)

Requirements

• Node.js 20+
• PNPM 8+

Quick Start (local only)

1. Install dependencies (from the repository root):

pnpm install

1. Run the client (Vite dev server):

pnpm --filter @chanin/client dev

Open http://localhost:5173

1. Optional — point the UI to a backend (if you have one):

• Create apps/client/.env and set:

VITE_API_BASE=https://your-api.example.com/api

If omitted, the UI uses static fallback data and still works normally.

Build & Preview

Build production assets:

pnpm --filter @chanin/client build

Artifacts are written to apps/client/dist.

Preview the built site:

pnpm --filter @chanin/client preview

Editing Content & SEO

• Update text/components: apps/client/src/modules/pages/*
• Update project data/captions: apps/client/src/modules/data/fallback.js
• SEO/OG tags and title: apps/client/index.html
• Place images/PDFs: apps/client/public/**

Common Scripts

• pnpm --filter @chanin/client dev — run the client dev server
• pnpm --filter @chanin/client build — build for production
• pnpm --filter @chanin/client preview — preview the production build

Notes

• The codebase is English‑only and uses ASCII punctuation to avoid cross‑platform rendering issues.
• Admin pages render UI without errors but require a real API to function (login, CRUD). For a fully static experience, leave VITE_API_BASE unset.

Full-Stack (server)

This repo contains an Express + Mongoose API in apps/server that powers dynamic features. It is optional in local dev; the UI has static fallbacks.

• Run locally: pnpm --filter @chanin/server dev (default port 8080)
• Health check: GET http://localhost:8080/health
• Env file for server: copy apps/server/.env.example to apps/server/.env
• Required vars: MONGODB_URI (or MONGO_URL/DATABASE_URL), JWT_SECRET

Deploy on Railway

This repository includes railway.json which defines two services (server, client) and uses Nixpacks.

1. Connect GitHub → Railway

• Push this repo to GitHub.
• In Railway: New Project → Deploy from GitHub → select this repo.
• Railway will create two services from railway.json.

1. Add MongoDB and variables (server)

• In Railway: New → Database → MongoDB. Copy the connection string.
• In your server service → Variables → set:
  • MONGODB_URI = the MongoDB connection URL (compatible keys MONGO_URL/DATABASE_URL also work)
  • JWT_SECRET = long random string (≥16 chars)
  • Optional: ADMIN_USER, ADMIN_PASS, PUBLIC_EMAIL, SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS, PLAUSIBLE_DOMAIN

1. Configure client variables

• In the client service → Variables:
  • VITE_API_BASE = https://<your-server-domain>.railway.app/api
  • Optional: VITE_PLAUSIBLE_DOMAIN

1. Build/Start (pre-configured)

• Server build: pnpm install && pnpm -r build
• Server start: pnpm --filter @chanin/server start
• Client build: pnpm install && pnpm --filter @chanin/client build
• Client start: pnpm --filter @chanin/client preview -- --host 0.0.0.0 --port $PORT

1. Seed data (optional)

• Local: pnpm --filter @chanin/server build && pnpm --filter @chanin/server seed
• Railway: open a shell on server service and run pnpm --filter @chanin/server seed

Notes

• Server honors dynamic PORT from Railway automatically.
• CORS is permissive by default; restrict later if needed.
• UI/UX, sizing, images, and features remain unchanged.