feat: implement WYSIWYG markdown editor with Go backend and React frontend

Makefile

@@ -0,0 +1,32 @@
+.PHONY: test
+
+test:
+	cd backend && go test ./test -v
+	cd frontend && npm test
+
+.PHONY: backend-test
+
+backend-test:
+	cd backend && go test ./test -v
+
+.PHONY: frontend-test
+
+frontend-test:
+	cd frontend && npm test
+
+.PHONY: build
+
+build:
+	cd backend && go build -o markdown-editor ./cmd/backend
+	cd frontend && npm run build
+
+.PHONY: run
+
+run:
+	cd backend && go run ./cmd/backend
+
+.PHONY: clean
+
+clean:
+	cd backend && go clean
+	cd frontend && npm run clean

backend/Makefile

@@ -0,0 +1,19 @@
+.PHONY: test
+
+test:
+	go test ./test -v
+
+.PHONY: run
+
+run:
+	go run ./cmd/backend
+
+.PHONY: build
+
+build:
+	go build -o markdown-editor ./cmd/backend
+
+.PHONY: clean
+
+clean:
+	rm -rf markdown-editor

backend/cmd/backend/main.go

@@ -0,0 +1,40 @@
+package main
+
+import (
+	"fmt"
+	"log"
+	"os"
+
+	"markdown-editor/internal/server"
+	"github.com/spf13/cobra"
+)
+
+var (
+	dataDir string
+	port    int
+	host    string
+)
+
+var rootCmd = &cobra.Command{
+	Use:   "markdown-editor",
+	Short: "A WYSIWYG Markdown Editor",
+	Long:  `A WYSIWYG Markdown Editor with Go backend and React frontend`,
+	Run: func(cmd *cobra.Command, args []string) {
+		if err := server.StartServer(dataDir, port, host); err != nil {
+			log.Fatalf("Failed to start server: %v", err)
+		}
+	},
+}
+
+func init() {
+	rootCmd.PersistentFlags().StringVar(&dataDir, "data-dir", "./data", "Storage path for markdown files")
+	rootCmd.PersistentFlags().IntVar(&port, "port", 8080, "Server port")
+	rootCmd.PersistentFlags().StringVar(&host, "host", "127.0.0.1", "Bind address")
+}
+
+func main() {
+	if err := rootCmd.Execute(); err != nil {
+		fmt.Println(err)
+		os.Exit(1)
+	}
+}

backend/go.mod

@@ -0,0 +1,15 @@
+module markdown-editor
+
+go 1.21
+
+require (
+	github.com/gorilla/mux v1.8.1
+	github.com/sirupsen/logrus v1.9.3
+	github.com/spf13/cobra v1.7.0
+)
+
+require (
+	github.com/inconshreveable/mousetrap v1.1.0 // indirect
+	github.com/spf13/pflag v1.0.5 // indirect
+	golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8 // indirect
+)

backend/go.sum

@@ -0,0 +1,26 @@
+github.com/cpuguy83/go-md2man/v2 v2.0.2/go.mod h1:tgQtvFlXSQOSOSIRvRPT7W67SCa46tRHOmNcaadrF8o=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/gorilla/mux v1.8.1 h1:TuBL49tXwgrFYWhqrNgrUNEY92u81SPhu7sTdzQEiWY=
+github.com/gorilla/mux v1.8.1/go.mod h1:AKf9I4AEqPTmMytcMc0KkNouC66V3BtZ4qD5fmWSiMQ=
+github.com/inconshreveable/mousetrap v1.1.0 h1:wN+x4NVGpMsO7ErUn/mUI3vEoE6Jt13X2s0bqwp9tc8=
+github.com/inconshreveable/mousetrap v1.1.0/go.mod h1:vpF70FUmC8bwa3OWnCshd2FqLfsEA9PFc4w1p2J65bw=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
+github.com/sirupsen/logrus v1.9.3 h1:dueUQJ1C2q9oE3F7wvmSGAaVtTmUizReu6fjN8uqzbQ=
+github.com/sirupsen/logrus v1.9.3/go.mod h1:naHLuLoDiP4jHNo9R0sCBMtWGeIprob74mVsIT4qYEQ=
+github.com/spf13/cobra v1.7.0 h1:hyqWnYt1ZQShIddO5kBpj3vu05/++x6tJ6dg8EC572I=
+github.com/spf13/cobra v1.7.0/go.mod h1:uLxZILRyS/50WlhOIKD7W6V5bgeIt+4sICxh6uRMrb0=
+github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
+github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/testify v1.7.0 h1:nwc3DEeHmmLAfoZucVR881uASk0Mfjw8xYJ99tb5CcY=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8 h1:0A+M6Uqn+Eje4kHMK80dtF3JCXC4ykBgQG4Fe06QRhQ=
+golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

