Complete

package.json

@@ -11,12 +11,13 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "@tailwindcss/vite": "^4.1.13",
     "axios": "^1.9.0",
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.50.1",
-    "react-router-dom": "^6.22.1",
+    "react-router-dom": "^6.30.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -30,7 +31,7 @@
     "eslint-plugin-react-refresh": "^0.4.11",
     "globals": "^15.9.0",
     "postcss": "^8.4.35",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.3.0",
     "vite": "^5.4.2"

src/components/CreateNoteForm.jsx

@@ -1,25 +1,103 @@
 // 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 { Save } from "lucide-react";
+import { z } from "zod";
 
+//import { noteSchema } from "../validation/noteSchema"; // Adjust the path as needed
 
-import { Save } from "lucide-react";
+// Define the schema for validation
+const noteSchema = z.object({
+  title: z.string().min(1, 'Title is required'),
+  content: z.string().min(1, 'Content is required'),
+});
 
-const CreateNoteForm = () => {
   // TODO: Setup isSubmitting state with useState
   // TODO: create navigate variable and set to useNavigate()
+  const CreateNoteForm = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false); //
+  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) => {
+    console.log(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("/"); // Redirect to the home page after successful submission
+    } catch (error) {
+      console.error("Error creating note:", error);
+      // Handle the error, maybe show an alert to the user
+    } 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 className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
+        <h1 className="text-3xl font-bold text-center text-gray-800 mb-6">Create Note</h1>
+        <form onSubmit={handleSubmit(sendToTheServer)} className="space-y-6">
+          <div>
+            <label htmlFor="title" className="block text-sm font-medium text-gray-700">
+              Title
+            </label>
+            <input
+              type="text"
+              id="title"
+              {...register("title")}
+              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"placeholder="Note Title"
+            />
+            {errors.title && <p className="mt-1 text-sm text-red-500">{errors.title.message}</p>}
+          </div>
+
+          <div>
+            <label htmlFor="content" className="block text-sm font-medium text-gray-700">
+              Content
+            </label>
+            <textarea
+              id="content"
+              rows="5"
+              {...register("content")}
+              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"placeholder="Write your note here"
+            />
+            {errors.content && <p className="mt-1 text-sm text-red-500">{errors.content.message}</p>}
+          </div>
+
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="w-full flex justify-center items-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+          >
+            <Save className="h-5 w-5 mr-2" />
+            {isSubmitting ? "Creating..." : "Save Note"}
+          </button>
+        </form>
+      </div>
+    </div>
+</>
   );
 };
 

src/components/Header.jsx

@@ -35,7 +35,7 @@ const Header = () => {
               }`}
             >
               <List size={18} />
-              <span>View All</span>
+              <span>View Notes</span>
             </Link>
           </div>
         </nav>

src/schema/notes.js

@@ -1,8 +1,17 @@
 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()
+  .title("Title is required")
+    .max(50, "Title must be 50 characters or less"),
+  content: z
+  .string()
+  .content("Content is required")
+    .max(500, "Content must be 500 characters or less"),
 
-  });
+      });

tsconfig.app.json

@@ -21,4 +21,4 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]
-}
+}

vite.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   optimizeDeps: {
     exclude: ['lucide-react'],
   },