with file db

.gitignore

@@ -1,2 +1,4 @@
 dist/
 node_modules/
+
+*.local*

index.html

@@ -6,7 +6,11 @@
   </head>
   <body>
     <h1>GDG Counter Website</h1>
-    <div id="app"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <div class="app">
+      <div id="counter-value">???</div>
+      <button id="btn-decrement">Decrementa</button>  
+      <button id="btn-increment">Incrementa</button>
+    </div>
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>

main.go

@@ -20,8 +20,65 @@ func main() {
 	log.Fatal(server.ListenAndServe())
 }
 
+type Store interface {
+	Count() (int, error)
+	Increment() (int, error)
+	Decrement() (int, error)
+}
+
+const StoreFilename = "store.local.json"
+
+type fileStore struct {
+	Counter int `json:"counter"`
+}
+
+func (db *fileStore) Count() (int, error) {
+	if err := readOrCreateJson(StoreFilename, db); err != nil {
+		return 0, err
+	}
+
+	return db.Counter, nil
+}
+
+func (db *fileStore) Increment() (int, error) {
+	if err := readOrCreateJson(StoreFilename, db); err != nil {
+		return 0, err
+	}
+
+	db.Counter++
+
+	if err := writeJson(StoreFilename, db); err != nil {
+		return 0, err
+	}
+
+	return db.Counter, nil
+}
+
+func (db *fileStore) Decrement() (int, error) {
+	if err := readOrCreateJson(StoreFilename, db); err != nil {
+		return 0, err
+	}
+
+	db.Counter--
+
+	if err := writeJson(StoreFilename, db); err != nil {
+		return 0, err
+	}
+
+	return db.Counter, nil
+}
+
 func setupRoutes(mux *http.ServeMux) {
-	counter := 0
+	var db Store = &fileStore{Counter: 0}
+	{
+		initialCount, err := db.Count()
+		if err != nil {
+			log.Fatalf(`Unable to create store: %v`, err)
+			return
+		}
+
+		log.Printf(`Store correctly initialized, count: %v`, initialCount)
+	}
 
 	// API Routes
 
@@ -46,12 +103,17 @@ func setupRoutes(mux *http.ServeMux) {
 			return
 		}
 
-		w.Header().Set("Content-Type", "application/json")
-		err := json.NewEncoder(w).Encode(counter)
+		count, err := db.Count()
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
+
+		w.Header().Set("Content-Type", "application/json")
+		if err := json.NewEncoder(w).Encode(count); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
 	})
 
 	mux.HandleFunc("/api/increment", func(w http.ResponseWriter, r *http.Request) {
@@ -60,11 +122,14 @@ func setupRoutes(mux *http.ServeMux) {
 			return
 		}
 
-		counter++
+		newCount, err := db.Increment()
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
 
 		w.Header().Set("Content-Type", "application/json")
-		err := json.NewEncoder(w).Encode(counter)
-		if err != nil {
+		if err := json.NewEncoder(w).Encode(newCount); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
@@ -76,11 +141,14 @@ func setupRoutes(mux *http.ServeMux) {
 			return
 		}
 
-		counter--
+		newCount, err := db.Decrement()
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
 
 		w.Header().Set("Content-Type", "application/json")
-		err := json.NewEncoder(w).Encode(counter)
-		if err != nil {
+		if err := json.NewEncoder(w).Encode(newCount); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}

package.json

@@ -6,10 +6,6 @@
         "build": "vite build"
     },
     "devDependencies": {
-        "@preact/preset-vite": "^2.5.0",
         "vite": "^3.2.3"
-    },
-    "dependencies": {
-        "preact": "^10.13.0"
     }
 }

src/main.js

@@ -0,0 +1,27 @@
+const counterElement = document.querySelector('#counter-value')
+const incrementButton = document.querySelector('#btn-increment')
+const decrementButton = document.querySelector('#btn-decrement')
+
+function updateCounter(value) {
+    counterElement.textContent = `Counter: ${value}`
+}
+
+incrementButton.addEventListener('click', async () => {
+    const res = await fetch('/api/increment', { method: 'POST' })
+    const data = await res.json()
+    updateCounter(data)
+})
+
+decrementButton.addEventListener('click', async () => {
+    const res = await fetch('/api/decrement', { method: 'POST' })
+    const data = await res.json()
+    updateCounter(data)
+})
+
+async function main() {
+    const res = await fetch('/api/value')
+    const data = await res.json()
+    updateCounter(data)
+}
+
+main()

src/main.jsx

@@ -1,38 +0,0 @@
-import { render } from 'preact'
-import { useState, useEffect } from 'preact/hooks'
-
-const App = ({}) => {
-    const [counter, setCounter] = useState(0)
-
-    useEffect(() => {
-        fetch('/api/value')
-            .then(res => res.json())
-            .then(count => setCounter(count))
-    }, [])
-
-    return (
-        <>
-            <div>{counter}</div>
-            <button
-                onClick={() => {
-                    fetch('/api/decrement', { method: 'POST' })
-                        .then(res => res.json())
-                        .then(count => setCounter(count))
-                }}
-            >
-                Decrementa
-            </button>
-            <button
-                onClick={() => {
-                    fetch('/api/increment', { method: 'POST' })
-                        .then(res => res.json())
-                        .then(count => setCounter(count))
-                }}
-            >
-                Incrementa
-            </button>
-        </>
-    )
-}
-
-render(<App />, document.querySelector('#app'))

utils.go

@@ -0,0 +1,40 @@
+package main
+
+import (
+	"encoding/json"
+	"os"
+)
+
+func readOrCreateJson(filename string, value any) error {
+	f, err := os.Open(filename)
+	if err != nil {
+		if os.IsNotExist(err) {
+			return writeJson(filename, value)
+		}
+
+		return err
+	}
+	defer f.Close()
+
+	if json.NewDecoder(f).Decode(value); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func writeJson(filename string, value any) error {
+	f, err := os.Create(filename)
+	if err != nil {
+		return err
+	}
+	defer f.Close()
+
+	enc := json.NewEncoder(f)
+	enc.SetIndent("", "    ")
+	if err := enc.Encode(value); err != nil {
+		return err
+	}
+
+	return nil
+}

vite.config.js

@@ -1,4 +1,3 @@
-import preactPlugin from '@preact/preset-vite'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
@@ -8,5 +7,4 @@ export default defineConfig({
             '/api': 'http://localhost:4000/',
         },
     },
-    plugins: [preactPlugin()],
 })