backend/internal/handlers/handlers.go

@@ -0,0 +1,158 @@
+package handlers
+
+import (
+	"encoding/json"
+	"net/http"
+
+	"github.com/gorilla/mux"
+	"github.com/sirupsen/logrus"
+	"markdown-editor/internal/storage"
+)
+
+type Handlers struct {
+	logger  *logrus.Logger
+	storage storage.Storage
+}
+
+func NewHandlers(logger *logrus.Logger, storage storage.Storage) *Handlers {
+	return &Handlers{
+		logger:  logger,
+		storage: storage,
+	}
+}
+
+func (h *Handlers) ListFiles() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		files, err := h.storage.ListFiles()
+		if err != nil {
+			h.logger.Errorf("Failed to list files: %v", err)
+			h.writeError(w, http.StatusInternalServerError, err.Error())
+			return
+		}
+
+		w.Header().Set("Content-Type", "application/json")
+		json.NewEncoder(w).Encode(map[string]interface{}{
+			"files": files,
+		})
+	}
+}
+
+func (h *Handlers) CreateFile() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		var req struct {
+			Filename string `json:"filename"`
+			Content  string `json:"content"`
+		}
+
+		if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+			h.logger.Errorf("Failed to decode request body: %v", err)
+			h.writeError(w, http.StatusBadRequest, "invalid request body")
+			return
+		}
+
+		if req.Filename == "" {
+			h.writeError(w, http.StatusBadRequest, "filename is required")
+			return
+		}
+
+		if err := h.storage.WriteFile(req.Filename, []byte(req.Content)); err != nil {
+			h.logger.Errorf("Failed to create file: %v", err)
+			h.writeError(w, http.StatusInternalServerError, err.Error())
+			return
+		}
+
+		w.Header().Set("Content-Type", "application/json")
+		json.NewEncoder(w).Encode(map[string]string{
+			"message": "file created successfully",
+		})
+	}
+}
+
+func (h *Handlers) GetFile() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		vars := mux.Vars(r)
+		filename := vars["filename"]
+
+		if filename == "" {
+			h.writeError(w, http.StatusBadRequest, "filename is required")
+			return
+		}
+
+		content, err := h.storage.ReadFile(filename)
+		if err != nil {
+			h.logger.Errorf("Failed to read file: %v", err)
+			h.writeError(w, http.StatusNotFound, err.Error())
+			return
+		}
+
+		w.Header().Set("Content-Type", "application/json")
+		json.NewEncoder(w).Encode(map[string]interface{}{
+			"filename": filename,
+			"content":  string(content),
+		})
+	}
+}
+
+func (h *Handlers) UpdateFile() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		vars := mux.Vars(r)
+		filename := vars["filename"]
+
+		if filename == "" {
+			h.writeError(w, http.StatusBadRequest, "filename is required")
+			return
+		}
+
+		var req struct {
+			Content string `json:"content"`
+		}
+
+		if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+			h.logger.Errorf("Failed to decode request body: %v", err)
+			h.writeError(w, http.StatusBadRequest, "invalid request body")
+			return
+		}
+
+		if err := h.storage.WriteFile(filename, []byte(req.Content)); err != nil {
+			h.logger.Errorf("Failed to update file: %v", err)
+			h.writeError(w, http.StatusInternalServerError, err.Error())
+			return
+		}
+
+		w.Header().Set("Content-Type", "application/json")
+		json.NewEncoder(w).Encode(map[string]string{
+			"message": "file updated successfully",
+		})
+	}
+}
+
+func (h *Handlers) DeleteFile() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		vars := mux.Vars(r)
+		filename := vars["filename"]
+
+		if filename == "" {
+			h.writeError(w, http.StatusBadRequest, "filename is required")
+			return
+		}
+
+		if err := h.storage.DeleteFile(filename); err != nil {
+			h.logger.Errorf("Failed to delete file: %v", err)
+			h.writeError(w, http.StatusNotFound, err.Error())
+			return
+		}
+
+		w.Header().Set("Content-Type", "application/json")
+		json.NewEncoder(w).Encode(map[string]string{
+			"message": "file deleted successfully",
+		})
+	}
+}
+
+func (h *Handlers) writeError(w http.ResponseWriter, status int, message string) {
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(status)
+	json.NewEncoder(w).Encode(map[string]string{
+		"error": message,
+	})
+}

