Merge pull request #1019 from appwrite/doc-139-correct-mistakes-in-react-tutorial-in-docs

Correct mistakes in the react tutorial docs

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

@@ -10,7 +10,7 @@ step: 2
 Create a React app with the `npm create` command.
 
 ```sh
-npm create vite@latest --template react ideas-tracker && cd ideas-tracker
+npm create vite@latest -- --template react ideas-tracker && cd ideas-tracker
 ```
 
 # Add dependencies {% #add-dependencies %}

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

@@ -54,4 +54,4 @@ client
 
 export const account = new Account(client);
 export const databases = new Databases(client);
-```
+```

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

@@ -29,6 +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
   }
 
   async function logout() {
@@ -182,5 +183,4 @@ export function Login() {
     </section>
   );
 }
-```
-
+```

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

@@ -5,7 +5,7 @@ description: Add a database to your React application using Appwrite Web SDK.
 step: 6
 ---
 # 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)
@@ -14,12 +14,26 @@ In Appwrite, data is stored as a collection of documents. Create a collection in
 ![Create project screen](/images/docs/tutorials/idea-tracker-collection.png)
 {% /only_light %}
 
+## Attributes
+
 Create a new collection with the following attributes:
-| Field       | Type   | Required |
-|-------------|--------|----------|
-| userId      | String | Yes      |
-| title       | String | Yes      |
-| description | String | No       |
+| Field       | Type   | Required | Size   |
+|-------------|--------|----------|--------|
+| userId      | String | Yes      |  50    |
+| title       | String | Yes      |  25    |
+| description | String | No       |  100   |
+
+# Configure permissions {% #configure-permissions %}
+{% only_dark %}
+![Collection permissions screen](/images/docs/tutorials/dark/idea-tracker-permissions.png)
+{% /only_dark %}
+{% only_light %}
+![Collection permissions screen](/images/docs/tutorials/idea-tracker-permissions.png)
+{% /only_light %}
+
+Navigate to the **Settings** tab of your collection, add the role **Any** and check the **Read** box.
+Next, add a **Users** role and give them access to **Create** by checking those boxes.
+These permissions apply to all documents in your new collection.
 
 # Ideas context {% #ideas-context %}
 
@@ -79,4 +93,3 @@ export function IdeasProvider(props) {
   );
 }
 ```
-

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

@@ -78,4 +78,30 @@ export function Home() {
     </>
   );
 }
+```
+
+In `src/App.jsx`, wrap the `main` element with the `IdeaProvider` component.
+
+```client-web
+import { Login } from "./pages/Login";
+import { Home } from "./pages/Home";
+import { UserProvider } from "./lib/context/user";
+import { IdeaProvider } from "./lib/context/ideas";
+
+function App() {
+  const isLoginPage = window.location.pathname === "/login";
+
+  return (
+    <div>
+      <UserProvider>
+        <IdeaProvider>
+          <Navbar /> {/* Add the navbar before page content */}
+          <main>{isLoginPage ? <Login /> : <Home />}</main>
+        </IdeaProvider>
+      <UserProvider>
+    </div>
+  );
+}
+
+export default App;
 ```