Eko

package.json

@@ -31,8 +31,8 @@
     "globals": "^15.9.0",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.5.3",
+    "typescript": "^5.8.3",
     "typescript-eslint": "^8.3.0",
-    "vite": "^5.4.2"
+    "vite": "^6.3.5"
   }
 }

server/index.js

@@ -14,16 +14,22 @@ const limiter = rateLimit({
 });
 
 // CORS configuration
-const corsOptions = {
+
+ const corsOptions = {
   origin:
     process.env.NODE_ENV === "production"
       ? ["https://your-production-domain.com"]
-      : ["http://localhost:3000", "http://localhost:5173"],
+      : [
+          "http://localhost:3000",
+          "http://localhost:5173",
+          "http://localhost:5176",
+        ],
   methods: ["GET", "POST", "PUT", "DELETE"],
   allowedHeaders: ["Content-Type", "Authorization"],
   credentials: true,
 };
 
+
 // Middleware
 app.use(cors(corsOptions));
 app.use(express.json());

src/components/CreateNoteForm.jsx

@@ -1,26 +1,93 @@
 // TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema
-
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { noteSchema } from "../schema/notes";
 
 import { Save } from "lucide-react";
 
+
 const CreateNoteForm = () => {
   // TODO: Setup isSubmitting state with useState
+  const [isSubmitting, setIsSubmitting] = useState(false);
   // TODO: create navigate variable and set to useNavigate()
+  const navigate = useNavigate();
 
 
   // TODO: Set up the form with useForm from react-hook-form and zodResolver from @hookform/resolvers/zod
+  const {
+  register,
+  handleSubmit,
+  formState: { errors },
+} = useForm({
+  resolver: zodResolver(noteSchema),
+});
+
+
+
 
   const sendToTheServer = async (data) => {
     // TODO: Send the data to the server
     // TODO: Use axios to create a new note in the server using the endpoint http://localhost:3001/api/notes
+    try{
+      setIsSubmitting(true);
+      console.log('sending data to server:', data)
+     await axios.post("http://localhost:3001/api/notes", data);
+    alert("Note created successfully!");
+    navigate("/")
+    } catch (error){
+      console.error("Error creating note", error.response?.data|| error.message);
+      alert("Something went wrong. Please try again.");
+    } finally{
+      setIsSubmitting(false);
+    }
+
+
   };
 
   return (
-    <>
-    <h1>Create Note</h1>
-    {/* TODO: Setup the form with TailwindCSS, create a form with the following fields: title, content, and submit button */}
-    </>
+    <form onSubmit={handleSubmit(sendToTheServer)} className="bg-white p-8 rounded-md shadow-md">
+      <h2 className="text-xl font-semibold mb-4">Create a New Note</h2>
+
+      <div className="mb-4">
+        <label className="block font-medium mb-1">Title</label>
+        <input
+          {...register("title")}
+          type="text"
+          className="w-full px-4 py-2 border rounded-md"
+          placeholder="Note Title"
+        />
+        {errors.title && (
+          <p className="text-red-500 text-sm mt-1">{errors.title.message}</p>
+        )}
+      </div>
+
+      <div className="mb-6">
+        <label className="block font-medium mb-1">Content</label>
+        <textarea
+          {...register("content")}
+          className="w-full px-4 py-2 border rounded-md"
+          rows={6}
+          placeholder="Write your note here..."
+        />
+        {errors.content && (
+          <p className="text-red-500 text-sm mt-1">{errors.content.message}</p>
+        )}
+      </div>
+
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className="w-full bg-yellow-400 hover:bg-yellow-500 text-white py-2 rounded-md flex items-center justify-center gap-2"
+      >
+        <Save size={16} />
+        {isSubmitting ? "Saving..." : "Save Note"}
+      </button>
+    </form>
   );
 };
 
 export default CreateNoteForm;
+

src/schema/notes.js

@@ -1,8 +1,13 @@
 import { z } from "zod";
 
 export const noteSchema = z.object({
-  //TODO: create the title and content schema, 
-  // Make sure the title is required and the content is required
-  // Make sure the title is max 50 characters and the content is max 500 characters
-
-  });
+  title: z
+    .string()
+    .min(1, "Title is required")
+    .max(50, "Title must be less than 50 characters"),
+
+  content: z
+    .string()
+    .min(5, "Content is required")
+    .max(500, "Content must be less than 500 characters"),
+});

tsconfig.app.json

@@ -1,4 +1,4 @@
-{
+{ 
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,