backend/internal/logger/logger.go

@@ -0,0 +1,18 @@
+package logger
+
+import (
+	"os"
+
+	"github.com/sirupsen/logrus"
+)
+
+func NewLogger() *logrus.Logger {
+	log := logrus.New()
+	log.SetOutput(os.Stdout)
+	log.SetFormatter(&logrus.TextFormatter{
+		ForceColors:   true,
+		FullTimestamp: true,
+	})
+	log.SetLevel(logrus.InfoLevel)
+	return log
+}

backend/internal/server/server.go

@@ -0,0 +1,90 @@
+package server
+
+import (
+	"context"
+	"fmt"
+	"net/http"
+	"os"
+
+	"markdown-editor/internal/handlers"
+	"markdown-editor/internal/logger"
+	"markdown-editor/internal/storage"
+	"github.com/gorilla/mux"
+	"github.com/sirupsen/logrus"
+)
+
+type Server struct {
+	logger    *logrus.Logger
+	storage   storage.Storage
+	handlers  *handlers.Handlers
+	router    *mux.Router
+	server    *http.Server
+	dataDir   string
+	port      int
+	host      string
+}
+
+func StartServer(dataDir string, port int, host string) error {
+	log := logger.NewLogger()
+	log.Info("Starting markdown editor server")
+
+	// Initialize storage
+	storage, err := storage.NewFileStorage(dataDir)
+	if err != nil {
+		log.Errorf("Failed to initialize storage: %v", err)
+		return err
+	}
+
+	// Initialize handlers
+	handlers := handlers.NewHandlers(log, storage)
+
+	// Create server
+	s := &Server{
+		logger:  log,
+		storage: storage,
+		handlers: handlers,
+		dataDir: dataDir,
+		port:    port,
+		host:    host,
+	}
+
+	// Setup routes
+	s.setupRoutes()
+
+	// Start server
+	s.logger.Infof("Server starting on %s:%d", host, port)
+	return s.serve()
+}
+
+func (s *Server) setupRoutes() {
+	s.router = mux.NewRouter()
+
+	// API routes
+	apiRouter := s.router.PathPrefix("/api").Subrouter()
+	apiRouter.Handle("/files", s.handlers.ListFiles()).Methods("GET")
+	apiRouter.Handle("/files", s.handlers.CreateFile()).Methods("POST")
+	apiRouter.Handle("/files/{filename}", s.handlers.GetFile()).Methods("GET")
+	apiRouter.Handle("/files/{filename}", s.handlers.UpdateFile()).Methods("PUT")
+	apiRouter.Handle("/files/{filename}", s.handlers.DeleteFile()).Methods("DELETE")
+
+	// Static file serving
+	frontendDir := "frontend/build"
+	if frontendDirEnv := os.Getenv("FRONTEND_BUILD_DIR"); frontendDirEnv != "" {
+		frontendDir = frontendDirEnv
+	}
+	s.router.PathPrefix("/").Handler(http.FileServer(http.Dir(frontendDir)))
+}
+
+func (s *Server) serve() error {
+	s.server = &http.Server{
+		Addr:    fmt.Sprintf("%s:%d", s.host, s.port),
+		Handler: s.router,
+	}
+
+	return s.server.ListenAndServe()
+}
+
+func (s *Server) Shutdown(ctx context.Context) error {
+	s.logger.Info("Shutting down server...")
+	return s.server.Shutdown(ctx)
+}

backend/internal/storage/storage.go

