Frontend

backend/go.mod

@@ -6,6 +6,7 @@ require github.com/jackc/pgx/v5 v5.7.2
 
 require (
 	github.com/jackc/puddle/v2 v2.2.2 // indirect
+	github.com/rs/cors v1.11.1 // indirect
 	golang.org/x/sync v0.10.0 // indirect
 )
 

backend/go.sum

@@ -15,6 +15,8 @@ github.com/pashagolub/pgxmock/v4 v4.5.0 h1:l2nGpTiX0Yi62z+I69HOXYXRewkAM19bVYFsp
 github.com/pashagolub/pgxmock/v4 v4.5.0/go.mod h1:9VoVHXwS3XR/yPtKGzwQvwZX1kzGB9sM8SviDcHDa3A=
 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/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=

backend/http/example.http

@@ -55,4 +55,28 @@ DELETE http://localhost:{{PORT}}/users/2
 GET http://localhost:{{PORT}}/users
 
 ### Delete last user
-DELETE http://localhost:{{PORT}}/users/3
+DELETE http://localhost:{{PORT}}/users/3
+
+
+### Get all notes
+GET http://localhost:{{PORT}}/notes
+
+### Post a note
+POST http://localhost:{{PORT}}/notes
+Content-Type: "application/json"
+
+{
+  "user_id": 1,
+  "title": "Test",
+  "content": "dear diary"
+}
+
+
+### Post a box
+POST http://localhost:3000/boxes
+Content-Type: "application/json"
+
+{
+  "user_id": 1,
+  "name": "My favorite box"
+}

backend/middleware/middleware.go

@@ -104,7 +104,7 @@ func NoteValidatorMiddleware(next http.Handler) http.Handler {
 
 			if contentInter, ok := requestBody["content"]; ok {
 				content := contentInter.(string)
-				if len(content) < NOTE_CONTENT_MAX_LENGTH {
+				if len(content) > NOTE_CONTENT_MAX_LENGTH {
 					slog.Error(fmt.Sprintln("content must be at most", NOTE_CONTENT_MAX_LENGTH, "characters long"))
 					http.Error(w, fmt.Sprintln("content must be at most", NOTE_CONTENT_MAX_LENGTH, "characters long"), http.StatusBadRequest)
 					return

backend/server.go

@@ -14,6 +14,7 @@ import (
 	model "github.com/ZBox-Notes/ZBox/backend/models/generated_model"
 
 	"github.com/gorilla/mux"
+	"github.com/rs/cors"
 )
 
 func main() {
@@ -47,12 +48,15 @@ func main() {
 
 	// Add middleware
 	slog.Info("Adding middleware...")
+
 	r.Use(middleware.LoggingMiddleware)
 	r.Use(middleware.AuthMiddleware)
 
 	// Start the server
+	c := cors.AllowAll()
+	handler := c.Handler(r)
 	slog.Info("Server started successfully")
-	http.Handle("/", r)
+	http.Handle("/", handler)
 	http.ListenAndServe(":3000", nil)
 }
 

frontend/README.md

@@ -1,13 +1,21 @@
-# React Beginner Course 2024 (Vite, Tailwind CSS, TypeScript)
+# React + TypeScript + Vite
 
-This is the project code for my YouTube tutorial: https://www.youtube.com/watch?v=siTUv1L9ymM
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-Learn the basics of **React.js** with Tailwind CSS and TypeScript. You will learn:
-- How to set up a new React project using Vite
-- How to install & use Tailwind CSS in React
-- How to think in React
-- The difference between declarative and imperative code
-- What are components, props, JSX, SPA, unidirectional data flow, callbacks, state, side effects, and more.
-- How to build your first app with clean & well-organized code
+While this project uses React, Vite supports many popular JS frameworks. [See all the supported frameworks](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).
 
-![thumbnail](https://github.com/codinginflow/2024-react-beginner/assets/52977034/8388f39f-b9da-46b6-b5f8-8d1281205069)
+## Deploy Your Own
+
+Deploy your own Vite project with Vercel.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/framework-boilerplates/vite-react&template=vite-react)
+
+_Live Example: https://vite-react-example.vercel.app_
+
+### Deploying From Your Terminal
+
+You can deploy your new Vite project with a single command from your terminal using [Vercel CLI](https://vercel.com/download):
+
+```shell
+$ vercel
+```

frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

frontend/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

frontend/index.html

@@ -1,13 +1,20 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="./src/assets/logo.svg" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ZBox - Note taking</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>