Fix react-tutorial: typo, navbar reference and improve error handlig

src/routes/docs/tutorials/react/step-4/+page.markdoc

@@ -29,7 +29,7 @@ export function UserProvider(props) {
   async function login(email, password) {
     const loggedIn = await account.createEmailPasswordSession(email, password);
     setUser(loggedIn);
-    window.location.replace("/"); // you can use different redirect method for your application
+    window.location.replace("/");
   }
 
   async function logout() {
@@ -60,7 +60,7 @@ export function UserProvider(props) {
       {props.children}
     </UserContext.Provider>
   );
-}
+};
 ```
 
 Now, we can use the `useUser` hook to access the user's data from any component. However, we first need to wrap our app with the `UserProvider`.

src/routes/docs/tutorials/react/step-6/+page.markdoc

@@ -4,8 +4,16 @@ title: Add database
 description: Add a database to your React application using Appwrite Web SDK.
 step: 6
 ---
+# Create database {% #create-database %}
+To store your ideas, you need to create a database first.
+
+1. Go to the Databases section in your Appwrite Console
+2. Click *Create Database*
+3. Give it a name and ID. For this tutorial, we'll use `Ideas Tracker` as the name and `ideas-tracker` as the ID.
+4. You'll need to remember the database ID as you'll need it later.
+
 # Create collection {% #create-collection %}
-In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas. 
+In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas.
 
 {% only_dark %}
 ![Create project screen](/images/docs/tutorials/dark/idea-tracker-collection.png)
@@ -58,28 +66,40 @@ export function IdeasProvider(props) {
   const [ideas, setIdeas] = useState([]);
 
   async function add(idea) {
-    const response = await databases.createDocument(
-      IDEAS_DATABASE_ID,
-      IDEAS_COLLECTION_ID,
-      ID.unique(),
-      idea
-    );
-    setIdeas((ideas) => [response, ...ideas].slice(0, 10));
+    try {
+      const response = await databases.createDocument(
+        IDEAS_DATABASE_ID,
+        IDEAS_COLLECTION_ID,
+        ID.unique(),
+        idea
+      );
+      setIdeas((ideas) => [response, ...ideas].slice(0, 10));
+    } catch (err) {
+      console.log(err) // handle error or show user a message
+    }
   }
 
   async function remove(id) {
-    await databases.deleteDocument(IDEAS_DATABASE_ID, IDEAS_COLLECTION_ID, id);
-    setIdeas((ideas) => ideas.filter((idea) => idea.$id !== id));
-    await init(); // Refetch ideas to ensure we have 10 items
+    try {
+      await databases.deleteDocument(IDEAS_DATABASE_ID, IDEAS_COLLECTION_ID, id);
+      setIdeas((ideas) => ideas.filter((idea) => idea.$id !== id));
+      await init();
+    } catch (err) {
+      console.log(err)
+    }
   }
 
   async function init() {
-    const response = await databases.listDocuments(
-      IDEAS_DATABASE_ID,
-      IDEAS_COLLECTION_ID,
-      [Query.orderDesc("$createdAt"), Query.limit(10)]
-    );
-    setIdeas(response.documents);
+    try {
+      const response = await databases.listDocuments(
+        IDEAS_DATABASE_ID,
+        IDEAS_COLLECTION_ID,
+        [Query.orderDesc("$createdAt"), Query.limit(10)]
+      );
+      setIdeas(response.documents);
+    } catch (err) {
+      console.log(err)
+    }
   }
 
   useEffect(() => {

src/routes/docs/tutorials/react/step-7/+page.markdoc

@@ -21,6 +21,16 @@ export function Home() {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
 
+  const handleSubmit = async () => {
+    try {
+      await ideas.add({ userId: user.current.$id, title, description });
+      setTitle("");
+      setDescription("");
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   return (
     <>
       {/* Show the submit form to logged in users. */}
@@ -45,9 +55,7 @@ export function Home() {
             />
             <button
               type="button"
-              onClick={() =>
-                ideas.add({ userId: user.current.$id, title, description })
-              }
+              onClick={handleSubmit}
             >
               Submit
             </button>
@@ -80,7 +88,7 @@ export function Home() {
 }
 ```
 
-In `src/App.jsx`, wrap the `main` element with the `IdeaProvider` component.
+In `src/App.jsx`, wrap the `main` element with the `IdeasProvider` component.
 
 ```client-web
 import { Login } from "./pages/Login";
@@ -95,7 +103,7 @@ function App() {
     <div>
       <UserProvider>
         <IdeasProvider>
-          <Navbar /> {/* Add the navbar before page content */}
+          <Navbar />
           <main>{isLoginPage ? <Login /> : <Home />}</main>
         </IdeasProvider>
       </UserProvider>