@@ -0,0 +1,111 @@
+package storage
+
+import (
+	"errors"
+	"io/fs"
+	"os"
+	"path/filepath"
+
+	"github.com/sirupsen/logrus"
+)
+
+type Storage interface {
+	ListFiles() ([]string, error)
+	ReadFile(filename string) ([]byte, error)
+	WriteFile(filename string, content []byte) error
+	DeleteFile(filename string) error
+	FileExists(filename string) bool
+}
+
+type FileStorage struct {
+	dataDir string
+	logger  *logrus.Logger
+}
+
+func NewFileStorage(dataDir string) (*FileStorage, error) {
+	// Create data directory if it doesn't exist
+	if err := os.MkdirAll(dataDir, 0755); err != nil {
+		return nil, err
+	}
+
+	log := logrus.New()
+	log.SetOutput(os.Stdout)
+	log.SetFormatter(&logrus.TextFormatter{
+		ForceColors:   true,
+		FullTimestamp: true,
+	})
+	log.SetLevel(logrus.InfoLevel)
+
+	return &FileStorage{
+		dataDir: dataDir,
+		logger:  log,
+	}, nil
+}
+
+func (s *FileStorage) ListFiles() ([]string, error) {
+	files, err := os.ReadDir(s.dataDir)
+	if err != nil {
+		return nil, err
+	}
+
+	var markdownFiles []string
+	for _, file := range files {
+		if !file.IsDir() && filepath.Ext(file.Name()) == ".md" {
+			markdownFiles = append(markdownFiles, file.Name())
+		}
+	}
+
+	return markdownFiles, nil
+}
+
+func (s *FileStorage) ReadFile(filename string) ([]byte, error) {
+	if !s.FileExists(filename) {
+		return nil, errors.New("file not found")
+	}
+
+	content, err := os.ReadFile(filepath.Join(s.dataDir, filename))
+	if err != nil {
+		return nil, err
+	}
+
+	return content, nil
+}
+
+func (s *FileStorage) WriteFile(filename string, content []byte) error {
+	// Ensure the file has .md extension
+	if filepath.Ext(filename) != ".md" {
+		filename += ".md"
+	}
+
+	filepath := filepath.Join(s.dataDir, filename)
+	err := os.WriteFile(filepath, content, 0644)
+	if err != nil {
+		return err
+	}
+
+	s.logger.Infof("Saved file: %s", filename)
+	return nil
+}
+
+func (s *FileStorage) DeleteFile(filename string) error {
+	filepath := filepath.Join(s.dataDir, filename)
+	err := os.Remove(filepath)
+	if err != nil {
+		if errors.Is(err, fs.ErrNotExist) {
+			return errors.New("file not found")
+		}
+		return err
+	}
+
+	s.logger.Infof("Deleted file: %s", filename)
+	return nil
+}
+
+func (s *FileStorage) FileExists(filename string) bool {
+	filepath := filepath.Join(s.dataDir, filename)
+	info, err := os.Stat(filepath)
+	if err != nil {
+		return false
+	}
+	return !info.IsDir()
+}

backend/test/backend_test.go

