fix: resolve JSON.parse error in frontend API calls

- Add error handling for JSON encoding in all backend handlers - Add CORS support to backend server - Add proxy configuration for frontend development server - Improve error handling in frontend API calls - Build frontend to create static files for backend serving - Add comprehensive error messages and user feedback Fixes issue where frontend received malformed JSON responses from backend API.
fix: resolve frontend build issues with fetch mocks and MUI Select component
2026-02-05 20:14:12 -05:00 · 2026-02-05 17:26:34 -05:00 · 2026-02-05 17:14:20 -05:00
39 changed files with 24793 additions and 0 deletions
--- a/32
+++ b/32
@@ -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
--- a/backend/Makefile
+++ b/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
--- a/backend/backend
+++ b/backend/backend
--- a/backend/cmd/backend/main.go
+++ b/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)
+	}
+}
--- a/backend/data/test.md
+++ b/backend/data/test.md
@@ -0,0 +1 @@
+# hi
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -0,0 +1,16 @@
+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/rs/cors v1.11.1 // indirect
+	github.com/spf13/pflag v1.0.5 // indirect
+	golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8 // indirect
+)
--- a/backend/go.sum
+++ b/backend/go.sum
@@ -0,0 +1,28 @@
+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/rs/cors v1.11.1 h1:eU3gRzXLRK57F5rKMGMZURNdIG4EoAmX8k94r9wXWHA=
+github.com/rs/cors v1.11.1/go.mod h1:XyqrcTp5zjWr1wsJ8PIRZssZ8b/WMcMf71DJnit4EMU=
+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=
--- a/backend/internal/handlers/handlers.go
+++ b/backend/internal/handlers/handlers.go
@@ -0,0 +1,181 @@
+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")
+		if err := json.NewEncoder(w).Encode(map[string]interface{}{
+			"files": files,
+		}); err != nil {
+			h.logger.Errorf("Failed to encode response: %v", err)
+			h.writeError(w, http.StatusInternalServerError, "failed to encode response")
+			return
+		}
+	}
+}
+
+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")
+		if err := json.NewEncoder(w).Encode(map[string]string{
+			"message": "file created successfully",
+		}); err != nil {
+			h.logger.Errorf("Failed to encode response: %v", err)
+			h.writeError(w, http.StatusInternalServerError, "failed to encode response")
+			return
+		}
+	}
+}
+
+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")
+		if err := json.NewEncoder(w).Encode(map[string]interface{}{
+			"filename": filename,
+			"content":  string(content),
+		}); err != nil {
+			h.logger.Errorf("Failed to encode response: %v", err)
+			h.writeError(w, http.StatusInternalServerError, "failed to encode response")
+			return
+		}
+	}
+}
+
+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")
+		if err := json.NewEncoder(w).Encode(map[string]string{
+			"message": "file updated successfully",
+		}); err != nil {
+			h.logger.Errorf("Failed to encode response: %v", err)
+			h.writeError(w, http.StatusInternalServerError, "failed to encode response")
+			return
+		}
+	}
+}
+
+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")
+		if err := json.NewEncoder(w).Encode(map[string]string{
+			"message": "file deleted successfully",
+		}); err != nil {
+			h.logger.Errorf("Failed to encode response: %v", err)
+			h.writeError(w, http.StatusInternalServerError, "failed to encode response")
+			return
+		}
+	}
+}
+
+func (h *Handlers) writeError(w http.ResponseWriter, status int, message string) {
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(status)
+	if err := json.NewEncoder(w).Encode(map[string]string{
+		"error": message,
+	}); err != nil {
+		h.logger.Errorf("Failed to encode error response: %v", err)
+		w.Write([]byte(`{"error": "failed to encode error response"}`))
+	}
+}
--- a/backend/internal/logger/logger.go
+++ b/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
+}
--- a/backend/internal/server/server.go
+++ b/backend/internal/server/server.go
@@ -0,0 +1,100 @@
+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/rs/cors"
+	"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)))
+
+	// Enable CORS
+	cors := cors.New(cors.Options{
+		AllowedOrigins:   []string{"http://localhost:3000", "http://localhost:8080"},
+		AllowedMethods:   []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
+		AllowedHeaders:   []string{"Content-Type", "Authorization"},
+		AllowCredentials: true,
+	})
+	s.router.Use(cors.Handler)
+}
+
+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)
+}
--- a/backend/internal/storage/storage.go
+++ b/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()
+}
--- a/backend/markdown-editor
+++ b/backend/markdown-editor
--- a/backend/test/backend_test.go
+++ b/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))
+	}
+}
--- a/backend/test/test_api.sh
+++ b/backend/test/test_api.sh
@@ -0,0 +1,28 @@
+#!/nix/store/ypgcdmzzlgnrmdcsq72c3dxz651jg9zc-bash-5.3p3/bin/bash
+
+# Start the server in the background
+./markdown-editor --data-dir ./test/data --port 8081 --host 127.0.0.1 &
+SERVER_PID=$!
+
+# Give the server time to start
+sleep 2
+
+# Test the /api/files endpoint
+echo "Testing GET /api/files..."
+response=$(curl -s http://127.0.0.1:8081/api/files)
+echo "Response: $response"
+echo ""
+
+# Test if it's valid JSON
+if echo "$response" | python3 -m json.tool > /dev/null 2>&1; then
+    echo "✓ Response is valid JSON"
+else
+    echo "✗ Response is NOT valid JSON"
+    echo "Response was: $response"
+fi
+
+# Kill the server
+kill $SERVER_PID 2>/dev/null
+wait $SERVER_PID 2>/dev/null
+
+echo "Test completed"
--- a/backend/test/test_api_detailed.sh
+++ b/backend/test/test_api_detailed.sh
@@ -0,0 +1,35 @@
+#!/nix/store/ypgcdmzzlgnrmdcsq72c3dxz651jg9zc-bash-5.3p3/bin/bash
+
+# Start the server in the background
+./markdown-editor --data-dir ./test/data --port 8082 --host 127.0.0.1 &
+SERVER_PID=$!
+
+# Give the server time to start
+sleep 2
+
+# Test the /api/files endpoint
+echo "Testing GET /api/files..."
+response=$(curl -s -i http://127.0.0.1:8082/api/files)
+echo "$response"
+echo ""
+
+# Extract just the body (skip headers)
+body=$(echo "$response" | awk 'NR>1 && $0 !~ /^[A-Za-z]/ {print; next} /^[A-Za-z]/ {exit}')
+echo "Body: '$body'"
+echo ""
+
+# Test if it's valid JSON
+echo "Checking if response is valid JSON..."
+if echo "$body" | node -e "console.log(JSON.parse(require('fs').readFileSync(0, 'utf8')))" > /dev/null 2>&1; then
+    echo "✓ Response is valid JSON"
+    echo "$body" | node -e "console.log(JSON.parse(require('fs').readFileSync(0, 'utf8')))"
+else
+    echo "✗ Response is NOT valid JSON"
+    echo "Response was: '$body'"
+fi
+
+# Kill the server
+kill $SERVER_PID 2>/dev/null
+wait $SERVER_PID 2>/dev/null
+
+echo "Test completed"
--- a/backend/test_api.sh
+++ b/backend/test_api.sh
@@ -0,0 +1,82 @@
+#!/nix/store/ypgcdmzzlgnrmdcsq72c3dxz651jg9zc-bash-5.3p3/bin/bash
+
+# Create test data directory
+mkdir -p test/data
+
+# Start the server in the background
+./markdown-editor --data-dir test/data --port 8080 --host 127.0.0.1 > /tmp/server.log 2>&1 &
+SERVER_PID=$!
+
+# Wait for server to start
+echo "Waiting for server to start..."
+sleep 3
+
+# Check if server is running
+if ! ps -p $SERVER_PID > /dev/null; then
+    echo "Server failed to start"
+    cat /tmp/server.log
+    exit 1
+fi
+
+echo "Server is running (PID: $SERVER_PID)"
+echo "Testing API endpoints..."
+echo ""
+
+# Test 1: GET /api/files (empty)
+echo "Test 1: GET /api/files (no files)"
+response=$(curl -s http://127.0.0.1:8080/api/files)
+echo "Response: $response"
+if echo "$response" | grep -q '"files"'; then
+    echo "✓ Response contains 'files' key"
+else
+    echo "✗ Response does not contain 'files' key"
+fi
+echo ""
+
+# Test 2: Create a file
+echo "Test 2: POST /api/files (create test.md)"
+response=$(curl -s -X POST http://127.0.0.1:8080/api/files \
+    -H "Content-Type: application/json" \
+    -d '{"filename":"test.md","content":"# Test Content"}')
+echo "Response: $response"
+if echo "$response" | grep -q '"message"'; then
+    echo "✓ Response contains 'message' key"
+else
+    echo "✗ Response does not contain 'message' key"
+fi
+echo ""
+
+# Test 3: GET /api/files (with file)
+echo "Test 3: GET /api/files (with file)"
+response=$(curl -s http://127.0.0.1:8080/api/files)
+echo "Response: $response"
+if echo "$response" | grep -q '"files"'; then
+    echo "✓ Response contains 'files' key"
+    if echo "$response" | grep -q '"test.md"'; then
+        echo "✓ Response contains 'test.md'"
+    else
+        echo "✗ Response does not contain 'test.md'"
+    fi
+else
+    echo "✗ Response does not contain 'files' key"
+fi
+echo ""
+
+# Test 4: GET /api/files/test.md
+echo "Test 4: GET /api/files/test.md"
+response=$(curl -s http://127.0.0.1:8080/api/files/test.md)
+echo "Response: $response"
+if echo "$response" | grep -q '"content"'; then
+    echo "✓ Response contains 'content' key"
+else
+    echo "✗ Response does not contain 'content' key"
+fi
+echo ""
+
+# Kill the server
+echo "Stopping server..."
+kill $SERVER_PID
+wait $SERVER_PID 2>/dev/null
+
+echo ""
+echo "All tests completed!"
--- a/frontend/.gitignore
+++ b/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*
--- a/frontend/Makefile
+++ b/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
--- a/frontend/README.md
+++ b/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/).
--- a/frontend/jest.config.js
+++ b/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',
+  },
+};
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/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"
+  }
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/index.html
+++ b/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>
--- a/frontend/public/logo192.png
+++ b/frontend/public/logo192.png
--- a/frontend/public/logo512.png
+++ b/frontend/public/logo512.png
--- a/frontend/public/manifest.json
+++ b/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"
+}
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/frontend/src/App.css
+++ b/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);
+  }
+}
--- a/frontend/src/App.test.tsx
+++ b/frontend/src/App.test.tsx
@@ -0,0 +1,168 @@
+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((input: RequestInfo | URL, init?: RequestInit) => {
+  const url = typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url;
+  if (url.includes('/api/files') && !url.includes('/api/files/')) {
+    return Promise.resolve({
+      ok: true,
+      status: 200,
+      headers: new Headers(),
+      json: () => Promise.resolve({ files: ['test.md'] }),
+    } as Response);
+  }
+  return Promise.resolve({
+    ok: true,
+    status: 200,
+    headers: new Headers(),
+    json: () => Promise.resolve({}),
+  } as Response);
+}) as jest.MockedFunction<typeof fetch>;
+
+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 with a custom mock
+    const mockFetch = jest.fn((input: RequestInfo | URL, init?: RequestInit) => {
+      const url = typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url;
+      if (url.includes('/api/files')) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          headers: new Headers(),
+          json: () => Promise.resolve({ files: ['test.md'] }),
+        } as Response);
+      }
+      if (url.includes('test.md')) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          headers: new Headers(),
+          json: () => Promise.resolve({ content: '# Test Content' }),
+        } as Response);
+      }
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        headers: new Headers(),
+      } as Response);
+    });
+    global.fetch = mockFetch;
+
+    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
+    const mockFetch = jest.fn((input: RequestInfo | URL, init?: RequestInit) => {
+      const url = typeof input === 'string' ? input : input instanceof URL ? input.toString() : input.url;
+      if (url.includes('/api/files') && !init?.method) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          headers: new Headers(),
+          json: () => Promise.resolve({ files: [] }),
+        } as Response);
+      }
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        headers: new Headers(),
+      } as Response);
+    });
+    global.fetch = mockFetch;
+
+    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(mockFetch).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');
+  });
+});
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,319 @@
+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, ThemeProvider, createTheme, Select, MenuItem, FormControl, InputLabel, SelectChangeEvent } from '@mui/material';
+import { Delete, 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');
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      setFiles(data.files || []);
+    } catch (error) {
+      console.error('Error fetching files:', error);
+      // Optionally show an error message to the user
+    }
+  };
+
+  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) {
+        const errorData = await response.json();
+        alert(`Error creating file: ${errorData.error || 'Unknown error'}`);
+        return;
+      }
+
+      setNewFilename('');
+      setNewContent('');
+      fetchFiles();
+    } catch (error) {
+      console.error('Error creating file:', error);
+      alert('Error creating file. Please check console for details.');
+    }
+  };
+
+  const handleOpenFile = async (filename: string) => {
+    try {
+      const response = await fetch(`/api/files/${filename}`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      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) {
+        const errorData = await response.json();
+        alert(`Error saving file: ${errorData.error || 'Unknown error'}`);
+        return;
+      }
+
+      alert('File saved successfully!');
+    } catch (error) {
+      console.error('Error saving file:', error);
+      alert('Error saving file. Please check console for details.');
+    }
+  };
+
+  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) {
+        const errorData = await response.json();
+        alert(`Error deleting file: ${errorData.error || 'Unknown error'}`);
+        return;
+      }
+
+      fetchFiles();
+      if (currentFile?.filename === filename) {
+        setCurrentFile(null);
+      }
+    } catch (error) {
+      console.error('Error deleting file:', error);
+      alert('Error deleting file. Please check console for details.');
+    }
+  };
+
+  const theme = createTheme({
+    palette: {
+      mode: themeMode === 'system' ? 'light' : themeMode,
+    },
+  });
+
+  const handleThemeChange = (event: SelectChangeEvent<'light' | 'dark' | 'system'>) => {
+    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;
--- a/frontend/src/index.css
+++ b/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;
+}
--- a/frontend/src/index.tsx
+++ b/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();
--- a/frontend/src/logo.svg
+++ b/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>
--- a/frontend/src/react-app-env.d.ts
+++ b/frontend/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/frontend/src/reportWebVitals.ts
+++ b/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;
--- a/frontend/src/setupProxy.js
+++ b/frontend/src/setupProxy.js
@@ -0,0 +1,11 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+  app.use(
+    '/api',
+    createProxyMiddleware({
+      target: 'http://localhost:8080',
+      changeOrigin: true,
+    })
+  );
+};
--- a/frontend/src/setupTests.ts
+++ b/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';
--- a/frontend/tsconfig.json
+++ b/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"
+  ]
+}
				`@@ -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>