WYSIWYG Markdown Editor

A markdown editor with live preview built with Go backend and React/TypeScript frontend.

Features

• Live Markdown Preview: Write markdown and see the rendered output in real-time (GitHub Flavored Markdown support)
• File Management: Create, read, update, and delete markdown files
• Theme Support: Light, dark, and system theme with persistent preference
• Responsive Design: Works seamlessly on desktop (1920px+) and mobile (320px+)
• REST API: Full CRUD API for markdown file operations

Tech Stack

Backend

• Go 1.23
• Cobra (CLI)
• Logrus (logging)
• net/http (server)

Frontend

• React 18
• TypeScript
• Tailwind CSS
• Vite (build tool)
• React Markdown + remark-gfm (markdown rendering)
• Lucide React (icons)

Project Structure

eval/
├── backend/
│   ├── cmd/server/          # CLI application entry point
│   ├── internal/
│   │   ├── api/            # HTTP handlers
│   │   ├── config/         # Configuration
│   │   ├── logging/        # Logging setup
│   │   ├── router/         # Route definitions
│   │   └── storage/        # File storage logic
│   └── test/               # Backend tests
├── frontend/
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── hooks/          # Custom React hooks
│   │   ├── services/       # API client
│   │   ├── test/           # Frontend tests
│   │   └── types/          # TypeScript types
│   └── dist/               # Production build
├── flake.nix               # Nix development environment
├── Makefile                # Build and test commands
└── SPEC.md                 # Project specification

Development

Prerequisites

The development environment is configured using Nix. It provides:

• go, gopls, golangci-lint (Go tooling)
• nodejs, eslint (Node.js tooling)
• gnumake, lsof (Build tools)

Running Tests

# Run all tests (backend + frontend)
make test

# Run only backend tests
make backend-test

# Run only frontend tests
make frontend-test

Building Frontend

make frontend-build

Running Backend Server

# Start with default settings (host: 127.0.0.1, port: 8080, data-dir: ./data)
cd backend && go run ./cmd/server

# Start with custom settings
cd backend && go run ./cmd/server --port 3000 --host 0.0.0.0 --data-dir ./mydata

Running Frontend (Development)

cd frontend && npm run dev

The dev server proxies API requests to the backend at http://127.0.0.1:8080.

API Endpoints

List Files

GET /api/files
Response: [{ name: string, content: string, modified: number }]

Get File

GET /api/files/:name
Response: { name: string, content: string, modified: number }

Create File

POST /api/files
Content-Type: application/json
Body: { name: string, content: string }
Response: { name: string, content: string, modified: number }

Update File

PUT /api/files/:name
Content-Type: application/json
Body: { content: string }
Response: { name: string, content: string, modified: number }

Delete File

DELETE /api/files/:name
Response: 204 No Content

Error Responses

All errors return 4xx/5xx status codes with JSON body:

{
  "error": "error message"
}

Milestones Completed

Backend (6/6 milestones)

• ✅ B1: CLI & Server Setup
• ✅ B2: CRUD API
• ✅ B3: File Storage
• ✅ B4: Logging
• ✅ B5: Static Assets
• ✅ B6: Backend Tests (6 tests passing)

Frontend (6/6 milestones)

• ✅ F1: Project Setup
• ✅ F2: File Management UI
• ✅ F3: Editor & Preview
• ✅ F4: Theme System
• ✅ F5: Responsive Design
• ✅ F6: Frontend Tests (19 tests passing)

Integration

• The backend can serve the frontend build artifacts when configured with --static-dir

Evaluation Checklist

• ✅ CLI starts with defaults (--host=127.0.0.1, --port=8080, --data-dir=./data)
• ✅ CRUD works end-to-end (tested via backend tests)
• ✅ Static assets are properly served (backend test verifies)
• ✅ Theme switch & persistence (frontend tests verify)
• ✅ Responsive at 320px and 1920px (Tailwind responsive classes)

License

MIT