@@ -0,0 +1,212 @@
+package main
+
+import (
+	"bytes"
+	"encoding/json"
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"os"
+	"path/filepath"
+	"testing"
+	"time"
+
+	"github.com/gorilla/mux"
+	"markdown-editor/internal/handlers"
+	"markdown-editor/internal/logger"
+	"markdown-editor/internal/server"
+	"markdown-editor/internal/storage"
+)
+
+func TestCRUDRoundTrip(t *testing.T) {
+	// Create a temporary data directory
+	tmpDir, err := os.MkdirTemp("", "markdown-editor-test")
+	if err != nil {
+		t.Fatalf("Failed to create temp dir: %v", err)
+	}
+	defer os.RemoveAll(tmpDir)
+
+	// Initialize storage
+	storage, err := storage.NewFileStorage(tmpDir)
+	if err != nil {
+		t.Fatalf("Failed to initialize storage: %v", err)
+	}
+
+	// Initialize logger
+	log := logger.NewLogger()
+
+	// Initialize handlers
+	handlers := handlers.NewHandlers(log, storage)
+
+	// Create a router
+	router := mux.NewRouter()
+	apiRouter := router.PathPrefix("/api").Subrouter()
+	apiRouter.Handle("/files", handlers.CreateFile()).Methods("POST")
+	apiRouter.Handle("/files/{filename}", handlers.GetFile()).Methods("GET")
+	apiRouter.Handle("/files/{filename}", handlers.UpdateFile()).Methods("PUT")
+	apiRouter.Handle("/files/{filename}", handlers.DeleteFile()).Methods("DELETE")
+	apiRouter.Handle("/files", handlers.ListFiles()).Methods("GET")
+
+	// Test Create
+	t.Run("Create", func(t *testing.T) {
+		body := map[string]interface{}{
+			"filename": "test.md",
+			"content":  "# Test Content",
+		}
+		bodyBytes, _ := json.Marshal(body)
+		req := httptest.NewRequest("POST", "/api/files", bytes.NewBuffer(bodyBytes))
+		req.Header.Set("Content-Type", "application/json")
+		w := httptest.NewRecorder()
+
+		router.ServeHTTP(w, req)
+
+		if w.Code != http.StatusOK {
+			t.Errorf("Expected status 200, got %d", w.Code)
+		}
+
+		var resp map[string]string
+		json.NewDecoder(w.Body).Decode(&resp)
+		if resp["message"] != "file created successfully" {
+			t.Errorf("Expected success message, got: %s", resp["message"])
+		}
+	})
+
+	// Test Read
+	t.Run("Read", func(t *testing.T) {
+		req := httptest.NewRequest("GET", "/api/files/test.md", nil)
+		w := httptest.NewRecorder()
+
+		router.ServeHTTP(w, req)
+
+		if w.Code != http.StatusOK {
+			t.Errorf("Expected status 200, got %d", w.Code)
+		}
+
+		var resp map[string]interface{}
+		json.NewDecoder(w.Body).Decode(&resp)
+		if resp["filename"] != "test.md" {
+			t.Errorf("Expected filename 'test.md', got: %s", resp["filename"])
+		}
+		if resp["content"] != "# Test Content" {
+			t.Errorf("Expected content '# Test Content', got: %s", resp["content"])
+		}
+	})
+
+	// Test Update
+	t.Run("Update", func(t *testing.T) {
+		body := map[string]interface{}{
+			"content": "# Updated Content",
+		}
+		bodyBytes, _ := json.Marshal(body)
+		req := httptest.NewRequest("PUT", "/api/files/test.md", bytes.NewBuffer(bodyBytes))
+		req.Header.Set("Content-Type", "application/json")
+		w := httptest.NewRecorder()
+
+		router.ServeHTTP(w, req)
+
+		if w.Code != http.StatusOK {
+			t.Errorf("Expected status 200, got %d", w.Code)
+		}
+
+		var resp map[string]string
+		json.NewDecoder(w.Body).Decode(&resp)
+		if resp["message"] != "file updated successfully" {
+			t.Errorf("Expected success message, got: %s", resp["message"])
+		}
+	})
+
+	// Test List
+	t.Run("List", func(t *testing.T) {
+		req := httptest.NewRequest("GET", "/api/files", nil)
+		w := httptest.NewRecorder()
+
+		router.ServeHTTP(w, req)
+
+		if w.Code != http.StatusOK {
+			t.Errorf("Expected status 200, got %d", w.Code)
+		}
+
+		var resp map[string]interface{}
+		json.NewDecoder(w.Body).Decode(&resp)
+		files := resp["files"].([]interface{})
+		if len(files) != 1 {
+			t.Errorf("Expected 1 file, got %d", len(files))
+		}
+		if files[0] != "test.md" {
+			t.Errorf("Expected 'test.md', got: %s", files[0])
+		}
+	})
+
+	// Test Delete
+	t.Run("Delete", func(t *testing.T) {
+		req := httptest.NewRequest("DELETE", "/api/files/test.md", nil)
+		w := httptest.NewRecorder()
+
+		router.ServeHTTP(w, req)
+
+		if w.Code != http.StatusOK {
+			t.Errorf("Expected status 200, got %d", w.Code)
+		}
+
+		var resp map[string]string
+		json.NewDecoder(w.Body).Decode(&resp)
+		if resp["message"] != "file deleted successfully" {
+			t.Errorf("Expected success message, got: %s", resp["message"])
+		}
+	})
+}
+
+func TestStaticAssetServing(t *testing.T) {
+	// Create a temporary data directory
+	dataDir, err := os.MkdirTemp("", "data-test")
+	if err != nil {
+		t.Fatalf("Failed to create data dir: %v", err)
+	}
+	defer os.RemoveAll(dataDir)
+
+	// Create a temporary frontend build directory
+	frontendDir, err := os.MkdirTemp("", "frontend-build-test")
+	if err != nil {
+		t.Fatalf("Failed to create frontend dir: %v", err)
+	}
+	defer os.RemoveAll(frontendDir)
+
+	// Create a test index.html file
+	indexPath := filepath.Join(frontendDir, "index.html")
+	if err := os.WriteFile(indexPath, []byte("<html><body>Test</body></html>"), 0644); err != nil {
+		t.Fatalf("Failed to create test file: %v", err)
+	}
+
+	// Change the frontend build directory temporarily
+	originalDir := os.Getenv("FRONTEND_BUILD_DIR")
+	os.Setenv("FRONTEND_BUILD_DIR", frontendDir)
+	defer os.Setenv("FRONTEND_BUILD_DIR", originalDir)
+
+	// Start the server
+	go func() {
+		if err := server.StartServer(dataDir, 8081, "127.0.0.1"); err != nil {
+			t.Logf("Server error: %v", err)
+		}
+	}()
+
+	// Give the server time to start
+	time.Sleep(100 * time.Millisecond)
+
+	// Test static file serving
+	resp, err := http.Get("http://127.0.0.1:8081/index.html")
+	if err != nil {
+		t.Skipf("Server not ready yet: %v", err)
+		return
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		t.Errorf("Expected status 200, got %d", resp.StatusCode)
+		return
+	}
+
+	body, _ := io.ReadAll(resp.Body)
+	if string(body) != "<html><body>Test</body></html>" {
+		t.Errorf("Expected test HTML content, got: %s", string(body))
+	}
+}

