finished

package.json

@@ -10,14 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.3.4",
-    "axios": "^1.9.0",
+    "@hookform/resolvers": "^3.10.0",
+    "axios": "^1.12.2",
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.50.1",
+    "react-hook-form": "^7.64.0",
     "react-router-dom": "^6.22.1",
-    "zod": "^3.22.4"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",

src/components/CreateNoteForm.jsx

@@ -1,25 +1,61 @@
-// TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema
-
-
 import { Save } from "lucide-react";
+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/noteSchema";
 
 const CreateNoteForm = () => {
-  // TODO: Setup isSubmitting state with useState
-  // TODO: create navigate variable and set to useNavigate()
-
-
-  // TODO: Set up the form with useForm from react-hook-form and zodResolver from @hookform/resolvers/zod
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const navigate = useNavigate();
+  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
+    setIsSubmitting(true);
+    try {
+      await axios.post('http://localhost:3001/api/notes', data);
+      navigate('/notes');
+    } catch (error) {
+      console.error('Error creating note:', error);
+      alert('Failed to create note. 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 */}
-    </>
+    <div>
+      <h1>Create Note</h1>
+      <form onSubmit={handleSubmit(sendToTheServer)}>
+        <input
+          type="text"
+          placeholder="Title"
+          {...register("title")}
+          className="border p-2 w-full mb-2"
+        />
+        {errors.title && <p className="text-red-500">{errors.title.message}</p>}
+
+        <textarea
+          placeholder="Content"
+          rows="5"
+          {...register("content")}
+          className="border p-2 w-full mb-2"
+        />
+        {errors.content && <p className="text-red-500">{errors.content.message}</p>}
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="bg-blue-600 text-white px-4 py-2 flex items-center"
+        >
+          <Save className="w-4 h-4 mr-2" />
+          {isSubmitting ? "Saving..." : "Create"}
+        </button>
+      </form>
+    </div>
   );
 };
 

src/components/Header.jsx

@@ -23,7 +23,7 @@ const Header = () => {
               }`}
             >
               <Plus size={18} />
-              <span>Create</span>
+              <span>Create a New Note</span>
             </Link>
 
             <Link 

src/components/NoteCard.jsx

@@ -7,8 +7,8 @@ const NoteCard = ({ note, onDelete }) => {
     <div
       className="relative"
       style={{
-        filter: "drop-shadow(0 2px 4px #b266ff)", // lighter purple shadow
-        borderRadius: "6px", // less corner radius
+        filter: "drop-shadow(0 2px 4px #b266ff)", 
+        borderRadius: "6px", 
       }}
     >
       <div
@@ -18,7 +18,7 @@ const NoteCard = ({ note, onDelete }) => {
           color: "#111",
           borderRadius: "6px",
           minHeight: "180px",
-          boxShadow: "0 1px 2px rgba(0,0,0,0.06)", // lighter shadow
+          boxShadow: "0 1px 2px rgba(0,0,0,0.06)", 
           fontFamily: "inherit",
           display: "flex",
           flexDirection: "column",

src/schema/noteSchema.js

@@ -0,0 +1,6 @@
+import { z } from "zod";
+
+export const noteSchema = z.object({
+  title: z.string().min(1, 'Title is required').max(50, 'Title must be 50 characters or less'),
+  content: z.string().min(1, 'Content is required').max(500, 'Content must be 500 characters or less'),
+});

src/schema/notes.js

@@ -1,8 +1,24 @@
 import { z } from "zod";
 
 export const noteSchema = z.object({
+  title: z
+    .string()
+    .min(1, 'Title is required')
+    .max(50, 'Title must be 50 characters or less'),
+  content: z
+    .string()
+    .min(1, 'Content is required')
+    .max(500, 'Content must be 500 characters or less'),
+});
+
+
+
+
+
+
+
   //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
 
-  });
+