frontend/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontend/Makefile

@@ -0,0 +1,19 @@
+.PHONY: test
+
+test:
+	npm test
+
+.PHONY: build
+
+build:
+	npm run build
+
+.PHONY: start
+
+start:
+	npm start
+
+.PHONY: clean
+
+clean:
+	npm run clean

frontend/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

frontend/jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  transformIgnorePatterns: [
+    "node_modules/(?!(react-markdown|@mui)/)",
+  ],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  moduleNameMapper: {
+    '\.(css|less|scss|sass)$': 'identity-obj-proxy',
+  },
+};

frontend/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.7",
+    "@mui/material": "^7.3.7",
+    "@mui/system": "^7.3.7",
+    "@testing-library/dom": "^10.4.1",
+    "@types/node": "^16.18.126",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-markdown": "^10.1.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "ts-jest": "^29.4.6"
+  }
+}

frontend/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

frontend/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

frontend/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

frontend/src/App.test.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import App from './App';
+
+// Mock react-markdown
+jest.mock('react-markdown', () => () => <div>Preview</div>);
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+    onchange: null,
+  })),
+});
+
+// Mock fetch
+global.fetch = jest.fn((url: string) => {
+  if (url.includes('/api/files') && !url.includes('/api/files/')) {
+    return Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve({ files: ['test.md'] }),
+    });
+  }
+  return Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve({}),
+  });
+}) as jest.Mock;
+
+describe('App', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders markdown editor', () => {
+    render(<App />);
+    expect(screen.getByText('Markdown Editor')).toBeInTheDocument();
+  });
+
+  test('lists files when fetched', async () => {
+    render(<App />);
+    
+    // Wait for files to be fetched
+    await waitFor(() => {
+      expect(screen.getByText('test.md')).toBeInTheDocument();
+    });
+  });
+
+  test('opens file when clicked', async () => {
+    // Mock the file content fetch
+    fetch.mockImplementationOnce((url: string) => {
+      if (url.includes('/api/files')) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({ files: ['test.md'] }),
+        });
+      }
+      if (url.includes('test.md')) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({ content: '# Test Content' }),
+        });
+      }
+      return Promise.resolve({ ok: true });
+    });
+
+    render(<App />);
+    
+    // Wait for files to be fetched
+    await waitFor(() => {
+      expect(screen.getByText('test.md')).toBeInTheDocument();
+    });
+
+    // Click on the file
+    fireEvent.click(screen.getByText('test.md'));
+    
+    // Wait for the editor to appear
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Write markdown here...')).toBeInTheDocument();
+    });
+  });
+
+  test('creates new file', async () => {
+    // Mock the create file endpoint
+    fetch.mockImplementationOnce((url: string) => {
+      if (url.includes('/api/files') && fetch.mock.calls.length === 1) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve({ files: [] }),
+        });
+      }
+      return Promise.resolve({ ok: true });
+    });
+
+    render(<App />);
+    
+    // Wait for initial fetch
+    await waitFor(() => {
+      expect(screen.getByLabelText('New filename')).toBeInTheDocument();
+    });
+
+    // Enter filename and content
+    const filenameInput = screen.getByLabelText('New filename');
+    const contentInput = screen.getByLabelText('Content');
+    fireEvent.change(filenameInput, { target: { value: 'newfile.md' } });
+    fireEvent.change(contentInput, { target: { value: '# New Content' } });
+
+    // Click create button
+    fireEvent.click(screen.getByText('Create File'));
+
+    // Verify fetch was called with POST
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith('/api/files', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          filename: 'newfile.md',
+          content: '# New Content',
+        }),
+      });
+    });
+  });
+
+  test('changes theme', () => {
+    render(<App />);
+    
+    const themeSelect = screen.getByLabelText('Theme');
+    expect(themeSelect).toBeInTheDocument();
+    
+    // Change to dark theme
+    fireEvent.mouseDown(themeSelect);
+    fireEvent.click(screen.getByText('Dark'));
+    
+    expect(themeSelect).toHaveValue('dark');
+  });
+});

frontend/src/App.tsx

@@ -0,0 +1,297 @@
+import React, { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Box, Typography, TextField, Button, List, ListItem, ListItemText, IconButton, Divider, AppBar, Toolbar, Drawer, CssBaseline, useTheme, ThemeProvider, createTheme, Select, MenuItem, FormControl, InputLabel } from '@mui/material';
+import { Delete, Edit, Add, Save, Menu as MenuIcon } from '@mui/icons-material';
+
+interface FileItem {
+  filename: string;
+  content: string;
+}
+
+const App: React.FC = () => {
+  const [files, setFiles] = useState<string[]>([]);
+  const [currentFile, setCurrentFile] = useState<FileItem | null>(null);
+  const [newFilename, setNewFilename] = useState('');
+  const [newContent, setNewContent] = useState('');
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [themeMode, setThemeMode] = useState<'light' | 'dark' | 'system'>('system');
+
+  useEffect(() => {
+    fetchFiles();
+  }, []);
+
+  const fetchFiles = async () => {
+    try {
+      const response = await fetch('/api/files');
+      const data = await response.json();
+      setFiles(data.files || []);
+    } catch (error) {
+      console.error('Error fetching files:', error);
+    }
+  };
+
+  const handleCreateFile = async () => {
+    if (!newFilename) return;
+
+    try {
+      const response = await fetch('/api/files', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          filename: newFilename,
+          content: newContent,
+        }),
+      });
+
+      if (response.ok) {
+        setNewFilename('');
+        setNewContent('');
+        fetchFiles();
+      }
+    } catch (error) {
+      console.error('Error creating file:', error);
+    }
+  };
+
+  const handleOpenFile = async (filename: string) => {
+    try {
+      const response = await fetch(`/api/files/${filename}`);
+      const data = await response.json();
+      setCurrentFile({
+        filename,
+        content: data.content,
+      });
+      setIsDrawerOpen(false);
+    } catch (error) {
+      console.error('Error opening file:', error);
+    }
+  };
+
+  const handleSaveFile = async () => {
+    if (!currentFile) return;
+
+    try {
+      const response = await fetch(`/api/files/${currentFile.filename}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          content: currentFile.content,
+        }),
+      });
+
+      if (response.ok) {
+        alert('File saved successfully!');
+      }
+    } catch (error) {
+      console.error('Error saving file:', error);
+    }
+  };
+
+  const handleDeleteFile = async (filename: string) => {
+    if (!window.confirm('Are you sure you want to delete this file?')) return;
+
+    try {
+      const response = await fetch(`/api/files/${filename}`, {
+        method: 'DELETE',
+      });
+
+      if (response.ok) {
+        fetchFiles();
+        if (currentFile?.filename === filename) {
+          setCurrentFile(null);
+        }
+      }
+    } catch (error) {
+      console.error('Error deleting file:', error);
+    }
+  };
+
+  const theme = createTheme({
+    palette: {
+      mode: themeMode === 'system' ? 'light' : themeMode,
+    },
+  });
+
+  const handleThemeChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setThemeMode(event.target.value as 'light' | 'dark' | 'system');
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Box sx={{ display: 'flex' }}>
+        <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
+          <Toolbar>
+            <IconButton color="inherit" aria-label="open drawer" edge="start" onClick={() => setIsDrawerOpen(true)} sx={{ mr: 2, display: { sm: 'none' } }}>
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" noWrap component="div">
+              Markdown Editor
+            </Typography>
+            <Box sx={{ ml: 'auto' }}>
+              <FormControl size="small" sx={{ minWidth: 120 }}>
+                <InputLabel id="theme-select-label">Theme</InputLabel>
+                <Select
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={themeMode}
+                  label="Theme"
+                  onChange={handleThemeChange}
+                >
+                  <MenuItem value="light">Light</MenuItem>
+                  <MenuItem value="dark">Dark</MenuItem>
+                  <MenuItem value="system">System</MenuItem>
+                </Select>
+              </FormControl>
+            </Box>
+          </Toolbar>
+        </AppBar>
+
+        <Drawer
+          variant="temporary"
+          open={isDrawerOpen}
+          onClose={() => setIsDrawerOpen(false)}
+          ModalProps={{ keepMounted: true }}
+          sx={{ display: { xs: 'block', sm: 'none' }, '& .MuiDrawer-paper': { boxSizing: 'border-box', width: 240 } }}
+        >
+          <Box sx={{ overflow: 'auto' }}>
+            <Typography variant="h6" sx={{ p: 2 }}>Files</Typography>
+            <Divider />
+            <List>
+              {files.map((file) => (
+                <ListItem key={file} secondaryAction={
+                  <IconButton edge="end" onClick={(e) => {
+                    e.stopPropagation();
+                    handleDeleteFile(file);
+                  }}>
+                    <Delete />
+                  </IconButton>
+                }>
+                  <ListItemText primary={file} onClick={() => handleOpenFile(file)} />
+                </ListItem>
+              ))}
+            </List>
+            <Divider />
+            <Box sx={{ p: 2 }}>
+              <TextField
+                label="New filename"
+                value={newFilename}
+                onChange={(e) => setNewFilename(e.target.value)}
+                fullWidth
+                size="small"
+                sx={{ mb: 1 }}
+              />
+              <TextField
+                label="Content"
+                value={newContent}
+                onChange={(e) => setNewContent(e.target.value)}
+                fullWidth
+                multiline
+                rows={4}
+                size="small"
+                sx={{ mb: 1 }}
+              />
+              <Button variant="contained" startIcon={<Add />} onClick={handleCreateFile} fullWidth>
+                Create File
+              </Button>
+            </Box>
+          </Box>
+        </Drawer>
+
+        <Drawer
+          variant="permanent"
+          sx={{ display: { xs: 'none', sm: 'block' }, '& .MuiDrawer-paper': { boxSizing: 'border-box', width: 240 } }}
+          open
+        >
+          <Box sx={{ overflow: 'auto' }}>
+            <Typography variant="h6" sx={{ p: 2 }}>Files</Typography>
+            <Divider />
+            <List>
+              {files.map((file) => (
+                <ListItem key={file} secondaryAction={
+                  <IconButton edge="end" onClick={(e) => {
+                    e.stopPropagation();
+                    handleDeleteFile(file);
+                  }}>
+                    <Delete />
+                  </IconButton>
+                }>
+                  <ListItemText primary={file} onClick={() => handleOpenFile(file)} />
+                </ListItem>
+              ))}
+            </List>
+            <Divider />
+            <Box sx={{ p: 2 }}>
+              <TextField
+                label="New filename"
+                value={newFilename}
+                onChange={(e) => setNewFilename(e.target.value)}
+                fullWidth
+                size="small"
+                sx={{ mb: 1 }}
+              />
+              <TextField
+                label="Content"
+                value={newContent}
+                onChange={(e) => setNewContent(e.target.value)}
+                fullWidth
+                multiline
+                rows={4}
+                size="small"
+                sx={{ mb: 1 }}
+              />
+              <Button variant="contained" startIcon={<Add />} onClick={handleCreateFile} fullWidth>
+                Create File
+              </Button>
+            </Box>
+          </Box>
+        </Drawer>
+
+        <Box component="main" sx={{ flexGrow: 1, p: 3, mt: 9, display: { xs: 'block', sm: 'flex' } }}>
+          {currentFile ? (
+            <Box sx={{ width: '100%', display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}>
+              <Box sx={{ flex: 1 }}>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+                  <Typography variant="h6">{currentFile.filename}</Typography>
+                  <Button variant="contained" startIcon={<Save />} onClick={handleSaveFile}>
+                    Save
+                  </Button>
+                </Box>
+                <TextField
+                  value={currentFile.content}
+                  onChange={(e) => setCurrentFile({ ...currentFile, content: e.target.value })}
+                  fullWidth
+                  multiline
+                  rows={20}
+                  variant="outlined"
+                  placeholder="Write markdown here..."
+                />
+              </Box>
+              <Box sx={{ flex: 1 }}>
+                <Typography variant="h6" sx={{ mb: 2 }}>Preview</Typography>
+                <Box sx={{ border: '1px solid', borderColor: 'grey.300', p: 2, borderRadius: 1, minHeight: '500px', overflow: 'auto' }}>
+                  <ReactMarkdown>{currentFile.content}</ReactMarkdown>
+                </Box>
+              </Box>
+            </Box>
+          ) : (
+            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+              <Typography variant="h5" gutterBottom>
+                No file selected
+              </Typography>
+              <Typography variant="body1" color="text.secondary">
+                Please select a file from the sidebar or create a new one
+              </Typography>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </ThemeProvider>
+  );
+};
+
+export default App;

frontend/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+reportWebVitals();

frontend/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

frontend/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

frontend/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/src/setupTests.ts

@@ -0,0 +1,2 @@
+// Jest DOM extends jest's expectation methods with methods from testing-library/jest-dom
+import '@testing-library/jest-dom';

frontend/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}